使用Playwright MCP的AI辅助QA工作流程
许多QA工程师陷入了手动测试的循环,几乎没有留下什么 是时候培养自动化技能了。本项目探讨了人工智能如何辅助工具 可以处理手动测试的执行负担,使QA工程师能够 向左移动,投资自动化,专注于更高价值的工作。
- 一个展示人工智能辅助手动和自动测试工作流程的项目
在Cursor中使用Playwright MCP。
- Cursor代理读取结构化提示文件,通过Playwright MCP执行测试场景,并生成markdown测试报告。
旨在展示实用的QA自动化技能,包括快速工程, 测试设计和AI辅助测试执行。
______________________________________________________________________
这个项目是如何建造的
这个项目不是通过提示人工智能并接受输出来构建的。每 这个决定是深思熟虑的。过程:
- 人类识别需求或想法
- 人类咨询克劳德(Claude.ai)来设计和审查这种方法
- 克劳德生成提示或计划
- 人工审核、改进和批准
- 人类向Cursor提供提示
- Cursor实现、运行和验证
- 人工审查输出和提交
- 定期进行人工维护提示,以保持项目的一致性
克劳德担任战略层 --架构决策、快速设计、, 模式评估和方法验证。
游标充当执行层 --编写代码、运行测试、修复 失败和重构。
人类策划了这两件事 --决定构建什么,何时构建, 以及输出是否可接受。
这种三方协作——人类+战略人工智能+执行人工智能——是人工智能辅助工程中一种有意的工作方式。
______________________________________________________________________
这个项目展示了什么
- 在Cursor中使用Playwright MCP驱动真正的浏览器进行手动测试执行
- 设计精简、可重用的提示文件,指导人工智能辅助测试会话
- 从MCP会话生成结构化手动测试报告
- 将手动测试用例转换为Playwright自动化测试
- 带有剧作家装置的页面对象模型
- 与共享身份验证会话
auth.setup.ts和storageState - 可重复使用的维护和设置提示,以保持项目的一致性
- 通过REST API与测试管理工具集成(计划中)
______________________________________________________________________
工程决策
这些是我做出的人工智能没有建议的决定:
.env获取凭据 --AI默认为硬编码值。使用.env
是基于现实世界安全实践的深思熟虑的选择。
- 文件夹结构 --the
pages/,fixtures/,ai-testing/,
.github/prompts/ 架构是由工程师设计的,而不是生成的。
- 带夹具的页面对象模型 --被确定为失踪
AI生成了规范。我指导了实施。
- 共享身份验证会话 --将登录重复识别为模式问题
并指导 auth.setup.ts + storageState 实施。
- 将文件提示为已提交的工件 --版本控制提示决策
文件,因此工作流是可重复和可审计的。
- 每个功能单独的页面对象 --导演
EmployeeListPage作为
分离类而不是合并到 AddEmployeePage.
- 所有提交和提交消息 --版本控制决策、检查点
时间和变化描述始终是人类的选择。
______________________________________________________________________
技术栈
| 工具 | 目的 |
|---|---|
| 剧作家 | 浏览器自动化和测试运行器 |
| TypeScript | 测试编写语言 |
| 光标+剧作家MCP | 人工智能辅助手动测试执行 |
| Claude(Claude.ai) | 战略人工智能层——架构和快速设计 |
| OrangeHRM演示 | 测试中的应用程序 |
| TestRail | 测试用例管理API集成(计划) |
| GitHub操作 | CI/CD(计划中) |
______________________________________________________________________
项目结构
ai-qa-workflow/
├── .github/
│ └── prompts/ # Cursor Agent prompt files
│ ├── README.md # Prompt folder documentation
│ ├── manual-runs/ # MCP manual test session prompts
│ ├── manual-test-cases/ # Test case generation prompts
│ ├── automation-test-cases/ # Playwright spec generation prompts
│ └── setup-and-maintenance/ # Project setup and audit prompts
├── ai-testing/
│ ├── manual-runs/ # MCP-generated test reports
│ └── manual-test-cases/ # Generated formal test cases
├── pages/ # Page Object Model classes
│ ├── AddEmployeePage.ts
│ └── EmployeeListPage.ts
├── fixtures/ # Custom Playwright fixtures
│ └── baseTest.ts
├── playwright/ # Playwright-specific artifacts
│ └── .auth/ # Auth session storage (gitignored)
│ └── user.json # Session state — never committed
├── tests/ # Playwright spec files
│ ├── auth.setup.ts # Shared auth session setup
│ ├── add-employee/
│ │ └── add-employee.spec.ts
│ └── login/
├── utils/ # Helper functions (planned)
├── data/ # Static test data (planned)
├── docs/ # Reference documentation
├── playwright.config.ts
├── tsconfig.json
└── .envExample # Environment variable template______________________________________________________________________
工作流是如何工作的
1.使用MCP进行手动测试
提示文件 .github/prompts/manual-runs/ 在下定义应用程序 测试、行为规则和测试场景。光标代理读取提示, 通过Playwright MCP导航真实浏览器,执行每个场景,以及 生成保存到的结构化markdown报告 ai-testing/manual-runs/.
2.提示文件架构
两层结构使提示文件保持精简和可重用。每个类别都有 它自己的 base-template.md 共享规则。要素文件引用基础 只添加特定场景的内容。看 .github/prompts/README.md 为了 完整的文档。
3.测试用例生成
MCP会话报告被输入到测试用例生成提示中,生成 正式、结构化的测试用例保存到 ai-testing/manual-test-cases/这些 作为自动化的真理之源。
4.自动化测试
使用以下命令将正式测试用例转换为Playwright TypeScript规范 自动化提示。生成的规格遵循生产级模式:
- 具有专用页面类的页面对象模型
pages/ - 剧作家装置
fixtures/baseTest.ts用于自动页面注入 - 共享身份验证会话--登录通过运行一次
auth.setup.ts,会话重复使用
通过以下方式进行所有测试 storageState
5.身份验证
tests/auth.setup.ts 每次测试运行使用来自的凭据登录一次 .env, 将会话保存到 playwright/.auth/user.json,并且所有测试都重用它。 身份验证文件是gitignored的——它包含重新生成的实时会话Cookie 每次跑步。
6.维护
.github/prompts/setup-and-maintenance/ 包含可重复使用的提示 重复性任务--审核提示文件以查找过时的模式,实现 新的架构模式,并在项目发展过程中保持一致性。
______________________________________________________________________
入门指南
先决条件
- Node.js 18+
- 配置了Playwright MCP的Cursor Pro
- OrangeHRM演示证书(公开--请参阅
.envExample)
设置
git clone https://github.com/NewLara/ai-qa-workflow.git
cd ai-qa-workflow
npm install
npx playwright install chromium
cp .envExample .env
# Edit .env with your credentials在游标中配置剧作家MCP
添加 ~/.cursor/mcp.json:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}重新启动Cursor并验证剧作家服务器在以下位置显示绿点 设置>工具和MCP。
运行MCP测试会话
在Cursor中打开一个新的Agent聊天,并引用一个提示文件:
Use .github/prompts/manual-runs/base-template.md and
.github/prompts/manual-runs/orangehrm-login.md to perform a manual
test session. Reference the .env file for credentials.运行自动测试
# Run all tests
npx playwright test
# Run a specific spec
npx playwright test tests/add-employee/add-employee.spec.ts
# Run with browser visible
npx playwright test --headed
# Run in debug mode
npx playwright test --debug
# Run in UI mode
npx playwright test --ui______________________________________________________________________
在被测应用程序
Orange人力资源管理 --开源人力资源管理系统 网址: https://opensource-demo.orangehrmlive.com 资格证书: 看 .envExample
因其现实的企业工作流程而选择——员工管理、休假 请求、用户角色——反映真实世界的QA场景。不是玩具应用程序。
______________________________________________________________________
剧作家MCP工具参考
| 工具 | 目的 |
|---|---|
browser_navigate | 导航到URL |
browser_click | 单击元素 |
browser_fill | 清除并填写输入字段 |
browser_snapshot | 捕获可访问性快照 |
browser_screenshot | 截图 |
browser_wait_for | 等待元素或条件 |
browser_handle_dialog | 接受或关闭对话框 |
browser_press_key | 按键盘键 |
browser_evaluate | 在浏览器上下文中运行JavaScript |
browser_network_requests | 检查网络请求 |
browser_close | 关闭浏览器 |
______________________________________________________________________
作者
Lara Caves——QA自动化工程师 · 领英
