AI导哈

AI驱动的Playwright自动化测试

通过集成Claude MCP和GitHub Copilot，实现智能化的自动化测试环境，动态生成测试用例和步骤定义。

  • by PaurushVishnoi
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 PaurushVishnoi/Playwright-MCP-Server

使用说明

基于AI的剧作家自动化工具

Claude MCP + GitHub Copilot 集成指南

🧠 概述

这个项目展示了如何整合 Claude Desktop（中文可译为“Claude桌面版”或保持原样，具体取决于语境和品牌偏好）， 剧作家MCP，以及 GitHub Copilot（代理模式）
创建一个智能、AI辅助的测试自动化环境，其中测试用例和步骤定义可以
动态生成——无需手动编写代码。

什么是MCP以及为什么要使用它？

这个（或“该”） 模型上下文协议（MCP） 是一个开放标准，允许您运行和连接 本地或定制的人工智能工具 （被称为 MCP服务器与您的大型语言模型（LLM）客户端一起——例如 ChatGPT， 克劳德或其他人工智能模型。

MCP 并不完全依赖云 API，而是允许您的 AI 直接与您的 自己的代码、数据和本地环境 — 安全且私密地。

🧠 表示“大脑”或“思考”，在中文中可直接翻译为“大脑”或根据上下文译为“思考”、“心智”等。 将MCP视为一座桥梁 在你的AI助手和本地工具、脚本或数据之间——使其能够 看见；见到， 跑，以及 使用 安全地管理您电脑上的资源。

MCP与常规LLM使用的区别

特性/特点 普通ChatGPT / 云端大型语言模型 MCP服务器设置
本地地 **在您的系统上 ** 数据访问
本地文件、API 或工具 ** ** 定制化
可定制的 **— 定义你自己的逻辑和工具 ** 延迟与隐私
隐私与速度 ** ** 整合

系统集成

| 为什么MCP服务器很有用 这个（或：该）

  • MCP服务器 该架构为您的大型语言模型（LLM）提供了强大、本地且安全的扩展功能：
  • 本地控制 – 您可以决定模型能够访问或执行的确切内容——无需依赖云端。
  • 自定义工具 – 将你自己的API、数据库或脚本作为可调用的“工具”暴露出来 已准备好自动化– 让你的大型语言模型（LLM）
  • 做事 ，不仅仅是聊天——比如运行 Playwright 测试或管理文件。 开发者友好 – 非常适合将AI融入 本地开发环境或者

持续集成/持续交付（CI/CD）流水线

。 💻 本地运行 当你运行一个 MCP 服务器（例如，诸如 Playwright MCP 服务器)，它运作着

直接在您的系统上

  • 。 **这意味着：**它可以与您的（设备/系统/应用等，具体根据上下文确定）进行交互
  • 本地环境、文件和已安装的工具
  • . 您的计算机不会泄露任何敏感数据——所有数据均保留在本地。 你有

完全控制

  1. 关于人工智能能做什么和不能做什么。
  2. 📋 目录
  3. 概述
  4. 先决条件
  5. 安装
  6. 配置
  7. 测试MCP服务器
  8. 执行项目
  9. 使用GitHub Copilot Agent
  10. 示例提示

故障排除

结论

Copilot 聊天

Claude Desktop（可译为“Claude桌面版”或根据上下文简化为“Claude桌面”）

git clone https://github.com/PaurushVishnoi/Playwright-MCP-Server.git

🧩 安装

1️⃣ 克隆仓库

UI_baseURL=https://sauce
exmox_USERNAME=standard_user
exmox_PASSWORD=secret_sauce

2️⃣ 创建一个 .env 文件

