项目简介

Playwright AI自动化集成项目是一个强大的工具，它允许用户通过自然语言描述来自动化浏览器操作并生成Playwright测试代码。其核心是基于Model Context Protocol (MCP) 实现的服务器，该服务器负责托管并执行一系列浏览器自动化工具，从而将AI的指令转化为实际的网页交互行为。

主要功能点

AI驱动的测试生成：用户只需用自然语言描述所需测试场景，AI即可自动生成有效的Playwright测试代码。
浏览器自动化：通过MCP服务器实时控制浏览器（如Chromium），执行导航、点击、填写表单、截图等操作。
富文本页面检查：能够智能检查网页上的表单、输入框、按钮等元素，辅助AI生成准确的交互指令。
WebSocket实时反馈：在浏览器执行操作时，提供实时进展更新。
灵活配置：支持无头（headless）和有头（headed）浏览器模式，适应不同测试需求。

该MCP服务器提供以下主要工具：

'launch_browser'：启动新的浏览器实例。
'navigate_to'：导航到指定URL。
'click_element'：通过CSS选择器点击元素。
'fill_input'：向输入框填写文本。
'wait_for_element'：等待指定元素出现。
'take_screenshot'：截取当前页面截图。
'get_page_content'：获取当前页面内容（标题、URL、HTML长度）。
'github_search'：专为GitHub设计的搜索功能。
'inspect_page'：检查页面元素结构（如表单、输入）。
'generate_test'：根据已执行的操作生成Playwright测试代码。
'close_browser'：关闭浏览器实例。

安装步骤

克隆仓库并进入目录：

git clone https://github.com/chrisminnick/playwright-ai-integration.git
cd playwright-ai-integration

安装依赖：
```
npm install
```

安装Playwright浏览器：

npm run install-browsers

配置环境变量：复制 '.env.example' 文件为 '.env'，然后编辑 '.env'，填入您的OpenAI API Key。

cp .env.example .env
# 编辑 .env 文件，添加您的 OpenAI API Key
# OPENAI_API_KEY=您的OpenAIAPI密钥

服务器配置（供MCP客户端连接）

本项目的MCP服务器是 'src/mcp-server.js' 文件，它可以通过Node.js作为子进程启动，并通过标准输入/输出（stdio）与客户端通信。 MCP客户端（例如，一个LLM应用或另一个MCP集成服务）需要以下配置信息来连接和启动此Playwright MCP服务器：

{
  "serverName": "playwright-automation-server",
  "command": "node",
  "args": ["src/mcp-server.js"],
  "transport": "stdio",
  "description": "基于Playwright的MCP浏览器自动化服务，提供工具用于网页操作和测试生成。AI客户端可以通过JSON-RPC调用其工具API。",
  "notes": "此配置信息用于MCP客户端连接和启动Playwright AI集成服务。请确保在项目根目录（即包含src/mcp-server.js的父目录）执行该命令，或调整'args'中的路径为绝对路径以确保服务器脚本能被正确找到。"
}

配置说明：

'serverName': MCP服务器的唯一标识符，用于客户端识别。
'command': 启动MCP服务器进程的命令。在此项目中，即为 'node'。
'args': 传递给 'command' 的参数列表。'src/mcp-server.js' 是实际的服务器实现文件。
'transport': 服务器与客户端通信的协议类型，这里使用 'stdio'（标准输入/输出）。
'description' 和 'notes': 额外说明，帮助客户端理解服务功能和连接注意事项。

基本使用方法

启动主服务器（此服务器包含了一个Web界面，并会在内部启动MCP服务器）：
```
npm start
```

在浏览器中打开：

http://localhost:3000

在Web界面中操作：
- 点击 "Start Session" 初始化MCP服务器。
- 在输入框中输入自然语言提示，例如：
  - "Go to google.com and search for playwright testing"
  - "Navigate to github.com, click on the search box, and search for microsoft/playwright"
  - "Open example.com and take a screenshot of the page"
- 观察浏览器自动执行操作，并查看实时反馈及生成的Playwright测试代码。

关键词

项目简介

主要功能点

安装步骤

服务器配置（供MCP客户端连接）

基本使用方法

信息