如何使用 playwright-mcp？

介绍

playwright-mcp（模型上下文协议）是一款强大的工具，它弥合了 AI 助手和浏览器自动化之间的差距。它使 AI 模型能够与 Web 浏览器交互、检查 DOM 元素、记录用户交互，并生成更高精度的 Playwright 测试脚本。本指南将指导您如何有效地设置和使用 playwright-mcp。

Related MCP server: Playwright MCP

工具

浏览器界面中可用的工具：

浏览器工具箱

1. 选择 DOM (🎯)：点击即可从页面中选择并捕获 HTML 元素。使用它来记录测试用例的选择器。

2. 选择图像 (📸)：截取特定元素的屏幕截图。适用于视觉测试或文档撰写。

3. 记录交互 (📋)：记录浏览器交互，例如点击、输入和导航。这些交互会自动生成选择器，并可以作为上下文传递给 Claude 或 Cursor 等 MCP 客户端，以帮助编写测试用例。

MCP 命令

1. init-browser ：初始化剧作家浏览器。

2. get-context ：获取网站上下文，用于编写测试用例

3. execute-code ：针对当前页面执行自定义 Playwright JS 代码

4. get-screenshot ：获取当前页面的屏幕截图

5. get-full-dom ：获取当前页面的完整 DOM。（建议使用get-context代替）

了解更多

想深入了解？查看完整文档：

📖