使用说明

项目简介

Playwright MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，它充当 AI 助手与 Web 浏览器自动化之间的桥梁。通过此服务器，AI 模型（如 Cursor IDE 中的 AI 功能）可以与 Web 浏览器进行交互，实现 DOM 元素检查、用户交互录制、以及生成 Playwright 测试脚本等功能。

主要功能点

浏览器自动化: 启动和控制真实的 Chromium 浏览器实例，进行网页浏览和操作。
DOM 元素拾取: 通过集成的浏览器工具，可以方便地选取网页上的 DOM 元素，获取元素 HTML 结构。
交互录制: 记录用户在浏览器中的点击、输入、导航等操作，自动生成可用于测试用例编写的上下文信息。
代码执行: 允许执行自定义 Playwright JavaScript 代码，直接在浏览器环境中与页面进行交互。
上下文信息获取: 提供获取网页上下文信息的功能，例如 DOM 结构、屏幕截图和用户交互记录，以便 AI 助手理解当前页面状态。
选择器验证: 支持验证 CSS 选择器的有效性，确保生成的测试代码能够准确地定位到目标元素。

安装步骤

安装 Node.js: 确保您的系统中已安装 Node.js 运行环境。您可以从 Node.js 官网下载并安装。
安装 Playwright: Playwright MCP Server 依赖 Playwright 库进行浏览器操作。如果尚未安装，请运行以下命令进行安装：
```
npm install playwright
```
或者
```
yarn add playwright
```
安装 Playwright 时，会自动下载 Chromium 浏览器。

安装 playwright-mcp: 通过 npm 或 yarn 安装 playwright-mcp 包：

npm install playwright-mcp

或者

yarn add playwright-mcp

服务器配置

为了让 MCP 客户端（如 Cursor IDE）连接到 Playwright MCP Server，您需要在客户端中配置服务器信息。以下是 Cursor IDE 中配置 Playwright MCP Server 的示例配置信息（JSON 格式）：

{
  "server name": "playwright-mcp",
  "command": "npx",
  "args": ["-y", "playwright-mcp"]
}

配置参数说明:

server name: 服务器名称，可以自定义，例如 'playwright-mcp'。
command: 运行服务器的命令，这里使用 'npx' 来运行本地安装的 'playwright-mcp' 包。
args: 命令参数，'-y playwright-mcp' 表示使用 'npx' 运行 'playwright-mcp' 命令，'-y' 参数用于自动确认执行。如果您希望指定版本，可以使用 '[email protected]' 的形式。

在 Cursor IDE 中添加 MCP 服务器的步骤:

打开 Cursor IDE。
点击左下角的设置图标 (⚙️) 。
选择 "Cursor settings"。
在设置界面中，找到 "MCP" 选项卡。
点击 "Add new MCP server" 按钮。
填写上述 JSON 配置信息，例如：
- Server Name: 'playwright-mcp'
- Command to run: 'npx -y playwright-mcp'
点击 "Add" 按钮保存配置。

基本使用方法

启动浏览器会话: 在 Cursor IDE 中，打开您想要编写或更新测试用例的文件。打开 Cursor AI 窗口 (通常使用 'Cmd + I' 或 'Ctrl + I' 快捷键)。输入提示语，例如 'Just open browser for me'，并确认运行工具。Playwright MCP Server 将启动一个新的浏览器窗口。
元素检查和交互录制: 在打开的浏览器窗口中，访问您要测试的网页。浏览器窗口旁边会出现一个工具栏。您可以使用工具栏上的按钮进行以下操作：
- Pick DOM (🎯): 点击后，在网页上选择元素，即可捕获元素的 HTML 结构。
- Pick Image (📸): 点击后，选择元素，可以截取元素的屏幕截图。
- Record Interactions (📋): 点击 "Start Recording" 开始录制用户交互。在网页上进行操作（如点击、输入），服务器会自动记录这些交互步骤和相关的元素选择器。点击 "Stop Recording" 结束录制。

生成测试代码: 返回 Cursor IDE，在 Chat 窗口中，您可以添加一些现有的测试文件作为上下文，并输入您的需求提示，例如：

## DON'T ASSUME ANYTHING. Whatever you write in code, it must be found in the context. Otherwise leave comments.

## Goal
Help me write playwright code with following functionalities:
- [[add semi-high level functionality you want here]]
- [[more]]
- [[more]]
- [[more]]

## Steps
- First fetch the context from 'get-context' tool, until it returns no elements remaining.
- Write required code in the POM format
- Validate all the selectors using 'validate-selectors' tool.

按下 Enter 键，等待 AI 助手根据上下文和您的需求生成 Playwright 测试代码。您可以根据需要审查和修改生成的代码。

关键词