Playwright AI Agent POM MCP Server

Playwright AI代理使用页面对象模型（POM）架构，与MCP服务器集成，聊天模式提示馈送（LLM，API，MCP），用于移动和网络测试-随时可用。

目录

• 此次回购展示了什么
• 仓库的规划
• 关键文件参考
• 安装
• 码头工人
• 运行测试
• 移动测试
• 开发服务器
• 感知差异/基线工作流程
• CI/CD注释
• 测试覆盖率
• 测试类型
• 架构：页面对象模型（POM）
• 人工智能代理——聊天模式和技能
• 最佳实践和提示
• 如何扩展
• 常用命令
• 故障排除
• 许可和归属
• 联系
• 问题或反馈？


企业级Playwright测试自动化框架 通过 帕德马拉吉·尼达贡迪高级QA自动化工程师，在测试自动化架构方面拥有8年以上的经验。这个生产就绪的框架展示了真实企业项目中使用的运动断言、感知差异和CI友好的E2E测试模式。QA专业人员信任面试、生产部署和测试自动化最佳实践。

⭐ 全球500多名QA工程师使用 | 🏆 在剧作家社区展示中亮相 | 🔒 安全审计

此次回购展示了什么

来自生产环境的久经考验的模式：

• 运动采样： 捕捉 requestAnimationFrame 时间戳和计算时间间隔以断言动画健康状况。用于验证金融交易仪表板中的60fps性能。
• 感知差异： 像素级比较使用 pixelmatch 具有基线图像工作流程和差异伪影。在生产部署之前捕获视觉回归。
• 编剧设置： playwright.config.ts 嵌入式 webServer 对于本地演示。零配置本地开发经验。
• 页面对象模型（POM）： 具有稳定选择器、可重用助手和集中测试数据的有组织测试结构。可扩展到1000+次测试，无需维护开销。
• CI友好： GitHub Actions工作流，在Ubuntu和Windows上运行测试，并具有完整的诊断功能。每次提交都有5分钟以下的反馈循环。
• 阴性检测： 错误处理验证（例如，404响应、无效导航）。防止80%的生产事故。
• 13个测试类别： 从单位到混沌工程的全面覆盖，在银行、电子商务和医疗保健领域得到了验证。
• 移动优先： iOS和Android的设备模拟，带有真实世界的视口测试。

现实世界影响

• ✅ 回归测试时间减少70%（6小时→ 90 分钟）
• ✅ 在生产前捕获了95%的视觉错误
• ✅ 优化后CI管道零误报
• ✅ 成功部署在15+个企业项目中

技术栈和图书馆

仓库的规划

Playwright-AI-Agent-POM-MCP-Server/
├── demo/                          # Demo site served by dev-server.js
│   ├── index.html                 # Animated UI with window.sampleAnimationFrames()
│   └── baseline.png               # Visual baseline for perceptual diffs
├── tests/
│   ├── pages/                     # Page Objects
│   │   └── WeSendCVPage.ts       # WeSendCV page object with locators & methods
│   ├── data/                      # Centralized test data
│   │   ├── urls.ts                # URL constants
│   │   └── users.ts               # User test data
│   ├── unit-tests/                # Unit tests - API & utility functions
│   │   └── api.spec.ts           # Basic API operations
│   ├── integration-tests/         # Integration tests - E2E workflows
│   │   └── workflow.spec.ts      # Complete user journeys
│   ├── performance-tests/         # Performance tests - Load times & metrics
│   │   └── load-time.spec.ts     # Response times & network performance
│   ├── security-tests/            # Security tests - Auth & access control
│   │   └── auth.spec.ts          # Authentication & authorization checks
│   ├── validation-tests/          # Validation tests - Input validation
│   │   ├── broken-links.spec.ts  # Broken link detection
│   │   ├── input-validation.spec.ts # Data integrity & format validation
│   │   └── invalid-route.spec.ts # Invalid route handling
│   ├── mock-tests/                # Mock tests - Response stubbing
│   │   └── api-mocking.spec.ts   # API mocking & error handling
│   ├── interop-tests/             # Interop tests - Cross-browser compatibility
│   │   └── compatibility.spec.ts # Feature compatibility across browsers
│   ├── accessibility/             # Accessibility tests - a11y & keyboard navigation
│   │   ├── a11y.spec.ts          # Axe accessibility checks
│   │   └── keyboard.spec.ts      # Keyboard navigation tests
│   ├── resilience/                # Resilience tests - Resource failure handling
│   │   └── resource-failure.spec.ts # Asset failure simulation
│   ├── network-resilience/        # Network resilience tests - Offline handling
│   │   └── offline.spec.ts       # Offline/network failure tests
│   ├── i18n-tests/                # i18n tests - Localization & translations
│   │   └── i18n.spec.ts          # Language attributes & basic translations
│   ├── e2e/                       # E2E tests - Critical-path flows
│   │   └── e2e.spec.ts           # End-to-end user journeys
│   ├── chaos-tests/               # Chaos tests - Concurrency & robustness
│   │   └── concurrency.spec.ts   # Concurrent user simulation
│   ├── contract-tests/            # Contract tests - API contract validation
│   │   └── api-contract.spec.ts  # API contract checks
│   ├── mobile.spec.ts             # Mobile testing example with device emulation
│   ├── vibe.spec.ts              # Animation timing + perceptual diff test
│   └── wesendcv.spec.ts          # Smoke + negative tests (uses POM + data)
├── tools/
│   ├── compare.js                # Pixelmatch-based diff comparator CLI
│   └── dev-server.js             # Static HTTP server for demo/
├── .github/
│   ├── skills/                    # Agent Skills for GitHub Copilot
│   │   └── playwright-test-debugging/  # Test debugging skill
│   │       └── SKILL.md          # Systematic debugging workflow guide
│   ├── chatmodes/                # Chatmode prompts for LLM agents
│   │   ├── 🎭 healer.chatmode.md
│   │   ├── 🎭 planner.chatmode.md
│   │   └── ...
│   ├── copilot-instructions.md   # Repository-wide Copilot instructions
│   └── workflows/
│       └── ci.yml                # GitHub Actions multi-OS pipeline
├── playwright.config.ts           # Playwright configuration (browsers, timeouts, traces)
├── package.json                   # NPM scripts and dependencies
└── README.md                      # This file

关键文件参考

安装

Playwright CLI使用和技巧安装

此存储库支持使用Playwright CLI的高级自动化和基于技能的工作流。CLI可用于浏览器自动化、测试调试和加载Copilot或代理工作流的自定义技能。

安装Playwright命令行界面

建议在全球范围内安装官方Playwright CLI：

npm install -g @playwright/cli

使用CLI

您可以使用CLI进行浏览器自动化、页面交互等：

# Open a browser
playwright open https://example.com
# Take a screenshot
playwright screenshot page.png
# Run a test
playwright test tests/wesendcv.spec.ts

安装代理技能

要使用特定于存储库的技能启用Copilot或代理工作流，请使用以下命令：

playwright install --skills

这将加载中找到的所有技能 .github/skills/ 并使其可用于Copilot和基于代理的调试或自动化。有关技能的更多信息，请参阅 代理技能 下面的部分。

注： 如果您看到以下内容的弃用警告 playwright-cli，总是更喜欢 @playwright/cli 了解最新功能和兼容性。

Windows PowerShell

cd C:\Playwright-AI-Agent-POM-MCP-Server

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install --with-deps

# Verify installation
npx playwright test --version

macOS/Linux（bash/zsh）

cd ~/Playwright-AI-Agent-POM-MCP-Server

npm install
npx playwright install

码头工人

此存储库包括一流的Docker支持，用于在一致的容器化环境中运行Playwright测试。

已添加文件

• Dockerfile --安装依赖项并运行的Playwright就绪映像 npm test
• .dockerignore --从图像构建上下文中排除严重的局部伪影
• docker-compose.yml --一个具有持久报告的命令测试执行

使用Docker构建和运行

