Playwright MCP Server

关键词

浏览器自动化Playwright测试自动化AI助手Web测试

使用说明

项目简介

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 选择器的有效性，确保生成的测试代码能够准确地定位到目标元素。

安装步骤

  1. 安装 Node.js: 确保您的系统中已安装 Node.js 运行环境。您可以从 Node.js 官网 下载并安装。

  2. 安装 Playwright: Playwright MCP Server 依赖 Playwright 库进行浏览器操作。如果尚未安装，请运行以下命令进行安装：

    npm install playwright

    或者

    yarn add playwright

    安装 Playwright 时，会自动下载 Chromium 浏览器。

  3. 安装 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 服务器的步骤:

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

基本使用方法

  1. 启动浏览器会话: 在 Cursor IDE 中，打开您想要编写或更新测试用例的文件。打开 Cursor AI 窗口 (通常使用 'Cmd + I' 或 'Ctrl + I' 快捷键)。输入提示语，例如 'Just open browser for me'，并确认运行工具。Playwright MCP Server 将启动一个新的浏览器窗口。

  2. 元素检查和交互录制: 在打开的浏览器窗口中，访问您要测试的网页。浏览器窗口旁边会出现一个工具栏。您可以使用工具栏上的按钮进行以下操作：

    • Pick DOM (🎯): 点击后，在网页上选择元素，即可捕获元素的 HTML 结构。
    • Pick Image (📸): 点击后，选择元素，可以截取元素的屏幕截图。
    • Record Interactions (📋): 点击 "Start Recording" 开始录制用户交互。在网页上进行操作（如点击、输入），服务器会自动记录这些交互步骤和相关的元素选择器。点击 "Stop Recording" 结束录制。

  3. 生成测试代码: 返回 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 测试代码。您可以根据需要审查和修改生成的代码。

服务器信息

访问项目