在根目录下创建一个 .env 文件，内容如下：

  1. 🔧 配置

    • ⚙️ 配置Playwright的Claude Desktop MCP服务器 打开Claude桌面设置
    • 首选 claude_desktop_config.json 设置 → 开发者 → 编辑配置

  2. 这会打开文件：

    {
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

  3. （它可能为空）

  4. 粘贴以下配置：

保存文件并重启Claude桌面程序

重启后，您应该会在Claude Desktop中自动看到Playwright工具出现

  1. 🧪 测试MCP服务器 **要确认您的Playwright MCP设置是否正常工作，请按照以下步骤操作：**打开

  2. Claude 桌面版

    .
    在聊天中，运行以下提示：

  3. 提示： “导航至网站 https://www.saucedemo.com/” 几秒钟后，你应该会看到一个

    Playwright 浏览器窗口 自动打开并导航到给定的URL。
    ✅ https://www.saucedemo.com/ 预期结果：

    该网站 在 Playwright 浏览器中成功加载。
    🎉 恭喜！ 你的

MCP服务器 处于活跃状态且功能完备。
💾 表示“硬盘驱动器”或“存储设备”。 注： 如果你还没有的话，一定要确保claude_desktop_config.json保存
您的配置文件（ **）**并且
重启Claude桌面版 。 重启后，您现在应该能看到

剧作家工具

自动出现在Claude桌面中。

  • ▶️ 运行项目 在运行测试之前，请确保已安装以下内容：
  • ✅ Node.js
  • ✅ 剧作家 ✅ GitHub Copilot （与

Copilot 聊天

（已启用）

npm install

🧱 安装依赖项

在您的项目目录中运行以下命令：

这将安装你在 package.json 中列出的所有必需依赖项。

  1. 使用GitHub Copilot Agent 1️⃣ 打开Copilot代理 开放 **Copilot Chat（可译为“副驾驶聊天”或根据上下文简化为“聊天助手”，但“Copilot”一词在科技领域常指辅助操作的智能助手，因此“Copilot聊天功能”或“Copilot对话”也是可接受的译法）**在
  2. VS Code **。**切换到
  1. 代理模式 。 你会注意到

“MCP 服务器：Playwright”

已经配置好了。 💡 为何它能自动工作 这个（或：该） GitHub Copilot Agent（可译为“GitHub Copilot 代理”） 智能检测现有（情况/设备/问题等，具体根据上下文确定）
Claude MCP 配置

在你的系统上

并且自动导入它们——因此您无需手动重新配置任何内容。

💬 示例提示
🧩 1. 更新基础URL

提示：

“你是Playwright测试自动化专家。请将我的baseUrl值更新为https://saucedemo.com/。”

✅ Copilot 会自动更新您配置中的基础 URL。
🧪 2. 生成测试场景

提示：

“作为用户，我想测试这样一个功能：当我将商品添加到购物车时，该商品应该在购物车中可见。 e2e.feature 在e2e.feature文件中添加测试场景，并在这些场景上添加@cart标签

✅ Copilot 在您的（环境中）生成测试场景

文件自动添加标签@购物车。
⚙️ 3. 自动化场景
提示：
“验证单个产品可以添加到购物车。

你能把第一个场景自动化吗？ 忽略已经创建的步骤定义的重写。使用login.js继续操作。” ✅ Copilot 自动编写 步骤定义 和 测试代码 加上适当的

Playwright 选择器 — 全部无需手动编写脚本！
💬
提示：

你可以尝试使用更多提示，比如“生成负面测试用例”或“优化现有测试步骤以加快执行速度”

Copilot Agent 与 Claude MCP 协同工作，智能理解您的自动化上下文。 🧯 故障排除 | 🧩 问题 | ⚙️ 原因 | 💡 解决方案 | |-----------|-----------|-------------| | claude_desktop_config.json MCP服务器在Claude桌面端不可见 | JSON配置问题 | 请重新检查您的 检查语法错误文件并重启 Claude Desktop。 | | MCP 未在 Copilot Agent 中加载 | 克劳德（Claude）与VS Code之间同步丢失 | 重启 VS Code（Visual Studio Code） 并确保 Claude Desktop（中文可译为“克劳德桌面版”或根据具体语境简化为“克劳德桌面”） 正在后台运行。 | | .env .env 变量未加载 | 文件放置错误 | 请确保 文件位于

相关 MCP