使用playwright+扩展新手贴

问题描述：

最近才接触到playwright-mcp ， 以前都是蠢蠢的coding。这两天有看到佬们用的飞起 安利上,它对我最大的作用是可以直接使用我已经登录过的站点去做操作。总结下使用的经验给小白借鉴（主要摘取trae文章 精简些步骤）。

[前言]

Playwright MCP（Model Context Protocol）是微软基于 Playwright 框架推出的 AI 浏览器自动化新协议。它通过结构化快照数据和自然语言指令结合大型语言模型（如 GPT），实现无需编码的网页交互。无论你是要测试登录流程、抓取价格数据，还是用 AI 远程控制浏览器，Playwright MCP 都能大幅降低门槛，让“说人话”也能驱动自动化脚本。本篇将从功能介绍、技术架构、使用方法到实际场景，带你全面理解这一自动化革命。

Playwright 支持的能力

Playwright MCP Server 支持的能力如下：

API 方法	能力
start_codegen_session	开始一个新的代码生成会话来记录 Playwright 操作。
end_codegen_session	结束代码生成会话并生成测试文件。
get_codegen_session	获取关于代码生成会话的信息。
clear_codegen_session	清除代码生成会话而不生成测试文件。
playwright_navigate	导航到一个 URL。
playwright_screenshot	对当前页面或特定元素进行截图。
playwright_click	点击页面上的元素。
playwright_iframe_click	点击 iframe 中的元素。
playwright_fill	填写输入字段。
playwright_select	使用 Select 标签选择页面上的元素。
playwright_hover	悬停在页面的元素上。
playwright_evaluate	在浏览器控制台执行 JavaScript。
playwright_console_logs	检索浏览器的控制台日志（带过滤选项）。
playwright_close	关闭浏览器并释放所有资源。
playwright_get	执行 HTTP GET 请求。
playwright_post	执行 HTTP POST 请求。
playwright_put	执行 HTTP PUT 请求。
playwright_patch	执行 HTTP PATCH 请求。
playwright_delete	执行 HTTP DELETE 请求。
playwright_expect_response	要求 Playwright 开始等待 HTTP 响应。
playwright_assert_response	等待并验证先前初始化的 HTTP 响应等待操作。
playwright_custom_user_agent	为浏览器设置自定义 User Agent。
playwright_get_visible_text	获取当前页面的可见文本内容。
playwright_get_visible_html	获取当前页面的 HTML 内容。
playwright_go_back	在浏览器历史中后退。
playwright_go_forward	在浏览器历史中前进。
playwright_drag	将元素拖动到目标位置。
playwright_press_key	按下键盘键。
playwright_save_as_pdf	将当前页面保存为 PDF 文件。
playwright_click_and_switch_tab	点击一个链接并跳转到新打开的页签。

效果展示

以下为部分使用 TRAE IDE 自动化测试网页的效果展示：

• 打开网页：该示例中，TRAE IDE 自动打开了 linux 页面 并查看了前3帖子。

image1915×1015 114 KB

操作步骤

跟随教程，在项目中集成 MCP Server - Playwright，配置智能体，然后使用指令来测试网页。

[切入正题]

安装Trae||Trae cn，且安装playwright mcp

image896×627 26.6 KB

• 可以直接市场搜索添加，这里只要列一下手动安装
• 手动配置如下

{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest", "--browser=chrome", "--extension" ], "env": { "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "扩展中的token 后面会讲" } } } }

安装浏览器支持的扩展 Playwright MCP Bridge

这里有一个 Playwright CRX 可以录制、编程快速生成自动化脚本（与本文无关 属于扩展点）

• 谷歌/扩展商店 中搜索下载安装 Playwright MCP Bridge 扩展

• 进入 chrome://extensions/ 打开开发者模式

• 进入 chrome://extensions/?id=mmlmfjhmonkocbjadbfplnigmagldckm 则 Playwright MCP Bridge 扩展的详情页勾选如图所示开关

image1022×804 33.1 KB

• 配置完成后点击扩展，进入扩展详情，PLAYWRIGHT_MCP_EXTENSION_TOKEN 则是刚刚我们在trae中安装mcp的配置，args中选项参考 playwright-mcp

image955×828 35.4 KB

创建自定义智能体并为其配置 Playwright

亦可不使用智能体，直接对话让其使用 Playwright 打开xxx网页做什么事情

• 输入智能体的名称（例如：网页测试助手）。
  image956×868 33.7 KB

• 在 工具-MCP 部分，仅勾选 Playwright。在 工具-内置 部分，勾选 阅读、编辑、终端、预览、联网搜索。
  image941×893 31.9 KB

• 也可以使用提示词，智能快捷生成哈例如 你是一个专业的网页自动化测试专家，精通 Playwright 自动化测试工具。你的任务是根据用户的指令帮助其测试网页。

开始使用

• 使用网页专家打开 linux 点击未读板块 并看前三贴是将什么的

image1454×749 114 KB

image777×893 46.9 KB

[End]

网友解答：

---

--【壹】--：

现在撸免费要绑卡了。也只有14天量也不大，对比cursor个人感觉trae还是弱一点。目前我更多用国内版本一点 对于我来说用那个都一样也不会用它内置模型

---

--【贰】--：

trae 用国际版好点 模型gpt、gemini 之类的，我是用的本站佬们做的traeproxy加的自定义模型（自建的中转站）我用trae 主要是用它tab补全、和可以选代码片段去coding
image413×601 27.9 KB

---

--【叁】--：

免费的时候我用（薅）过一段时间，感觉优化体验不如cursor就放弃了，不知现在怎么样了

---

--【肆】--： coldingcode:

如果是claude code该怎么配置呢，佬有教程么

对于cc的话，我用的不多单你可以直接把配置的mcp 配置丢给它让他给你创mcp，自己配置下扩展就行了。比如这是codex 的
image1256×841 74.4 KB

---

--【伍】--：

感谢分享，在按佬友步骤安装好扩展后，cc-switch中可以这样配置：

{ "command": "cmd", "args": [ "/c", "npx", "-y", "@playwright/mcp@latest", "--extension" ], "env": { "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "**********************" }, "type": "stdio" }```

---

--【陆】--： 曾帅:

Playwright MCP Bridge

如果是claude code该怎么配置呢，佬有教程么

---

--【柒】--：

歪个楼，佬友用的是trae是国际版还是啥，好用吗都有啥模型，费用咋样