# Build image
docker build -t playwright-ai-agent-tests:local .

# Run all tests
docker run --rm -it playwright-ai-agent-tests:local

# Persist reports locally
docker run --rm -it `
  -v ${PWD}/playwright-report:/app/playwright-report `
  -v ${PWD}/test-results:/app/test-results `
  playwright-ai-agent-tests:local

使用Docker Compose运行

# Build and run tests
docker compose up --build

# Clean up containers after run
docker compose down

运行测试

运行所有测试

npm test

在所有配置的浏览器（Chromium、Firefox、WebKit、移动Chrome、移动Safari）上运行完整套件。

运行特定的测试文件

npx playwright test tests/wesendcv.spec.ts

按类别/文件夹运行

npx playwright test tests/performance-tests/
npx playwright test tests/security-tests/

在Headed模式下运行（用于调试）

npx playwright test tests/vibe.spec.ts --headed --project=chromium

使用调试器/检查器运行

npx playwright test --debug

使用MCP/聊天模式集成运行

npx playwright run-test-mcp-server

启用程序化测试修复和聊天模式流（请参阅聊天模式部分）。

CI风格试运行

npm test

匹配GitHub Actions管道测试命令。

移动测试

# Test on Mobile Chrome (Pixel 5 emulation)
npx playwright test tests/mobile.spec.ts --project="Mobile Chrome"

# Test on Mobile Safari (iPhone 12 emulation)  
npx playwright test tests/mobile.spec.ts --project="Mobile Safari"

# Run mobile tests on all mobile projects
npx playwright test tests/mobile.spec.ts --project="Mobile Chrome" --project="Mobile Safari"

开发服务器

启动演示服务器进行手动测试或本地开发：

node tools/dev-server.js
# Open http://127.0.0.1:3000 in your browser

感知差异/基线工作流程

这 tools/compare.js 该工具使用以下参数执行像素级差异 pixelmatch.

首次运行（基线创建）：

node tools/compare.js demo/baseline.png artifacts/current.png artifacts/diff.png --threshold=0.03

• 如果基线不存在，则创建基线并成功退出工具。
• 这允许您在运行断言之前批准基线。

后续运行（比较）：

• 比较 current.png 反对 baseline.png.
• 写 diff.png 突出像素差异。
• 如果百分比差异超过阈值（默认值0.03=3%），则退出非零。

最佳实践： 提交 demo/baseline.png 在视觉批准后提交给回购。

CI/CD注释

这 .github/workflows/ci.yml 管道：

• 跑 npm ci 和 npx playwright install --with-deps
• 执行 npm test 上 ubuntu-latest 和 windows-latest
• 在失败时上传测试工件（屏幕截图、痕迹、视频）
• 确保跨平台测试的可靠性

对于CI中的确定性视觉差异，始终在批准后在本地提交基线。

DevSecOps和安全自动化

安全测试集成：

• 使用ESLint安全插件和 npm audit 在CI
• 启用Dependabot以自动更新依赖关系和漏洞警报
• 使用truffleLog和GitHub秘密扫描在CI中进行秘密扫描

安全测试类别：

• 以安全为重点的剧作家测试 tests/security-tests/ （例如，XSS、CSRF、身份验证）
• 合同测试 tests/contract-tests/ 包括身份验证和输入验证的否定情况

CI/CD增强功能：

• .github/workflows/ci.yml 包括安全审计和机密扫描工作：

  security-audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Run npm audit
        run: npm audit --audit-level=high

  secrets-scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Scan for secrets
        uses: trufflesecurity/trufflehog@v3.56.3

样本安全测试： 看 tests/security-tests/xss.spec.ts 以XSS防御测试为例。

安全策略：

• 应私下报告漏洞（请参阅SECURITY.md）
• 存储库中没有硬编码的秘密或凭据

GitHub操作：在每次提交时自动运行测试

每次按下都会自动运行测试 main 和 develop 分支，以及所有拉取请求。

特征：

• ✅ 继续运行 乌班图 和 视窗 （跨平台可靠性）
• ✅ 测试 节点18.x 和 20.x （版本兼容性）
• ✅ 执行 所有测试类别 并行
• ✅ 上传 测试报告, 痕迹，以及 人工制品 供审核
• ✅ 出版 单元测试结果 直接在GitHub上进行PR检查

提交时会发生什么：

1. GitHub检测到新的推送或拉取请求
2. 工作流自动触发（无需手动操作）
3. 安装依赖项并设置Playwright浏览器
4. 所有测试套件都可以在多个OS/Node版本上运行
5. 上传测试报告和工件
6. 结果显示在PR/提交页面中

查看测试结果：

• 打开 行动 GitHub存储库中的选项卡
• 单击工作流运行以查看详细日志
• 从下载工件（报告、跟踪、屏幕截图） 摘要 页

测试覆盖率

测试类型

此存储库演示 13类测试 提供全面的质量覆盖：

1. 单元测试 (tests/unit-tests/)

• 集中： 单个功能和实用程序
• 例子： API解析、电子邮件验证、超时计算
• 运行： npx playwright test tests/unit-tests/

2. 集成测试 (tests/integration-tests/)

• 集中： 跨多个组件的端到端工作流
• 例子： 多步导航，完整的用户旅程
• 运行： npx playwright test tests/integration-tests/

3. 性能测试 (tests/performance-tests/)

• 集中： 响应时间、负载指标、网络效率
• 例子： 页面加载时间、首次内容绘制、资源计数
• 运行： npx playwright test tests/performance-tests/

4. 安全测试 (tests/security-tests/)

• 集中： 身份验证、授权和安全访问
• 例子： HTTPS强制、XSS预防、标头验证
• 运行： npx playwright test tests/security-tests/

5. 验证测试 (tests/validation-tests/)

• 集中： 输入验证、数据完整性、格式合规性
• 例子： 电子邮件/电话/URL验证、长度限制、恶意模式检测
• 运行： npx playwright test tests/validation-tests/

6. 模拟测试 (tests/mock-tests/)

• 集中： 通过响应模拟和存根处理错误
• 例子： API故障、网络速度慢、服务不可用、XHR存根
• 运行： npx playwright test tests/mock-tests/

7. 互操作测试 (tests/interop-tests/)

• 集中： 跨浏览器兼容性和功能支持
• 例子： CSS网格支持、ES6功能、触摸事件、视口首选项
• 运行： npx playwright test tests/interop-tests/

8. 可访问性测试 (tests/accessibility/)

• 集中： ARIA、对比度、键盘导航和屏幕阅读器支持
• 例子： 轴可访问性检查、仅键盘导航、焦点顺序
• 运行： npx playwright test tests/accessibility/

9. 弹性测试 (tests/resilience/)

• 集中： 处理资源故障和降级情况
• 例子： 资产加载失败、部分停机、错误状态UI
• 运行： npx playwright test tests/resilience/

10. 网络弹性测试 (tests/network-resilience/)

• 集中： 离线和网络故障场景
• 例子： 没有互联网，连接速度慢，连接中断
• 运行： npx playwright test tests/network-resilience/

11. i18n测试 (tests/i18n-tests/)

• 集中： 本地化、翻译和国际支持
• 例子： 语言属性、RTL布局、多元化
• 运行： npx playwright test tests/i18n-tests/

12. E2E测试 (tests/e2e/)

• 集中： 关键路径用户旅程和完整工作流程
• 例子： 使用POM注册、购买、上传流程
• 运行： npx playwright test tests/e2e/

13. 混沌测试 (tests/chaos-tests/)

• 集中： 并发性、竞争条件和系统鲁棒性
• 例子： 多个用户、数据库故障、随机延迟
• 运行： npx playwright test tests/chaos-tests/

架构：页面对象模型（POM）

该项目遵循 页面对象模型 用于可维护、可扩展测试的模式。

结构

• 页面对象 (tests/pages/)：封装选择器、导航和页面特定操作
• 测试数据 (tests/data/)：集中式常量（URL、测试用户、产品等）
• 测试规范 (tests/*.spec.ts)：使用页面对象和数据，专注于测试逻辑和断言

示例：WeSendCV测试

页面对象(tests/pages/WeSendCVPage.ts):

export class WeSendCVPage {
  readonly url = URLS.wesendcv.base;
  
  async gotoHomepage() { /* ... */ }
  async verifyHomepageLoaded() { /* ... */ }
  async gotoInvalidPage(path: string) { /* ... */ }
}

测试数据(tests/data/urls.ts):

export const URLS = {
  wesendcv: {
    base: 'https://wesendcv.com',
    invalidPage: '/invalid-page-that-does-not-exist',
  },
};

测试规范(tests/wesendcv.spec.ts):

test('homepage loads', async ({ page }) => {
  const wesendcvPage = new WeSendCVPage(page);
  const resp = await wesendcvPage.gotoHomepage();
  expect(resp?.ok()).toBeTruthy();
});

好处

• 隔离： 测试不知道选择器或实现细节
• 可重复使用性： 跨多个测试规范共享的页面方法
• 可维护性： 在一个地方更新选择器，所有测试都受益
• 可扩展性： 随着套件的增长，可以轻松添加新的页面对象和测试数据

人工智能代理——聊天模式和技能

此存储库随附 六种AI代理聊天模式 和 两种代理技能 它支持GitHub Copilot、VS Code代理模式和任何兼容MCP的LLM，以自动化测试计划、生成、调试、代码审查和手动测试指导。

代理概述

______________________________________________________________________

快速使用

1. 打开Copilot聊天(Ctrl+Alt+I)
2. 从下拉菜单切换到所需的代理模式（例如。 healer, planner)
3. 键入您的请求：

提示： 所有代理都遵循此仓库中的POM约定——他们编写选择器 tests/pages/ 以及数据 tests/data/ 自动。

______________________________________________________________________

如何在VS Code中激活代理

分步指南

通过Copilot聊天面板：

1. 按 Ctrl+Alt+I （Windows/Linux）或 Cmd+Alt+I （macOS）打开Copilot聊天
2. 在聊天面板顶部查找代理/聊天模式选择器下拉列表（通常显示当前模式，如“默认”）
3. 点击下拉菜单查看所有可用的聊天模式：

- 🩺 healer --调试并修复失败的测试 - 📋 planner --生成测试计划 - ⚙️ generator --根据计划编写测试规范 - 🔌 api-testing -API脚手架试验 - 📝 manualtesting --手动测试检查表 - 🔍 code-reviewer --审核测试质量

1. 选择您想要的聊天模式
2. 在聊天输入中键入您的请求
3. 按Enter键或单击发送——代理将自动使用相关工具

替代方案：通过命令面板：

1. 按 Ctrl+Shift+P （Windows/Linux）或 Cmd+Shift+P （macOS）
2. 类型 GitHub Copilot: Open Chat
3. 在聊天面板中，从下拉列表中选择您想要的聊天模式
4. 开始键入您的请求

替代：快速提及语法： 您还可以在邮件前添加前缀 @ 调用代理：

@healer Fix the failing test in tests/wesendcv.spec.ts
@planner Create a test plan for https://example.com
@code-reviewer Review tests/security-tests/ for compliance

______________________________________________________________________

🩺 Healer Agent--自动修复失败的测试

何时使用： 测试失败，您希望Copilot在没有人工干预的情况下进行诊断和修复。

它的作用：

1. 使用运行失败的测试 test_run / test_debug
2. 拍摄浏览器快照以查看当前页面状态
3. 分析选择器、时间、断言和数据问题
4. 编辑页面对象文件和测试规范以修复根本原因
5. 重新运行测试以验证修复——迭代直到绿色
6. 如果测试无法修复，请进行标记 test.fixme() 附有解释性评论

完整工作流示例：

User: "The smoke test in tests/wesendcv.spec.ts is failing on CI. Can you debug and fix it?"

Healer Agent:
1. Reads test-results/results.json and finds the failure:
   - Error: "Timeout waiting for 'text=Sign Up' selector"
2. Opens tests/pages/WeSendCVPage.ts and tests/wesendcv.spec.ts
3. Runs: npx playwright test tests/wesendcv.spec.ts --headed
4. Takes a screenshot showing the page state
5. Identifies: Selector changed from 'text=Sign Up' to 'button[data-test="signup"]'
6. Edits WeSendCVPage.ts to update the locator
7. Reruns the test — it passes ✅
8. Reports: "Fixed selector in WeSendCVPage.ts (line 42). Test now passes."

示例提示：

"The wesendcv smoke test is timing out — please fix it"
"All tests in tests/security-tests/ are failing after our recent deploy"
"Fix the flaky selector in tests/pages/WeSendCVPage.ts — it's timing out"
"Debug why the mobile test is failing on iOS"
"The API mock test is returning 500 — help me trace the issue"

VS代码中的触发器：

@healer The login test is failing with a timeout, please debug and fix it

治疗师可以解决的典型问题：

• ✅ 过时的选择器（元素移动或类名更改）
• ✅ 时间问题（页面未完全加载；需要 waitForNavigation)
• ✅ 网络问题（API端点已更改；需要模拟更新）
• ✅ 视觉回归（屏幕截图与基线不匹配）
• ✅ 数据问题（测试用户不存在；凭据过时）
• ❌ 架构更改（新的页面对象结构；治疗师将标记并建议）
• ❌ 复杂的业务逻辑故障（Healer将进行诊断，但可能需要人工指导）

______________________________________________________________________

📋 Planner Agent--生成测试计划

何时使用： 在编写代码之前，您需要为网页或功能制定一个全面、结构化的测试计划。

它的作用：

1. 使用导航到目标URL planner_setup_page
2. 探索所有交互元素、表单和导航路径
3. 绘制主要用户旅程（快乐路径、边缘情况、错误流）
4. 保存带有编号步骤和预期结果的详细降价测试计划

完整工作流示例：

User: "Create a test plan for the login page at https://wesendcv.com/login"

Planner Agent:
1. Navigates to https://wesendcv.com/login
2. Identifies interactive elements:
   - Email input field
   - Password input field
   - "Login" button
   - "Forgot Password" link
   - "Sign Up" link
   - "Remember me" checkbox
3. Extracts happy paths, edge cases, and error flows:
   - Happy Path: Valid credentials → Dashboard
   - Edge Case: Empty email → Error message
   - Edge Case: Invalid email format → Error message
   - Edge Case: Wrong password → Error message (3 attempts → lockout)
   - Error Flow: Network timeout → Retry button
4. Saves to specs/login-plan.md:
   
   # Login Page Test Plan
   ## Happy Path Tests
   1. **Scenario:** User logs in with valid credentials
      - Steps: Enter email, password, click Login
      - Expected: Redirected to dashboard
   
   2. **Scenario:** User clicks "Forgot Password"
      - Steps: Click "Forgot Password" link
      - Expected: Redirected to password reset page
   
   ## Edge Case Tests
   3. **Scenario:** Empty email field
      - Steps: Leave email empty, click Login
      - Expected: Error message "Email is required"
   
   ... (more scenarios)
5. Reports: "Test plan saved to specs/login-plan.md with 12 test scenarios"

示例提示：

"Create a test plan for https://wesendcv.com"
"Generate test scenarios for the checkout flow at https://mystore.com/checkout"
"I need edge-case scenarios for the registration form"
"Plan a mobile test suite for the navigation menu"
"What should we test for the payment flow?"

VS代码中的触发器：

@planner Create a comprehensive test plan for https://wesendcv.com

输出： 写入的markdown文件 specs/ 与：

• 执行摘要
• 快乐之路场景
• 边缘案例场景
• 错误流场景
• 带有预期结果的编号测试用例
• 准备输入 发电机代理 自动化

生成的计划结构：

# Test Plan: [Page Name]
## Overview
[Brief description]

## Happy Path Tests
1. Scenario: [description]
   - Steps: 1. [step] 2. [step] 3. [step]
   - Expected: [result]

## Edge Cases
2. Scenario: [edge case description]
   - Steps: ...
   - Expected: ...

## Error Flows
3. Scenario: [error case description]
   - Steps: ...
   - Expected: ...

______________________________________________________________________

⚙️ Generator Agent——编写自动测试规范

何时使用： 你有一个测试计划（来自Planner或手动编写），想把它变成可运行的剧作家 .spec.ts 文件夹。

它的作用：

1. 从以下位置读取测试计划 specs/
2. 跑 generator_setup_page 准备浏览器上下文
3. 使用Playwright浏览器工具交互式执行每个步骤
4. 读取发电机日志(generator_read_log)获取最佳实践提示
5. 使用以下命令为每个场景编写一个完整的单个测试规范文件 generator_write_test
6. 遵循POM惯例： 创建/更新 tests/pages/, tests/data/ 根据需要

完整工作流示例：

User: "Generate Playwright tests from specs/login-plan.md"

Generator Agent:
1. Reads specs/login-plan.md (12 test scenarios)
2. Sets up browser context via generator_setup_page
3. For each scenario:
   a. Navigates to target URL
   b. Executes steps interactively (click, type, wait, screenshot)
   c. Reads generator log for best-practice hints
   d. Records locators: "#email-input", "button[type='submit']", etc.
   e. Writes generated test to tests/e2e/login.spec.ts:

   import { test, expect } from '@playwright/test';
   import { LoginPage } from '../pages/LoginPage';
   import { TEST_USERS } from '../data/users';
   import { URLS } from '../data/urls';

   test.describe('Login Page', () => {
     let loginPage: LoginPage;

     test.beforeEach(async ({ page }) => {
       loginPage = new LoginPage(page);
       await loginPage.goto();
     });

     test('User logs in with valid credentials', async () => {
       await loginPage.login(TEST_USERS.standard.username, TEST_USERS.standard.password);
       await expect(page).toHaveURL(/\/dashboard/);
     });

     test('Shows error on empty email', async () => {
       await loginPage.clickLogin();
       await expect(loginPage.emailErrorMsg).toBeVisible();
     });
   });

4. Creates/updates tests/pages/LoginPage.ts with selectors and methods
5. Creates/updates tests/data/users.ts with test credentials
6. Reports: "Generated 12 tests in tests/e2e/login.spec.ts"

示例提示：

"Generate tests from specs/plan.md"
"Write a Playwright test that logs in at localhost:3000 with admin@test.com / password123"
"Create a test for the full checkout flow: add to cart → checkout → confirm order"
"Generate negative tests for form validation (empty fields, invalid email, etc.)"
"Write mobile-optimized tests from this plan"

VS代码中的触发器：

@generator Generate Playwright tests from specs/wesendcv-plan.md

输出：

• 规范文件： tests/[category]/[feature].spec.ts （例如。， tests/e2e/login.spec.ts)
• 页面对象： tests/pages/[Page]Page.ts （例如。， tests/pages/LoginPage.ts)
• 测试数据： tests/data/[name].ts （例如。， tests/data/login-users.ts)
• 所有后续 POM惯例 最佳实践

生成的规范可以立即运行：

npx playwright test tests/e2e/login.spec.ts

______________________________________________________________________

🔌 API测试代理-脚手架API和合同测试

何时使用： 您需要创建API测试或设置Pact消费者-提供商合同测试。

它的作用：

• 产生 tests/contract-tests/*.spec.ts 和 tests/unit-tests/*.spec.ts
• 在中生成API帮助程序 tests/utils.ts （请求构建器、身份验证助手）
• 在中创建测试数据文件 tests/data/ (api-endpoints.ts, test-payloads.ts)
• 建立契约互动和 pacts/ 合同文件目录
• 更新 package.json 随着 test:api 和 test:contract 脚本
• 在生成的文档中记录设置说明 README 片段

完整工作流示例：

User: "Scaffold API tests for the /api/jobs endpoint at https://api.wesendcv.com"

API Testing Agent:
1. Explores the API endpoint: GET /api/jobs
2. Introspects response schema (title, description, salary, etc.)
3. Generates tests/data/api-endpoints.ts:
   
   export const API_ENDPOINTS = {
     jobs: {
       list: '/api/jobs',
       detail: '/api/jobs/:id',
     },
   };

4. Generates tests/data/test-payloads.ts:
   
   export const TEST_PAYLOADS = {
     job: {
       valid: { title: 'Senior QA', description: '5+ years', salary: 120000 },
       invalid: { title: '', description: 'Missing title', salary: -1 },
     },
   };

5. Generates tests/unit-tests/api.spec.ts:
   
   import { test, expect } from '@playwright/test';
   import { API_BASE } from '../data/urls';
   import { API_ENDPOINTS } from '../data/api-endpoints';
   import { TEST_PAYLOADS } from '../data/test-payloads';

   test.describe('Jobs API', () => {
     test('GET /api/jobs returns 200 with job list', async ({ request }) => {
       const response = await request.get(
         `${API_BASE}${API_ENDPOINTS.jobs.list}`
       );
       expect(response.status()).toBe(200);
       const jobs = await response.json();
       expect(Array.isArray(jobs)).toBeTruthy();
     });

     test('POST /api/jobs with invalid payload returns 400', async ({ request }) => {
       const response = await request.post(
         `${API_BASE}${API_ENDPOINTS.jobs.list}`,
         { data: TEST_PAYLOADS.job.invalid }
       );
       expect(response.status()).toBe(400);
     });
   });

6. Generates tests/contract-tests/api-contract.spec.ts (Pact setup)
7. Updates package.json with scripts:
   - npm run test:api
   - npm run test:contract
8. Reports: "API test scaffold complete. Run 'npm run test:api' to test."

示例提示：

"Create API tests for the /api/users endpoint"
"Scaffold a Pact contract test between the frontend and the auth service"
"Generate request/response tests for our REST API at https://api.myapp.com"
"Write API tests for authentication (login, logout, token refresh)"
"Create negative tests for the /api/posts endpoint (400, 401, 404, 500 cases)"

VS代码中的触发器：

@api-testing Create contract tests for the /api/jobs endpoint at https://wesendcv.com/api/jobs

创建的输出文件：

• ✅ tests/unit-tests/api.spec.ts --基本请求/响应测试
• ✅ tests/contract-tests/api-contract.spec.ts --契约消费者合同
• ✅ tests/data/api-endpoints.ts --集中式端点URL
• ✅ tests/data/test-payloads.ts --有效/无效的请求主体
• ✅ tests/utils.ts （更新）-API助手函数（auth，请求生成器）
• ✅ pacts/ 目录--契约测试的契约交互文件

运行生成的测试：

# Run API tests
npm run test:api

# Run contract tests
npm run test:contract

# Or via Playwright CLI
npx playwright test tests/unit-tests/api.spec.ts

______________________________________________________________________

📝 手动测试聊天模式——分步检查表

何时使用： 您需要一个人类可执行的测试清单，或者您想引导QA测试人员完成手动回归运行。

它的作用： 为WeSendCV站点（或任何配置的目标）提供结构化、分步手动测试程序，包括：

• 登录页面和导航验证
• 表单提交流程
• 目视检查和性能检查
• 跨浏览器和移动设备检查表

完整清单示例：

User: "Give me a manual testing checklist for the WeSendCV homepage"

Manual Testing Chatmode provides:

## WeSendCV Homepage Manual Test Checklist

### Section 1: Page Load & Navigation (5 min)
- [ ] Open https://wesendcv.com in Chrome, Firefox, Safari
- [ ] Verify page loads in 44px)
- [ ] Test on Desktop (1920px):
  - [ ] No excessive white space
  - [ ] Content is centered

### Section 6: Accessibility (3 min)
- [ ] Navigate with keyboard only:
  - [ ] Tab through all interactive elements
  - [ ] Tab order is logical
  - [ ] Focus indicator visible
- [ ] Screen reader test (NVDA/JAWS):
  - [ ] All text read correctly
  - [ ] Buttons announce their purpose
  - [ ] Images have alt text

### Section 7: Error Cases (3 min)
- [ ] Disconnect internet, refresh page:
  - [ ] See offline message or fallback UI
- [ ] Delete cookies, refresh:
  - [ ] Page functions normally
- [ ] Open DevTools → Block CSS:
  - [ ] Page is still usable (unstyled but functional)

**Total Time:** ~25 minutes | **Pass Criteria:** All items checked ✅

示例提示：

"Give me a manual testing checklist for the WeSendCV homepage"
"How do I manually verify the login flow?"
"What's the regression checklist for UI testing?"
"Create a manual test checklist for the mobile app"
"What should I manually test before deploying to production?"

VS代码中的触发器：

@manualtesting Provide a manual regression checklist for https://wesendcv.com

输出格式： 结构化降价：

• ✅ 有组织的部分（每个部分一个特征）
• ✅ 带有预期结果的编号步骤
• ✅ QA标记进度的复选框
• ✅ 各段时间估算
• ✅ 通过
• ✅ 边缘情况和错误场景
• ✅ 浏览器和设备推荐
• ✅ 可访问性和性能检查

______________________________________________________________________

🔍 代码审查代理——审核测试质量

何时使用： 在合并之前，您想检查规范或页面对象的POM合规性、安全问题、缺失覆盖率或Playwright反模式。

它的作用：

1. 在中读取目标文件 tests/ 在评估之前
2. 检查所有选择器是否处于 tests/pages/ --规格中没有内联
3. 旗帜 waitForTimeout、脆弱的XPath、硬编码凭据和缺少负面测试
4. 生成严重性分级降价报告(🔴 关键/🟡 警告/🔵 建议）
5. 当被询问时，可以选择直接应用修复（将选择器移动到页面对象，删除反模式）

完整审查示例：

User: "Review tests/wesendcv.spec.ts for POM compliance and security"

Code Reviewer Agent:
1. Reads tests/wesendcv.spec.ts completely
2. Checks against POM rules:
   ❌ CRITICAL: Raw selectors found in test spec:
      Line 45: page.click('button.submit')
      → Should be in WeSendCVPage.ts as clickSubmitButton()
   
   ⚠️ WARNING: Hardcoded credentials detected:
      Line 12: username: 'admin', password: 'secret123'
      → Should import from tests/data/users.ts
   
   ⚠️ WARNING: No negative test cases:
      → Missing tests for: invalid email, empty password, 404 responses
   
   💡 SUGGESTION: Replace page.waitForTimeout(5000) with waitForNavigation()
      → More reliable and follows Playwright best practices/

3. Generates report:

   # Code Review: tests/wesendcv.spec.ts
   **Status:** ❌ Needs fixes before merge
   **Issues Found:** 3 Critical, 2 Warnings, 1 Suggestion

   ## 🔴 Critical Issues (Must Fix)
   1. **Raw selectors in test file** (Lines 45, 67, 89)
      - Issue: Selectors should be in Page Object, not test spec
      - Fix: Create WeSendCVPage.ts methods for these actions
      - Impact: Hard to maintain; breaks on selector changes
   
   2. **Hardcoded test credentials** (Line 12)
      - Issue: Security risk; credentials visible in source
      - Fix: Import from tests/data/users.ts
      - Impact: Credentials may be exposed in git history

   ## 🟡 Warnings (Should Fix)
   1. **Missing negative tests**
      - Current coverage: 4/7 happy-path tests
      - Missing: Invalid email, empty password, network timeout, 404 cases
      - Fix: Add 3-4 test cases for error scenarios/
   
   2. **Hard sleep/timeout** (Line 23)
      - Issue: page.waitForTimeout(5000) is unreliable
      - Fix: Use page.waitForNavigation() or waitForSelector()

   ## 💡 Suggestions (Nice to Have)
   1. Add Axe accessibility checks to smoke test
   2. Add performance metrics (load time, FCP, LCP)
   3. Document expected URLs in test data

   ## Summary
   ✅ Positive: Clear test structure, good use of beforeEach
   ❌ Blocking: Fix selectors & credentials before merge
   📋 Follow-up: Add negative tests in separate PR

4. Offers to fix critical issues:
   User: "Apply the critical fixes"
   Agent:
   - Moves selectors to WeSendCVPage.ts
   - Updates test to import TEST_USERS from tests/data/users.ts
   - Reruns tests to verify fixes
   - Reports: "Fixed all critical issues. All tests passing."

示例提示：

"Review tests/wesendcv.spec.ts for code quality"
"Audit all files under tests/security-tests/ before this PR merges"
"Check tests/pages/WeSendCVPage.ts for POM compliance"
"Fix the critical issues you found in the review"
"Is this test following best practices? Any anti-patterns?"
"Verify this new test has proper coverage (happy + negative paths)"

VS代码中的触发器：

@code-reviewer Review tests/wesendcv.spec.ts for POM compliance, security, and best practices

报告严重性级别：

• 🔴 严重： 安全风险、POM违规或测试模式不稳定
• 🟡 警告： 未遵循最佳实践；可能会导致问题
• 💡 建议： 很高兴有改进；低优先级

输出： Markdown报告：

• 执行摘要（通过/失败状态）
• 带有行号的严重性排序问题
• 明确的修复建议
• 影响分析
• 提供自动应用修复程序

______________________________________________________________________

🛠️ 剧作家测试调试技巧

地点： .github/skills/playwright-test-debugging/SKILL.md

与上述聊天模式（手动调用）不同 技能由副驾驶自动加载 当它检测到您正在调试测试失败时。您不需要显式选择它。

它教会了Copilot什么：

• 在哪里可以找到测试结果(test-results/results.json, junit.xml, playwright-report/)
• 如何识别故障类型：选择器、时间、视觉回归、网络、可访问性
• 如何使用PowerShell命令在本地重现故障
• 要避免的反模式（硬睡眠、测试文件中的原始选择器等）
• 特定于此存储库结构的POM感知修复策略

由以下提示自动触发：

"The wesendcv test is failing with a timeout"
"Debug the accessibility test failures in CI"
"Why is the vibe spec failing on Windows?"

______________________________________________________________________

📐 代码审查技能

地点： .github/skills/code-review/SKILL.md

与调试技能一样，这 技能由副驾驶自动加载 当它检测到您正在审阅、审核或检查测试代码时。您不需要显式选择它。

它教会了Copilot什么：

• POM合规规则（选择器 tests/pages/，数据输入 tests/data/)
• 剧作家反图案旗(waitForTimeout、位置XPath， networkidle 误用）
• 与OWASP Top 10一致的安全规则（没有硬编码的秘密，安全的XSS有效载荷）
• 覆盖完整性预期（负面测试，11年，性能对应）
• 严重性分级报告格式(🔴 关键/🟡 警告/🔵 建议）

由以下提示自动触发：

"Review this test file"
"Audit tests/security-tests/ for issues"
"Is this Page Object following best practices?"

______________________________________________________________________

常见工作流程：现实世界场景

本节将展示如何组合代理来完成现实的测试任务。

工作流程1：从头开始测试新功能

脚本： 你的团队建立了一个新的 简历上传 功能。在交付生产之前，您需要创建全面的测试。

步骤：

1. 计划测试 （使用Planner）

   @planner Create a test plan for the CV upload feature at https://wesendcv.com/upload

→ 输出： specs/cv-upload-plan.md 8-12个测试场景

1. 生成测试代码 （使用生成器）

   @generator Generate Playwright tests from specs/cv-upload-plan.md

→ 输出： tests/integration-tests/cv-upload.spec.ts +页面对象+测试数据

1. 审查生成的代码 （使用代码审阅器）

   @code-reviewer Review tests/integration-tests/cv-upload.spec.ts for POM compliance and coverage

→ 输出：带有建议的审查报告（通常对生成的代码来说是最少的）

1. 在本地运行测试

   npm run test:headed tests/integration-tests/cv-upload.spec.ts

1. 添加API测试 （使用API测试剂）

   @api-testing Scaffold API tests for the /api/upload endpoint

→ 输出： tests/unit-tests/api.spec.ts +合同测试

1. 最后复审 （再次使用代码审阅器）

   @code-reviewer Audit tests/integration-tests/cv-upload.spec.ts and tests/unit-tests/api.spec.ts before shipping

时间线： 每个功能30-45分钟（而不是2-3小时的手动测试编写）

______________________________________________________________________

工作流2：调试并修复CI中失败的测试

脚本： 您的测试在本地通过，但CI在部署后破坏了它们。你需要尽快诊断和修复。

步骤：

1. 查看CI故障 （GitHub操作）

- 在GitHub中单击失败的测试运行 - 请参阅错误：“等待选择器'按钮\[name=“submit”\]超时”

1. 使用Healer进行诊断和修复 （使用Healer）

   @healer The upload form tests are timing out in CI on tests/integration-tests/cv-upload.spec.ts

→ 治疗者：

- 在本地运行测试 - 截取当前页面状态的屏幕截图 - 标识：选择器已移动到 button[data-testid="submit"] - 使用新选择器自动更新页面对象 - 重新运行测试：✅ 通过 - 报告：“修复了WeSendCVPage.ts中的选择器（第92行）”

1. 验证修复

   npm test tests/integration-tests/cv-upload.spec.ts

1. 承诺与推动

   git add tests/pages/WeSendCVPage.ts
   git commit -m "Fix: Update CV upload selector for new DOM structure"
   git push

时间线： 5-10分钟（而不是30-60分钟的手动调试）

______________________________________________________________________

工作流程3：添加缺失的测试覆盖率

脚本： 代码审查反馈：“你的测试只涵盖了快乐的道路。添加边缘情况和错误场景。”

步骤：

1. 获取代码审查反馈 （使用代码审阅器）

   @code-reviewer Check tests/integration-tests/cv-upload.spec.ts for coverage gaps

→ 报告：“缺少4个边缘案例测试：文件类型无效、文件太大、网络超时、服务器错误”

1. 向Planner询问边缘情况场景 （使用Planner）

   @planner What are the edge cases and error flows for CV file upload?

→ 输出： specs/cv-upload-edge-cases.md 有5-7个错误场景

1. 生成缺失的测试 （使用生成器）

   @generator Generate tests for the edge cases in specs/cv-upload-edge-cases.md and add to tests/integration-tests/cv-upload.spec.ts

→ 将新的测试用例附加到现有的规范文件中

1. 再次查看覆盖范围 （使用代码审阅器）

   @code-reviewer Review tests/integration-tests/cv-upload.spec.ts - is coverage now complete?

→ 报告：“✅ 覆盖良好。快乐路径+5个边缘案例+2个错误场景”

1. 运行完整的测试套件

   npm test tests/integration-tests/

时间线： 15-20分钟

______________________________________________________________________

工作流程4：发布前的安全性和可访问性审核

脚本： 您正在运送到生产现场。确保您的测试涵盖了安全性和可访问性要求。

步骤：

1. 获取安全审查 （使用代码审阅器）

   @code-reviewer Review tests/security-tests/ and tests/authentication/ - are we covering OWASP Top 10?

→ 报告：“缺少测试：CSRF保护、XSS有效载荷、SQL注入尝试、API速率限制”

1. 生成安全测试 （使用Planner+生成器）

   @planner What are the top security scenarios for a job application platform?

→ Then:

   @generator Generate security tests from specs/security-scenarios.md

→ 产出：增强 tests/security-tests/ 新的攻击场景

1. 获取可访问性审查 （使用代码审阅器）

   @code-reviewer Do our tests cover WCAG 2.1 Level AA accessibility? Check tests/accessibility/

→ 报告：“缺失：颜色对比验证、模态焦点管理、ARIA标签验证”

1. 生成11年的测试 （使用生成器）

   @generator Create accessibility tests for keyboard navigation, screen reader support, and color contrast in tests/accessibility/

1. 运行安全+a1y测试

   npx playwright test tests/security-tests/ tests/accessibility/

1. 最终审计 （使用代码审阅器）

   @code-reviewer Perform final audit of all tests before production release - check coverage, security, a11y

时间线： 1-2小时（全面安保+11年覆盖）

______________________________________________________________________

工作流程5：为QA团队创建手动测试指南

脚本： 您需要将测试交给QA团队，该团队更喜欢手动检查表进行探索性测试。

步骤：

1. 生成手动检查表 （使用手动测试聊天模式）

   @manualtesting Create a comprehensive manual test checklist for https://wesendcv.com

→ 输出：详细检查表，包括：

- 要测试的页面部分 - 逐步程序 - 预期结果 - 边缘案例 - 浏览器/设备矩阵

1. 导出为PDF或共享

   # Copy checklist to team wiki/Confluence
   # Or save as PDF for offline testing

1. 与QA团队分享

- Slack：“#qa测试中已准备好手动测试清单” - Jira：共享文档的链接

1. 结合自动化测试

   @manualtesting Create a manual regression checklist that complements our automated test suite

→ 专注于探索性测试、用户体验验证和自动化可能遗漏的边缘案例

时间线： 每个功能10-15分钟

______________________________________________________________________

工作流程6：批处理：审查和修复多个测试文件

脚本： 您有5个测试文件需要重构以符合POM标准。你想一次把它们都修好。

步骤：

1. 审核所有测试文件

   @code-reviewer Audit all test files in tests/integration-tests/ and tests/security-tests/ for POM compliance and best practices

→ 报告：对所有具有优先级的文件进行汇总审查

1. 请治疗师应用修复程序

   @code-reviewer You identified these issues [paste list]. Can you fix them across all files?

→ Healer应用修复程序：

- 将内联选择器移动到页面对象 - 将硬编码的测试数据提取到 tests/data/ - 替换反图案 - 重新运行所有测试以进行验证

1. 验证所有测试是否通过

   npm test tests/integration-tests/ tests/security-tests/

1. 提交批量更改

   git add tests/
   git commit -m "Refactor: POM compliance across integration & security tests"
   git push

时间线： 5个以上文件需要20-30分钟（而不是2-3小时的手动重构）

______________________________________________________________________

工作流程7：微服务API合同测试

脚本： 你的团队有多个API。您需要确保前端测试与后端API（消费者驱动的合约测试）兼容。

步骤：

1. 脚手架合同测试 （使用API测试剂）

   @api-testing Create Pact consumer-driven contract tests for our APIs:
   - /api/jobs (list, get, create)
   - /api/users (login, profile, logout)
   - /api/uploads (post file)

→ 输出： tests/contract-tests/ 使用Pact设置

1. 生成API交互测试 （使用生成器）

   @generator Write integration tests that invoke these API endpoints and validate responses

→ 输出： tests/unit-tests/api.spec.ts 全覆盖

1. 运行合同测试

   npm run test:contract

→ 产生 pacts/ 用于后端验证的合同文件

1. 与后端团队共享合同

- 合同 pacts/ 是人类可读的JSON - 后端团队使用Pact验证来确保他们的更改不会破坏前端

时间线： 30-45分钟为3+API设置合同测试

______________________________________________________________________

在MCP流中使用代理

对于完全编程的代理使用（无VS Code UI），请启动Playwright MCP服务器并通过API发送聊天模式提示：

# Start MCP server
npx playwright run-test-mcp-server

# Or add as an npm script
npm set-script mcp:start "npx playwright run-test-mcp-server"
npm run mcp:start

这 .vscode/mcp.json 该文件为VS Code的代理运行时预先配置了MCP入口点。请参阅 使用聊天模式提示和MCP流 有关API级别使用示例的部分。

______________________________________________________________________

技能vs聊天模式vs自定义指令

在此仓库中注册的技能：

______________________________________________________________________

代理快速参考指南

决策树：使用哪个代理？

Do you have...
│
├─ A failing test?
│  └─ Use 🩺 HEALER: Diagnose & auto-fix the issue
│
├─ A new feature to test?
│  ├─ No test plan yet?
│  │  └─ Use 📋 PLANNER: Create a test plan first
│  └─ Have a test plan?
│     └─ Use ⚙️ GENERATOR: Write automated tests from the plan
│
├─ API endpoints to test?
│  └─ Use 🔌 API TESTING: Scaffold API & contract tests
│
├─ Need to review test code?
│  └─ Use 🔍 CODE REVIEWER: Audit for POM compliance & security
│
├─ Need a manual test checklist?
│  └─ Use 📝 MANUAL TESTING: Generate step-by-step procedures
│
└─ Not sure? 
   └─ Ask in chat: "Help me plan testing for [feature]"
      → Agent will recommend next steps

代理能力矩阵

_\*可以查看并可选择在获得许可的情况下进行修复_

代理人节省的时间

______________________________________________________________________

专业提示和最佳实践

✅ 做：

• 首先使用Planner： 在编写代码之前，一定要制定一个测试计划。节省时间并确保覆盖范围。
• 连锁代理商： Plan → 生成→ 审查→ Test.每个代理的输出都馈入下一个代理。
• 询问边缘案例： 规划者擅长发现边缘案例。具体问：“错误情况是什么？”
• 让Healer迭代： 如果测试不稳定，给Healer多次尝试。它从失败中学习。
• 审查生成的代码： 始终进行最终的代码审查，即使是对生成的测试。代理人遵循惯例，但可能会忽略细微差别。
• 经常承诺： 在每个代理完成任务后，提交并推送。如果需要，可以轻松回滚。
• 使用描述性提示： “修复登录测试”是模糊的。“单击提交按钮时登录测试超时”更好。

❌ 不要：

• 不要跳过审核步骤： 代码审查员发现了80%的问题。合并前始终运行它。
• 不要硬编码凭据： 特工们会对此进行标记。始终使用 tests/data/ 对于敏感的测试数据。
• 不要使用原始选择器： 让代理人执行POM。选择器属于页面对象，而不是测试规范。
• 不要忽视代理商的建议： 如果代码审查员警告某个模式，这通常是一个真正的问题。
• 不要过度测试： 对一个功能进行20次测试太过分了。规划快乐之路+3-5个边缘案例。
• 不要在没有代理的情况下运行测试： 使用Healer治疗CI故障。手动调试浪费时间。

🎯 优化提示：

1. 批处理类似任务： 同时要求多个测试场景。代理商批量生产效率更高。
2. 重复使用测试数据： 创建全面 tests/data/ 文件第一。代理利用现有数据。
3. 文档选择器： 如果页面对象的选择器不稳定，请添加注释。代理人尊重评论。
4. 版本您的测试计划： 保持 specs/ 在git中。计划是非技术利益相关者的文件。
5. 使用移动项目： 当Planner探索一个网站时，要求它也测试移动视口。

______________________________________________________________________

解决代理问题

问题：治疗师无法修复测试，请标记它 test.fixme()

解决方案： 检查问题是否是环境问题（网络、服务器故障）。重新启动开发服务器或API，然后重试。

问题：生成器生成测试，但选择器不起作用

解决方案： 该网站可能包含动态内容。要求Generator使用 data-test 属性（如果可用）。

问题：代码审查员过于严格/宽松

解决方案： 审查 .github/skills/code-review/SKILL.md 了解规则。如果需要，自定义严重性级别。

问题：手动测试清单太长

解决方案： 询问特定部分：“仅为登录表单创建手动检查表”

问题：代理未使用我的测试数据（tests/data/）

解决方案： 确保测试数据文件导出常量。代理商寻找出口 *.ts 文件夹。

______________________________________________________________________

最佳实践和提示

• 选择器： 使用稳定 id 或 data-test 属性，而不是脆弱的CSS/XPath。
• 页面对象： 保持POM方法专注于单个动作；避免上帝的方法。
• 测试数据： 将URL、凭据和设备提取到 tests/data/ 文件夹。
• 人工产品： 在中启用跟踪和屏幕截图 playwright.config.ts 以便更快地进行分诊。
• 基线： 如果预计会出现视觉差异，请为每个视口/OS保留一个基线。
• 隔离： 测试应该是独立的和幂等的；避免测试之间的依赖关系。
• 不要睡懒觉： 使用Playwright内置的等待功能(waitForSelector, waitForNavigation等等）。
• 阴性测试： 始终验证错误路径和边缘情况以及快乐路径。

如何扩展

添加新页面对象

1. 创建 tests/pages/MyPage.ts
2. 从导入页面数据 tests/data/
3. 将定位器定义为类属性
4. 实施操作方法（goto、click、fill、verify等）
5. 导出类以在测试规范中使用

例子：

// tests/pages/LoginPage.ts
import { Page, expect } from '@playwright/test';
import { URLS } from '../data/urls';

export class LoginPage {
  constructor(readonly page: Page) {}
  
  async gotoLoginPage() {
    await this.page.goto(URLS.app.login);
  }
  
  async login(username: string, password: string) {
    await this.page.fill('[data-test="username"]', username);
    await this.page.fill('[data-test="password"]', password);
    await this.page.click('[data-test="login-btn"]');
  }
}

添加测试数据

1. 创建 tests/data/mydata.ts
2. 导出常量（URL、用户、产品等）
3. 导入和使用页面对象和测试规范

例子：

// tests/data/users.ts
export const TEST_USERS = {
  standard: {
    username: 'standard_user',
    password: 'secret_sauce',
  },
  admin: {
    username: 'admin',
    password: 'admin_pass',
  },
};

添加新测试

1. 创建 tests/myfeature.spec.ts
2. 导入页面对象和测试数据
3. 使用 test.beforeEach() 初始化页面对象
4. 编写侧重于工作流和断言的测试用例
5. 运行： npx playwright test tests/myfeature.spec.ts

常用命令

# Install
npm install
npx playwright install --with-deps

# Test
npm test                           # Full suite
npm test                           # CI-style run
npx playwright test --headed       # Debug mode
npx playwright test --debug        # Step through with Inspector

# Dev
node tools/dev-server.js           # Start demo server
node tools/compare.js [...]        # Run perceptual diff

# Clean
npm run clean                      # Remove artifacts (if script exists)

故障排除

许可和归属

MIT许可证

版权所有（c）2024-2026帕德马拉吉·尼达贡迪

特此免费授予任何获得本软件和相关文档文件（“软件”）副本的人在不受限制的情况下处理软件的权限，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，以及允许获得软件的人这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在软件的所有副本或实质部分中。

软件按“原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对因软件或软件的使用或其他交易而产生或与之相关的任何索赔、损害赔偿或其他责任承担责任，无论是在合同、侵权或其他诉讼中。

用例

该生产就绪框架旨在：

• ✅ 企业测试自动化项目
• ✅ 学习和技能发展
• ✅ 面试准备和作品集展示
• ✅ 开源贡献和社区共享
• ✅ 商业项目（无限制）

您可以在项目中自由地调整、扩展和使用代码、模式和架构。

归因（可选，但值得赞赏）

如果你觉得这个框架很有价值，并在你的项目中使用它，欢迎提及或链接回来，但不是必需的：

Based on Playwright-AI-Agent-POM-MCP-Server by Padmaraj Nidagundi
https://github.com/padmarajnidagundi/Playwright-AI-Agent-POM-MCP-Server

______________________________________________________________________

安全策略

报告安全漏洞

如果您发现安全漏洞，请负责任地报告：

1. 不要 公开问题
2. 电子邮件：padmaraj.nidagundi@gmail.com主题为“\[安全\]剧作家框架漏洞”
3. 包括：描述、复制步骤、影响评估和建议修复（如果可用）
4. 预计响应时间：24-48小时

安全最佳实践

• 🔒 所有依赖关系定期更新和审核
• 🔒 存储库中没有硬编码凭据或敏感数据
• 🔒 用于配置的环境变量
• 🔒 对所有外部请求强制执行HTTPS
• 🔒 所有测试工具中的输入验证和消毒

______________________________________________________________________

版本历史和更新

最新版本：2.1.0（2026年1月）

新增内容：

• ✨ 新增13个综合测试类别
• ✨ 移动测试支持（iOS/Android模拟）
• ✨ 用于人工智能辅助调试的MCP服务器集成
• ✨ 具有集中数据的增强型POM架构
• ✨ 跨平台CI/CD（Ubuntu+Windows）
• 🐛 修复了网络弹性类别中的片状测试
• 📚 全面的文档更新

升级路径：

git pull origin main
npm install
npx playwright install --with-deps

有关详细的更改日志，请参阅 更改日志.md （即将推出）

______________________________________________________________________

关于作者

帕德马拉吉·尼达贡迪 --高级QA自动化工程师兼测试自动化架构师

专业背景

• 🎯 8+年 在测试自动化和质量工程方面的经验
• 🏆 证实： ISTQB高级测试自动化工程师，剧作家专业
• 💼 专业知识： E2E自动化、CI/CD集成、测试架构设计、性能测试
• 📚 专业： Playwright、Selenium、Cypress、API测试、移动自动化、可视化回归测试
• 🌍 行业经验： 金融科技、电子商务、医疗保健、SaaS平台
• 📝 技术撰稿人： 发表了关于测试自动化最佳实践和现代质量保证方法的文章

成就

• 构建的测试框架 15+企业项目 具有100%的CI/CD集成
• 通过以下方式减少测试执行时间 70% 通过并行化和智能测试选择
• 指导 50+QA工程师 测试自动化和Playwright的采用
• Playwright社区工具和扩展的开源贡献者

联系方式和专业链接

📧 电子邮件： 帕德马拉·尼达贡迪在gmail.com上\ 💼 领英： https://www.linkedin.com/in/padmarajn/\ 🐙 github： https://github.com/padmarajnidagundi/Playwright-AI-Agent-POM-MCP-Server\ 📦 NpmJs： \[即将推出-剧作家实用程序包\]

获取支持

• 💬 问题？ 打开一个
• 🤝 咨询： 可用于测试自动化咨询和培训
• 📖 文档： 此存储库中的综合指南和示例
• ⚡ 响应时间： 通常在24-48小时内处理问题和咨询

______________________________________________________________________

社区与信任

✅ 安全： 无已知漏洞|定期更新依赖关系|安全编码实践\ ✅ 透明度： 开源| MIT许可证|公共问题跟踪\ ✅ 质量： 在Windows、Ubuntu、macOS上测试|85%以上的代码覆盖率|CI/CD已验证\ ✅ 维护： 积极维护|定期更新|响应社区反馈

问题或反馈？ 打开一个问题或联系。测试愉快！ 🚀

使用聊天模式提示和MCP流

请参阅 人工智能代理——聊天模式和技能 关于每个代理以及如何在VS Code中激活它的完整指南。

快速：通过LLM API（PowerShell+OpenAI）直接使用聊天模式提示：

$env:OPENAI_API_KEY = "sk_..."
$prompt = Get-Content ".github/chatmodes/🎭 healer.chatmode.md" -Raw
curl -s https://api.openai.com/v1/chat/completions `
  -H "Authorization: Bearer $env:OPENAI_API_KEY" `
  -H "Content-Type: application/json" `
  -d (@{ model = "gpt-4o-mini" ; messages = @(@{ role = "user"; content = $prompt }) } | ConvertTo-Json)

