Ai Driven Test Automation With Playwright Cursor MCP Server

🚀 Playwright 測試框架項目

本項目運用 Playwright 開展 Zeigo 網絡儀表盤的端到端（E2E）測試，涵蓋 UI 測試與 API 測試，為現代 Web 應用的測試提供了可靠保障。

🚀 快速開始

先決條件

1. Node.js：需安裝 Node.js v20 或更高版本。
2. 環境設置：創建一個 .env 文件，包含以下配置：

# 基礎 URL
API_BASE_URL=https://your-api-url
UI_BASE_URL=https://your-ui-url

安裝與配置

1. 安裝 Playwright 和依賴項：

npm install
npx playwright install
npm install dotenv

2. 安裝 VS Code Playwright 插件：

code --install-extension ms-playwright.playwright

3. 運行測試

測試執行選項

• UI 測試：通過 npm run test:ui 執行 UI 測試。
• API 測試：通過 npm run test:api 執行 API 測試。
• 調試：使用 Playwright 調試工具進行調試。

✨ 主要特性

Playwright 為現代 Web 應用提供了可靠的端到端測試功能，其特點包括：

• 支持多瀏覽器測試
• 支持跨平臺測試
• 支持多種語言（TypeScript、JavaScript、Python、.NET、Java）
• 移動網頁測試支持
• 並行測試執行
• 內置調試工具

📚 詳細文檔

文檔資源

• Playwright 官方文檔
• 運行測試指南

項目結構

• .vscode/：工作區特定設置。
• ui-tests/specs/：UI 測試規範文件。
• api-tests/specs/：API 測試規範文件。
• pages/：頁面對象模型（POM）文件。
• utils/：工具函數或幫助程序。
• .env：環境變量文件。
• .gitignore：版本控制要排除的文件。

💻 使用示例

基礎用法

按照上述快速入門步驟，即可使用 Playwright 進行基本的 UI 和 API 測試。

高級用法

創建自定義斷言

// custom-assertions.ts
export async function customAssertion(page: Page, expectedText: string) {
  await page.waitForSelector('text=Hello World');
}

使用數據驅動測試

import { defineScenario } from 'playwright-cucumber';

defineScenario('數據驅動測試', ({ Given, When, Then }) => {
  Given('用戶輸入 {string} 和 {string}', async function (username, password) {
    // 測試步驟
  });
});

並行執行測試

npm run test --parallel=4

🔧 技術細節

兩個 MCP 服務器的使用說明

Playwright 的調試命令

playwright codegen https://example.com

關閉正在運行的 Playwright 服務

pkill -f "node playwright"

使用 Playwright 攔截 API 請求

page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().includes('api')) {
    request.respond({
      status: 200,
      body: JSON.stringify({ message: '測試響應' })
    });
  }
});

Playwright 的網絡記錄功能

playwright dev --trace-dir traces

如何同時運行兩個 MCP 服務器

1. 打開兩個終端窗口。
2. 在第一個終端中，啟動 Context7 MCP 服務器：

npx -y @upstash/context7-mcp@latest

3. 在第二個終端中，啟動 Playwright MCP 服務器：

npx playwright-mcp

注意事項

⚠️ 重要提示

• 同一終端：不能同時運行兩個 MCP 服務器，因為每個服務器都會佔用終端的輸入/輸出。
• 不同終端：可以分別在兩個終端中運行這兩個服務器。