AI导哈

Playwright自动化测试工具

一个集成Playwright MCP服务器和Next.js应用的自动化测试工具，支持AI生成测试脚本并执行浏览器自动化。

  • by rengarajkamatchinathan
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 rengarajkamatchinathan/mcp-playwright

使用说明

🚀 剧作家MCP+Next.js自动化设置

本指南解释了如何设置 剧作家MCP服务器 并将其与 Next.js自动化应用.

📦 步骤1：设置Playwright MCP服务器

cd playwright

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install chromium

# Build the MCP server
npm run build

# Verify the build output
dir build
# ✔️ Ensure build/index.js exists

⚛️ 步骤2：设置Next.js自动化应用程序

cd ..
cd playwright-automation

# Install project dependencies
npm install

# Install required assistant/MCP packages
npm install @modelcontextprotocol/sdk @google/generative-ai lucide-react

# Install Playwright (browser binaries required here too)
npm install playwright
npx playwright install chromium

🔐 环境变量

创建一个 .env 文件在 /剧作家自动化:

GEMINI_API_KEY=AIzaSyA3qxfluocLwWj_iLhKtxV3OyRcS_ldPI

📁 文件夹结构

root/
 ├── playwright/                 # MCP server
 │    ├── src/
 │    ├── build/                 # Generated after build
 │    └── package.json
 └── playwright-automation/      # Next.js app with MCP integration
      ├── pages/
      ├── components/
      └── package.json

▶️ 运行系统

2.️⃣ 启动Next.js应用程序

cd playwright-automation
npm run dev

🧩 万物如何连接

  • 剧作家MCP服务器 提供一个可以运行Playwright脚本的MCP工具。

  • Next.js应用程序（剧作家自动化）

    • 向MCP服务器发送命令
    • 使用Gemini/OpenAI生成测试脚本
    • 通过MCP工具执行浏览器自动化

这将创建一个完整的 AI → MCP → 剧作家 工作流程。

相关 MCP