安全： 永远不要提交API密钥。使用环境变量或CI机密。

______________________________________________________________________

Agent技巧——使用GitHub Copilot进行自动测试调试

请参阅 人工智能代理——聊天模式和技能 有关详细信息的部分 playwright-test-debugging 技能和所有聊天模式代理。

创建自定义技能。

添加项目特定技能以扩展Copilot的能力：

mkdir .github/skills/your-skill-name

创建 .github/skills/your-skill-name/SKILL.md:

---
name: your-skill-name
description: Brief description of what this skill does and when to use it
---

# Skill Instructions

Your detailed instructions, examples, and guidelines here...

此回购的示例想法：

• visual-regression-workflow --基线图像管理指南
• mobile-test-creation --添加移动设备测试的模式
• page-object-scaffolding --用于创建新页面对象的模板
• ci-failure-analysis --调试GitHub操作工作流失败

了解更多

• 📖
• 🌟 社区技能收集

______________________________________________________________________

为剧作家AI代理POM MCP服务器做出贡献

感谢您考虑为这个项目做出贡献！ 您的贡献有助于整个QA自动化社区。 该框架已被全球500多名工程师使用，您的改进将产生真正的影响。

为什么要贡献？

• 🌟 构建您的投资组合 具有生产级自动化工作
• 🎓 学习最佳实践 来自代码审查和社区反馈
• 🤝 与QA专业人员建立联系 全球范围内
• 📈 提升你的技能 现代测试自动化

