你试过用Cursor或Claude来写剧作家测试吗？是的，确实有点乱。
概览
你试过用Cursor或Claude来写剧作家测试吗？是的，确实有点乱。 为什么？因为你的AI助手根本不知道你网页上有什么。这就像试图向蒙眼的人描述一幅画。结果呢？ - → AI猜测选择器，结果出错了。- → 你花在修正测试上的时间比写测试还多。- → AI无法“看到”发生了什么，所以最终你得承担所有繁重的工作。 如果你的AI能真正理解你的网页，而不是仅仅凭有根据的猜测，那该多好？ Playwright-MCP 通过让浏览器对其完全可见，赋予你的 AI 助手超能力。你的 AI 助手不再是在黑暗中工作，而是能够实时访问页面的 DOM、元素和交互。 安装后，playwright-mcp 会启动一个由 Playwright 控制的浏览器，并赋予你的 AI 助手完全访问权限。这将解锁： 1.
概述（AI 翻译）
引言
你试过用Cursor或Claude来写剧作家测试吗？是的，确实有点乱。
为什么？因为你的AI助手根本不知道你网页上有什么。这就像试图向蒙眼的人描述一幅画。结果呢？
- 不稳定的测试 → AI猜测选择器，结果出错了。
- 坏掉的脚本 → 你花在修测试上的时间比写测试还多。
- 调试噩梦 → AI无法“看到”发生了什么，所以最终都是你来做所有繁重的工作。
如果你的AI能真正理解你的网页，而不是仅仅凭有根据的猜测，那该多好？
剧作家MCP登场！
playwright-mcp 通过让浏览器完全可见，赋予你的 AI 助手超能力。你的 AI 助手不再是在黑暗中工作，而是可以实时访问页面的 DOM、元素和交互。
剧作家MCP如何运作（又名我们如何解决这场混乱）
安装后，playwright-mcp 会启动一个由 Playwright 控制的浏览器，并赋予你的 AI 助手完全访问权限。这将解锁：
- 录制互动 → 点击、输入、滚动——让playwright-mcp将你的操作转化为功能齐全的Playwright测试案例。
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
How to Use playwright-mcp?
Introduction
Ever tried using Cursor or Claude to write Playwright tests? Yeah, it’s kind of a mess.
Why? Because your AI assistant has no clue what’s on your web page. It’s like trying to describe a painting to someone who’s blindfolded. The result?
- Flaky tests → The AI is guessing selectors, and it gets them wrong.
- Broken scripts → You spend more time fixing tests than writing them.
- Debugging nightmares → The AI can’t “see” what’s happening, so you end up doing all the heavy lifting.
Wouldn’t it be nice if your AI could actually understand your web page instead of just making educated guesses?
Enter playwright-mcp !
playwright-mcp gives your AI assistant superpowers by making the browser fully visible to it. Instead of working in the dark, your AI assistant now has real-time access to the page DOM, elements, and interactions.
How playwright-mcp Works (AKA How We Fix This Mess)
Once installed, playwright-mcp spins up a Playwright-controlled browser and gives your AI assistant full access to it. This unlocks:
- Recording interactions → Click, type, scroll—let playwright-mcp turn your actions into fully functional Playwright test cases.
- Taking screenshots → Capture elements or full pages so your AI gets actual visual context (no more guessing).
- Extracting the DOM → Grab the entire HTML structure so the AI can generate rock-solid selectors.
- Executing JavaScript → Run custom JS inside the browser for debugging, automation, or just for fun.
Why You’ll Love playwright-mcp
🚀 AI-generated tests that actually work → No more flaky selectors, broken tests, or guesswork.
⏳ Massive time savings → Write and debug Playwright tests 5x faster.
🛠️ Fewer headaches → Your AI assistant gets live page context, so it can generate real test cases.
🔌 Works out of the box → Plug it into Cursor, Claude, WindSurf, or whatever you use—it just works.
Give Your AI the Context It Deserves
Tired of fixing AI-generated tests? Stop debugging AI’s bad guesses—start writing flawless Playwright tests. Use the guide below to install playwright-mcp and let your AI assistant actually help you for once.
Installation: Get Up and Running in No Time
Prerequisites (a.k.a. What You Need Before You Start)
Before you install playwright-mcp, make sure you have:
✅ Node.js installed on your system (because, well… it’s an npm package)
✅ Playwright and its Chromium browser installed
✅ An IDE that supports MCP, like Cursor
✅ A brain that’s ready to automate Playwright tests like a pro
Setting Up playwright-mcp (It’s Easy, I Promise)
Connect It to Your IDE (Cursor Setup)
安装
npx -y playwright-mcp配置
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": [
"-y",
"playwright-mcp"
]
}
}
}