如何使用剧作家mcp？
引言
你试过用Cursor或Claude编写剧作家测试吗？是啊，有点乱。
为什么？因为你的人工智能助手不知道你的网页上有什么。这就像试图向被蒙住眼睛的人描述一幅画。结果如何？
- 古怪的测试 → 人工智能正在猜测选择器，但它弄错了。
- 破碎的脚本 → 你花在修复测试上的时间比写测试多。
- 调试噩梦 → 人工智能无法“看到”正在发生的事情，所以你最终会做所有的繁重工作。
如果你的人工智能能够真正理解你的网页，而不仅仅是做出有根据的猜测，那岂不是很好？
请输入剧作家mcp！
playwright-mcp 通过使浏览器完全可见，赋予您的AI助手超能力。您的AI助理现在可以实时访问页面DOM、元素和交互，而不是在黑暗中工作。
剧作家mcp如何工作（又名我们如何解决这个混乱）
安装后，剧作家mcp会启动一个由剧作家控制的浏览器，并让你的人工智能助手完全访问它。这将解锁：
- 记录互动 → 点击、键入、滚动——让剧作家mcp将你的动作变成功能齐全的剧作家测试用例。
- 截图 → 捕获元素或整个页面，以便您的AI获得实际的视觉上下文（不再猜测）。
- 提取DOM → 抓取整个HTML结构，这样AI就可以生成坚如磐石的选择器。
- 执行JavaScript → 在浏览器中运行自定义JS进行调试、自动化或只是为了好玩。
为什么你会喜欢剧作家mcp
🚀 人工智能生成的实际有效的测试 → 不再有古怪的选择器、破碎的测试或猜测。
⏳ 节省大量时间 → 编写和调试Playwright测试的速度提高了5倍。
🛠️ 头痛更少 → 你的AI助手可以获取实时页面上下文，因此它可以生成真实的测试用例。
🔌 开箱即用 → 将其插入Cursor、Claude、WindSurf或任何您使用的设备中——它都能正常工作。
为你的人工智能提供它应得的环境
厌倦了修复人工智能生成的测试？停止调试人工智能的错误猜测——开始编写完美的剧作家测试。使用下面的指南安装剧作家mcp，让你的AI助手真正帮助你一次。
安装：立即启动并运行
先决条件（即开始前需要什么）
安装之前 playwright-mcp，确保您有：
✅ Node.js安装在你的系统上（因为，嗯……它是一个npm包）
✅ Playwright及其Chromium浏览器已安装
✅ 支持MCP的IDE，如Cursor
✅ 一个准备好像专业人士一样自动化剧作家测试的大脑
设置剧作家mcp（我保证，这很容易）
将其连接到IDE（光标设置）
如果您使用的是Cursor，请按照以下步骤进行连接 playwright-mcp 像老板一样：
- 打开光标IDE
- 导航到“设置”(⚙️)
- 选择光标设置→ 转到MCP选项卡
- 点击“添加新的MCP服务器”
- 填写以下详细信息：
- Name →
playwright-mcp - 命令→
npx -y playwright-mcp
- 点击“添加”，然后砰的一声——你已连接！ 🚀
注意：如果点击“添加新的MCP服务器”，打开一个文件（.cursor/MCP.json），粘贴以下代码并保存：
JSX``` 1 2 3 4 5 6 7 8 9 10 11{ “mcpServers”: { “playwright-mcp”: { “command”: “npx”, “args”: [ “-y”, “playwright-mcp” ] } } }
现在，Cursor确实能够理解您的网页。不再有基于零上下文的随机测试建议！前往 [克劳德教程](https://ashish-bansal.github.io/playwright-mcp/tutorials/claude-desktop-tutorial) 或 [光标教程](https://ashish-bansal.github.io/playwright-mcp/tutorials/cursor-tutorial) 为了更深入地理解它。
---
### **将其连接到Claude桌面**
等等…它能和其他人工智能助手一起工作吗？对！当 `playwright-mcp` 对于IDE来说，这是天作之合，你也可以用它和Claude桌面一起编写测试。
1. 安装 `playwright-mcp` （简单部分）
1. 首先，启动终端并运行：
2. `npm install -g playwright-mcp`
2. 将其连接到Claude桌面
1. 查找配置文件
2. 在窗户上
1. `%APPDATA%\Claude\claude_desktop_config.json`
3. 在 macOS 上：
1. `~/Library/Application Support/Claude/claude_desktop_config.json`
4. 更新配置文件
JSX```
1
2
3
4
5
6
7
8{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "playwright-mcp"]
}
}
}-
重新启动克劳德桌面（因为这是新的一天）
-
关闭并重新打开Claude Desktop以应用更改。
-
验证它是否正常工作
-
一旦一切准备就绪，让我们测试一下克劳德现在是否真的可以和剧作家交谈。
-
打开Claude并问：“列出所有可用的MCP工具。”
-
如果
playwright-mcp如果安装正确，它应该列出以下工具： -
get-context -
get-full-dom -
get-screenshot -
execute-code -
init-browser -
validate-selectors -
让Claude初始化浏览器，在您批准后，浏览器应该会打开！
现在Calude可以访问网页了。你可以要求它编写高度上下文相关的测试！前往 克劳德教程 或 光标教程 为了更深入地理解它。