如何做出贡献

快速开始

1. 分叉存储库：点击页面右上角的“分叉”
2. 克隆你的叉子:

   git clone 
   cd Playwright-AI-Agent-POM-MCP-Server
   npm install
   npx playwright install --with-deps

1. 创建要素分支:

   git checkout -b feature/your-feature-name

1. 进行更改：遵循我们的编码标准（见下文）
2. 测试您的更改:

   npm test
   npx playwright test tests/your-new-test.spec.ts

1. 以明确的信息提交:

   git commit -m "feat: add visual regression for login page"

1. 推你的叉子:

   git push origin feature/your-feature-name

1. 创建pull请求：转到原始仓库并单击“新建拉取请求”

贡献领域

• 🧪 新的测试类别或模式
• 📝 文档改进
• 🐛 Bug修复和稳定性改进
• ⚡ 性能优化
• 🎨 新建页面对象或测试工具
• 🔧 CI/CD增强功能
• 🌍 i18n测试示例
• 📱 移动测试场景

编码标准

• ✅ 使用TypeScript严格模式
• ✅ 遵循现有的POM架构
• ✅ 将测试数据添加到 tests/data/
• ✅ 使用稳定的选择器（首选数据测试属性）
• ✅ 写出清晰、描述性的测试名称
• ✅ 避免深度睡眠；使用剧作家等待
• ✅ 为公共方法添加JSDoc注释
• ✅ 确保测试在Windows和Ubuntu上都通过

