我用的是当前最主流、官方维护的playwright/mcp1 Playwright MCP介绍Playwright MCP 是一个服务端协议它不能单独运行需要挂载在一个支持 MCP 的 AI 客户端上。你平时写代码用哪个就选哪个Cursor / VS Code (推荐)开发体验最顺滑生成的代码可以直接编辑保存到项目里。Claude Desktop适合纯探索和生成逻辑但复制代码到项目里稍麻烦。Windsurf / Claude Code同上只要支持 MCP 即可。Playwright MCP 网址https://github.com/microsoft/playwright-mcp下面的步骤以 我用的QoderCN 为例其他客户端配置逻辑完全一致。2、安装并配置 Playwright MCP 服务2.1 安装Node.jshttps://nodejs.org/en/download安装成功后记得去cmd.exe中验证node --version 和 npx --version2.1 第一步确认 PyCharm 插件版本Playwright MCP 功能需要 JetBrains 插件 v2.5.0 或更高版本。可以在 PyCharm 的 Settings → Plugins 里检查 Qoder CN 是否已更新到该版本。2.2 在 Qoder CN 中添加 MCP 服务我试了几次将按我成功的方式说明。下面有两种方法我成功的是方法22.2.1 方法一通过pycharm中的Qoder CN添加Qoder CN 的 MCP 配置入口在个人设置里不在 PyCharm 本身的设置中。我看网上说打开 MCP 服务页面在 PyCharm 右上角点击 Qoder CN 的头像进入“个人设置”然后点击 “MCP 服务”。手动添加服务点击右上角的 “”选择 “手工添加”。填写配置信息名称playwright类型选择 STDIO本地命令运行命令npx参数-y playwright/mcplatest填在参数一栏注意前后不要有多余空格保存保存后Qoder CN 会尝试启动这个本地服务。如果 Node.js 环境正常图标应该会显示连接成功。2.2.2 方法二使用配置文件添加在你的用户目录下找到 ~/.qoder-cn/settings.jsonWindows 对应 C:\Users用户名.qoder-cn\settings.json添加以下配置{mcpServers:{playwright:{command:npx,args:[-y,playwright/mcplatest]}}}配好后在pycharm中查看2.2.2.1 如果状态为错误1、在终端里直接运行配置里的命令看看它是否能独立启动npx-y playwright/mcplatest如果第一次运行卡住耐心等几分钟等它下载完。如果它启动后停在原地说明服务本身没问题问题可能出在 Qoder CN 的连接上。如果它报错了仔细看错误信息。2、尝试刷新或重启点击 Qoder CN 界面上的“刷新”按钮或者重启一下 PyCharm看状态是否恢复。如果之前 npx 下载还没完成重启后它可能已经缓存好了。3、 解决方案改用 node 直接启动如果 npx 方式一直失败可以在项目里安装 playwright/mcp 包然后把配置里的 command 从 npx 改成 node用绝对路径指向 cli.js 文件来启动。操作步骤在终端进入项目目录运行 npm install -D playwright/mcp。找到 node_modules/playwright/mcp/cli.js 的绝对路径。把 mcp.json 里的配置改成{mcpServers:{playwright:{command:node,args:[C:/你的项目路径/node_modules/playwright/mcp/cli.js]}}}我是直接用的node的绝对路径{mcpServers:{playwright:{command:你的node.exe路径,args:[D:\\code\\noboautotest\\nb_all\\node_modules\\playwright\\mcp\\cli.js,--browsermsedge]}}}保存后重启 Qoder CN。3 在智能体模式下使用配置完成后需要在 智能体模式 下与 AI 对话切换模式在 Qoder CN 的对话框里把模式切换为“智能体”。下达指令用自然语言让 AI 去浏览器里跑一遍流程。比如“使用 Playwright MCP导航到 https://你的页面.com输入邮箱 testexample.com点击登录然后把生成的 Python 脚本给我。”确认执行当 AI 需要调用 browser_navigate、browser_click 等工具时Qoder CN 会弹出确认提示。点击批准后它会实际操作浏览器并根据页面的无障碍快照来定位元素最终生成基于 get_by_role 等稳定定位符的代码。首次启动较慢第一次运行时npx 需要下载 Playwright MCP 包和浏览器内核可能会卡顿一两分钟耐心等待即可。跨项目可用在 Qoder CN 个人设置里添加的 MCP 服务默认是用户级的在所有项目中都能用不需要每个 PyCharm 工程都重新配一遍。4 AI 实际会怎么做背后的机制探索SnapshotAI 会先调用 browser_navigate 打开页面然后用 browser_snapshot 抓取页面的无障碍树Accessibility Tree。这比截图更高效AI 能“看懂”哪个是输入框哪个是按钮。交互ActAI 会调用 browser_type、browser_click 等工具去操作页面。在这个过程中它自己就“试”出了哪个 ref元素引用是有效的。生成Generate因为 AI 已经知道了正确的元素引用它在生成代码时就不会瞎猜 CSS 选择器而是能直接给出类似 page.get_by_role(“button”, name“登录”).click() 这样稳定的代码。 两个提升效率的进阶技巧使用“持久化配置文件”避免重复登录默认情况下MCP 每次启动的浏览器都是“干净”的遇到需要登录的页面会很麻烦。你可以在配置 MCP 的 args 里加上 --user-data-dir./my-profile路径自定。这样第一次手动登录后登录状态和 Cookies 会保存下来下次 AI 再操作时就是已登录状态了。直接用“自然语言”执行脚本而非生成脚本如果你只是想快速验证一个流程而不是非要留下代码文件你可以直接让 AI 去操作而不要求它输出 Python。例如“用 Playwright MCP 帮我测一下把商品加入购物车后页面右上角的数字会不会变成 1”。AI 会直接执行并给你文字结论。这比生成脚本再运行要快得多。⚠️ 需要注意的坑Token 消耗会比较大AI 每次探索页面、抓取快照都会消耗上下文。如果一个流程特别长比如 30 步建议拆分成几个小任务让 AI 分别生成最后人工拼装。生成的是“草稿”而非“成品”MCP 生成的代码在定位上通常比手动写的准但断言逻辑和异常处理仍然很弱。你拿到 AI 生成的代码后务必人工检查 expect 语句是否加得合理。
QoderCN+python+playwright自动生成自动化脚本
我用的是当前最主流、官方维护的playwright/mcp1 Playwright MCP介绍Playwright MCP 是一个服务端协议它不能单独运行需要挂载在一个支持 MCP 的 AI 客户端上。你平时写代码用哪个就选哪个Cursor / VS Code (推荐)开发体验最顺滑生成的代码可以直接编辑保存到项目里。Claude Desktop适合纯探索和生成逻辑但复制代码到项目里稍麻烦。Windsurf / Claude Code同上只要支持 MCP 即可。Playwright MCP 网址https://github.com/microsoft/playwright-mcp下面的步骤以 我用的QoderCN 为例其他客户端配置逻辑完全一致。2、安装并配置 Playwright MCP 服务2.1 安装Node.jshttps://nodejs.org/en/download安装成功后记得去cmd.exe中验证node --version 和 npx --version2.1 第一步确认 PyCharm 插件版本Playwright MCP 功能需要 JetBrains 插件 v2.5.0 或更高版本。可以在 PyCharm 的 Settings → Plugins 里检查 Qoder CN 是否已更新到该版本。2.2 在 Qoder CN 中添加 MCP 服务我试了几次将按我成功的方式说明。下面有两种方法我成功的是方法22.2.1 方法一通过pycharm中的Qoder CN添加Qoder CN 的 MCP 配置入口在个人设置里不在 PyCharm 本身的设置中。我看网上说打开 MCP 服务页面在 PyCharm 右上角点击 Qoder CN 的头像进入“个人设置”然后点击 “MCP 服务”。手动添加服务点击右上角的 “”选择 “手工添加”。填写配置信息名称playwright类型选择 STDIO本地命令运行命令npx参数-y playwright/mcplatest填在参数一栏注意前后不要有多余空格保存保存后Qoder CN 会尝试启动这个本地服务。如果 Node.js 环境正常图标应该会显示连接成功。2.2.2 方法二使用配置文件添加在你的用户目录下找到 ~/.qoder-cn/settings.jsonWindows 对应 C:\Users用户名.qoder-cn\settings.json添加以下配置{mcpServers:{playwright:{command:npx,args:[-y,playwright/mcplatest]}}}配好后在pycharm中查看2.2.2.1 如果状态为错误1、在终端里直接运行配置里的命令看看它是否能独立启动npx-y playwright/mcplatest如果第一次运行卡住耐心等几分钟等它下载完。如果它启动后停在原地说明服务本身没问题问题可能出在 Qoder CN 的连接上。如果它报错了仔细看错误信息。2、尝试刷新或重启点击 Qoder CN 界面上的“刷新”按钮或者重启一下 PyCharm看状态是否恢复。如果之前 npx 下载还没完成重启后它可能已经缓存好了。3、 解决方案改用 node 直接启动如果 npx 方式一直失败可以在项目里安装 playwright/mcp 包然后把配置里的 command 从 npx 改成 node用绝对路径指向 cli.js 文件来启动。操作步骤在终端进入项目目录运行 npm install -D playwright/mcp。找到 node_modules/playwright/mcp/cli.js 的绝对路径。把 mcp.json 里的配置改成{mcpServers:{playwright:{command:node,args:[C:/你的项目路径/node_modules/playwright/mcp/cli.js]}}}我是直接用的node的绝对路径{mcpServers:{playwright:{command:你的node.exe路径,args:[D:\\code\\noboautotest\\nb_all\\node_modules\\playwright\\mcp\\cli.js,--browsermsedge]}}}保存后重启 Qoder CN。3 在智能体模式下使用配置完成后需要在 智能体模式 下与 AI 对话切换模式在 Qoder CN 的对话框里把模式切换为“智能体”。下达指令用自然语言让 AI 去浏览器里跑一遍流程。比如“使用 Playwright MCP导航到 https://你的页面.com输入邮箱 testexample.com点击登录然后把生成的 Python 脚本给我。”确认执行当 AI 需要调用 browser_navigate、browser_click 等工具时Qoder CN 会弹出确认提示。点击批准后它会实际操作浏览器并根据页面的无障碍快照来定位元素最终生成基于 get_by_role 等稳定定位符的代码。首次启动较慢第一次运行时npx 需要下载 Playwright MCP 包和浏览器内核可能会卡顿一两分钟耐心等待即可。跨项目可用在 Qoder CN 个人设置里添加的 MCP 服务默认是用户级的在所有项目中都能用不需要每个 PyCharm 工程都重新配一遍。4 AI 实际会怎么做背后的机制探索SnapshotAI 会先调用 browser_navigate 打开页面然后用 browser_snapshot 抓取页面的无障碍树Accessibility Tree。这比截图更高效AI 能“看懂”哪个是输入框哪个是按钮。交互ActAI 会调用 browser_type、browser_click 等工具去操作页面。在这个过程中它自己就“试”出了哪个 ref元素引用是有效的。生成Generate因为 AI 已经知道了正确的元素引用它在生成代码时就不会瞎猜 CSS 选择器而是能直接给出类似 page.get_by_role(“button”, name“登录”).click() 这样稳定的代码。 两个提升效率的进阶技巧使用“持久化配置文件”避免重复登录默认情况下MCP 每次启动的浏览器都是“干净”的遇到需要登录的页面会很麻烦。你可以在配置 MCP 的 args 里加上 --user-data-dir./my-profile路径自定。这样第一次手动登录后登录状态和 Cookies 会保存下来下次 AI 再操作时就是已登录状态了。直接用“自然语言”执行脚本而非生成脚本如果你只是想快速验证一个流程而不是非要留下代码文件你可以直接让 AI 去操作而不要求它输出 Python。例如“用 Playwright MCP 帮我测一下把商品加入购物车后页面右上角的数字会不会变成 1”。AI 会直接执行并给你文字结论。这比生成脚本再运行要快得多。⚠️ 需要注意的坑Token 消耗会比较大AI 每次探索页面、抓取快照都会消耗上下文。如果一个流程特别长比如 30 步建议拆分成几个小任务让 AI 分别生成最后人工拼装。生成的是“草稿”而非“成品”MCP 生成的代码在定位上通常比手动写的准但断言逻辑和异常处理仍然很弱。你拿到 AI 生成的代码后务必人工检查 expect 语句是否加得合理。
