剧作家
Playwright浏览器自动化模型上下文协议服务器
构建可重用的浏览器自动化工作流程，人工智能可以智能地选择和执行。停止重复生成相同的步骤——定义一次测试自动化，随处使用。
______________________________________________________________________
🚀 快速开始
安装
# Install globally
npm install -g playwrightium
# Or use with npx (no installation needed)
npx playwrightiumMCP配置
添加到您的MCP设置（VS Code、Claude Desktop等）：
{
"mcpServers": {
"playwrightium": {
"command": "npx",
"args": ["-y", "playwrightium"]
}
}
}就是这样！ 服务器将自动创建 .playwright-mcp 主目录中的工作区。
自定义工作区（可选）
{
"mcpServers": {
"playwrightium": {
"command": "npx",
"args": [
"-y",
"playwrightium",
"--base",
"/path/to/your/workspace"
]
}
}
}种子AI助手集成（可选）
为您的AI助手安装聊天模型和提示：
# For GitHub Copilot
playwrightium seed --loop=copilot
# For Claude
playwrightium seed --loop=claude这将在中创建特定于工作区的配置 .github/chatmodels 和 .github/prompts （副驾驶）或 .claude/agents （克劳德）。
您的第一次自动化
使用 @create-shortcut 在您的AI助手中提示：
@create-shortcut Login to my staging environmentAI将指导您完成以下任务：
- 使用手动测试工作流
browser-session - 使用适当的选择器创建YAML快捷方式
- 保存到
.playwright-mcp/shortcuts/login.yaml - 测试最终快捷方式
______________________________________________________________________
🎯 自动化的三种方法
1.浏览器会话（内置）
直接执行命令而不创建文件：
{
"tool": "browser-session",
"commands": [
{ "type": "navigate", "url": "https://example.com" },
{ "type": "fill", "selector": "#email", "value": "user@example.com" },
{ "type": "click", "selector": "button[type='submit']" },
{ "type": "screenshot", "path": "result.png" }
]
}2.快捷方式（YAML）
支持环境变量的可重用工作流：
# .playwright-mcp/shortcuts/login.yaml
commands:
- type: navigate
url: ${{STAGING_URL}}
- type: fill
selector: "#email"
value: ${{USER_EMAIL}}
- type: fill
selector: "#password"
value: ${{USER_PASSWORD}}
- type: click
selector: 'button[type="submit"]'
- type: wait_for_text
text: "Dashboard"运行方式： execute-shortcut { "shortcutPath": "login.yaml" }
3.脚本（Types/JavaScript）
具有完整编程功能的高级自动化：
// .playwright-mcp/scripts/extract-users.ts
import type { Page } from 'playwright';
export default async function({ page, logger, env }) {
await page.goto(env.ADMIN_URL);
const users = await page.$$eval('.user-row', rows =>
rows.map(row => ({
name: row.querySelector('.name').textContent,
email: row.querySelector('.email').textContent
}))
);
logger(`Extracted ${users.length} users`);
return { users };
}运行方式： execute-script { "scriptPath": "extract-users.ts" }
______________________________________________________________________
🔐 环境变量
使用确保凭据安全 .env 文件夹：
# .env (at repository root)
STAGING_URL=https://staging.example.com
USER_EMAIL=test@example.com
USER_PASSWORD=secure-password
API_KEY=your-api-key在快捷方式中使用： ${{VARIABLE_NAME}}\ 在脚本中使用： env.VARIABLE_NAME
______________________________________________________________________
🧰 内置工具
browser-session-在一次调用中执行25个以上的浏览器命令execute-shortcut-运行YAML工作流文件execute-script-运行Types/JavaScript自动化browser-snapshot-捕获页面状态以进行调试browser-debug-获取控制台日志和网络请求close-browser-重置浏览器会话
可用命令
导航、单击、填充、键入、悬停、截图、滚动、求值、等待文本、获取文本、获取属性、按键、选择选项、选中、取消选中、上传文件、拖动、重新加载、获取url、获取标题等！
______________________________________________________________________
🤖 AI助手提示
Playwrightium内置了用于指导自动化创建的提示：
@create-shortcut
使用适当的测试工作流程创建YAML快捷方式：
@create-shortcut Login to staging and navigate to user dashboard@create-script
使用最佳实践创建TypeScript脚本：
@create-script Extract all product data from the admin panel这两个提示都强制执行：
- ✅ 首先手动测试
browser-session - ✅ 使用环境变量作为凭据
- ✅ 仅在测试成功后创建文件
- ✅ 包括全面的错误处理
项目级集成
使用 playwrightium seed 要在项目中安装chatmodels/agent以实现团队一致性，请执行以下操作：
playwrightium seed --loop=copilot # → .github/chatmodels & prompts
playwrightium seed --loop=claude # → .claude/agents看 种子指令文件 了解详情。
______________________________________________________________________
📖 文档
完整文档可在 docs/ 目录：
- 快速入门指南 -详细设置和首次自动化
- 命令参考 -完整的命令文档
- 快捷方式指南 -YAML工作流创建
- 脚本指南 -Types/JavaScript自动化
- 秘密管理 -环境变量和安全
- 自定义操作 -构建可重用的TypeScript工具
- 最佳实践 -强大的自动化模式
- 建筑 -剧作家是如何工作的
______________________________________________________________________
🌟 主要特点
- 🖥️ 默认情况下为带头浏览器 -查看您的自动化操作
- 🔐 安全的秘密管理 -环境变量
${{VAR}}语法 - 🎯 持续浏览器会话 -跨操作保持状态
- 🤖 AI引导创作 -内置快捷方式和脚本提示
- 📦 三个自动化层 -浏览器命令、快捷方式和脚本
- 🔧 TypeScript优先 -全类型安全和智能感知
- ⚡ 零配置 -使用合理的默认值即可开箱即用
- 🧪 测试第一工作流程 -文件创建前的手动测试
______________________________________________________________________
🔄 发展
地方发展
git clone https://github.com/analysta-ai/playwrightium.git
cd playwrightium
npm install
npm run build
npm run dev配置选项
# Headed (default) - watch automation
playwrightium
# Headless - background execution
playwrightium --headless
PLAYWRIGHTIUM_HEADLESS=1 playwrightium
# Custom workspace
playwrightium --base /path/to/workspace --actions .my-actions
# Verbose logging
playwrightium --verbose______________________________________________________________________
� 例子
快速搜索自动化
{
"tool": "browser-session",
"commands": [
{ "type": "navigate", "url": "https://google.com" },
{ "type": "fill", "selector": "input[name='q']", "value": "Playwright" },
{ "type": "press_key", "key": "Enter" },
{ "type": "screenshot", "path": "results.png" }
]
}电子商务测试快捷方式
# test-checkout.yaml
commands:
- type: navigate
url: ${{SHOP_URL}}
- type: fill
selector: "#search"
value: "laptop"
- type: click
selector: ".product:first-child"
- type: click
selector: "#add-to-cart"
- type: screenshot
path: "cart.png"数据提取脚本
export default async function({ page, env, logger }) {
await page.goto(`${env.ADMIN_URL}/reports`);
const data = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.data-row'))
.map(row => ({
date: row.querySelector('.date').textContent,
revenue: row.querySelector('.revenue').textContent
}));
});
logger(`Extracted ${data.length} records`);
return { data, timestamp: new Date().toISOString() };
}______________________________________________________________________
🔗 链接
- NPM包: https://www.npmjs.com/package/playwrightium
- GitHub存储库: https://github.com/analysta-ai/playwrightium
- 文档: ./docs/
- 模型上下文协议: https://modelcontextprotocol.io
- 剧作家: https://playwright.dev
______________________________________________________________________
🤝 贡献
欢迎投稿！请阅读我们的贡献指南，并向存储库提交拉取请求。
自动化快乐！ 🚀