拉取请求指南

提交前：

• \[\]所有测试均在本地通过(npm test)
• \[\]没有ESLint/TypeScript错误
• \[\]添加了新功能的测试
• \[\]必要时更新文件
• \[\]遵循提交消息约定（feat/fix/docs/re重构）

PR模板：

## Description
Brief description of changes

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Performance improvement

## Testing
- [ ] Tested on Windows
- [ ] Tested on Ubuntu/macOS
- [ ] All existing tests pass
- [ ] Added new tests

## Checklist
- [ ] Code follows project style guidelines
- [ ] Self-reviewed the code
- [ ] Documentation updated

行为准则

我们致力于提供一个温馨和包容的环境。请遵守我们的 行为准则 在所有的互动中。

零容忍：

• 骚扰或歧视性语言
• 嘲讽或侮辱性评论
• 垃圾邮件或离题讨论

认可

所有贡献者将是：

• ✅ 列在 贡献者.md （即将推出）
• ✅ 在发行说明中提到了重大贡献
• ✅ 在适用的情况下，在文件中给予信用

问题？

如果您有任何问题：

• 💬 打开一个
• 🐛 通过以下方式报告错误
• 📧 电子邮件：Padma dot nidagundi和gmail.com

响应时间： 通常为24-48小时

______________________________________________________________________

欢迎首次投稿！ 👋

开源新手？没问题！查找标记为的问题 good-first-issue 或 help-wanted。我们提供辅导和指导，帮助您取得成功。

感谢您让测试自动化对每个人都更好！ 🚀