Playwrightmcp Demo

🚀 🎭 Playwright 測試自動化框架

這是一個強大且數據驅動的測試自動化框架，使用 Playwright 和 TypeScript 構建。結合 @executeautomation/playwright-mcp-server，它實現了增強的測試錄製和播放功能。採用頁面對象模型（Page Object Model）設計模式，讓自動化測試具備可擴展性且易於維護。

L(7,14)M(0,7)L(14,7)'/%3E%3C/g%3E%3C/svg%3E)

🚀 快速開始

安裝依賴

npm install playwright @executeautomation/playwright-mcp-server typescript --save-dev

創建配置文件

創建 Playwright 配置文件（playwright.config.ts）。

啟動測試

npx playwright test

✨ 主要特性

• 強大且靈活：利用 Playwright 的多瀏覽器支持和強大的自動化能力。
• 數據驅動：通過測試數據實現高效的用例執行。
• 易於維護：採用頁面對象模型（Page Object Model）設計模式，提高代碼複用性和可維護性。
• 擴展性強：方便添加新的測試場景和功能。

📦 安裝指南

依賴安裝

npm install playwright @executeautomation/playwright-mcp-server typescript --save-dev

配置文件創建

創建 playwright.config.ts 文件用於配置 Playwright。

💻 使用示例

執行所有測試

npx playwright test

執行特定測試文件

npx playwright test tests/specs/registration.spec.ts

以有頭模式運行（顯示瀏覽器窗口）

npx playwright test --headed

添加新測試場景

在 tests/data/testData.ts 中添加新的測試數據：

{
  name: 'Your Scenario Name',
  login: {
    email: 'your.email@test.com'
  },
  registration: {
    firstName: 'First',
    lastName: 'Last',
    address: 'Address',
    email: 'email@test.com',
    phone: '1234567890',
    gender: 'Male' | 'Female',
    country: 'Country Name'
  }
}

新增的測試場景將自動執行。

📚 詳細文檔

框架結構

playwright-test-frame/
├── playwright.config.ts
├── tests/
│   ├── specs/
│   │   └── registration.spec.ts
│   └── data/
│       └── testData.ts
└── package.json

功能模塊

頁面對象

• BasePage：包含通用方法和工具。
• LoginPage：處理登錄功能。
• RegistrationPage：管理註冊表單交互。

數據管理

• TestData.ts：存儲測試場景數據。
• TestDataHelper：提供數據訪問和管理的方法。
• 接口定義：使用 TypeScript 接口定義數據結構，確保代碼一致性。

測試數據結構

interface LoginData {
  email: string;
  password?: string;
}

interface RegistrationData {
  firstName: string;
  lastName: string;
  address: string;
  email: string;
  phone: string;
  gender: 'Male' | 'Female';
  country: string;
}

interface TestData {
  name: string;
  login: LoginData;
  registration: RegistrationData;
}

🔧 技術細節

最佳實踐

• 保持頁面對象專注於特定功能。
• 將測試數據獨立於測試邏輯存儲。
• 使用有意義的場景名稱。
• 遵循 TypeScript 命名規範。
• 確保每個測試用例獨立且原子化。

貢獻指南

1. 為新特性創建新的分支。
2. 更新或添加測試和頁面對象。
3. 提交代碼併發起拉取請求。

依賴說明

• Playwright：測試框架。
• Execute Automation MCP Server：提供額外的擴展功能（可選）。
• TypeScript：用於定義接口和類型，確保代碼規範性。

通過以上配置和實踐，您可以輕鬆構建一個高效、靈活且易於維護的測試自動化框架。