playwright-qa

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwright QA

Purpose

用途

Automated visual QA testing for web applications. Uses Playwright to launch a headless browser, navigate the app like a real user, take screenshots, check for console/network errors, test interactive elements, verify responsive layouts, and identify visual bugs — then fix them automatically.

为Web应用提供自动化视觉QA测试。使用Playwright启动无头浏览器，像真实用户一样浏览应用、截取屏幕截图、检查控制台/网络错误、测试交互元素、验证响应式布局并识别视觉Bug——然后自动修复这些问题。

Routing

适用场景

Use when: Any web app task that mentions testing, catching bugs, verifying it works, shipping, or quality — even without explicitly mentioning Playwright or visual QA. Also use when the user builds a web app and the implicit expectation is that it should work.
Do not use when: The task is purely about unit tests, API testing, non-web application testing, or native mobile app testing.
Outputs: QA report with checks (passed/failed), issues categorized by severity, screenshots, and interaction log.
Success criteria: All checks pass, or issues are identified with clear descriptions and auto-fixed where possible.

适用情况：任何提及测试、捕获Bug、验证功能、上线或质量保障的Web应用任务——即使未明确提到Playwright或视觉QA。当用户开发Web应用且隐含要求应用能正常运行时也适用。
不适用情况：纯单元测试、API测试、非Web应用测试或原生移动应用测试。
输出内容：包含检查结果（通过/失败）、按严重程度分类的问题、截图及交互日志的QA报告。
成功标准：所有检查通过，或已识别问题并提供清晰描述，且尽可能自动修复。

Trigger Examples

触发示例

Positive

正向示例

Build a todo app in React, test it to catch any bugs before shipping
Build a dashboard and make sure it works
Create a landing page and verify everything looks right
Build this web app and ship it bug-free
Make a React app, test it
Build a weather app and check for issues
Create the app and QA it
Build and test the frontend
Does the app work?
Test this web app with Playwright
Run visual QA on localhost:3000
Check my site for bugs
Do automated browser testing
Verify the UI works
Screenshot and test the web app
Find visual bugs in my project
Test the app like a real user
QA the frontend
Run Playwright tests
Make sure it works before we ship

用React开发一个待办事项应用，在上线前测试以捕获所有Bug
开发一个仪表板并确保其能正常运行
创建一个落地页并验证所有内容显示正常
开发这个Web应用并无Bug上线
制作一个React应用并进行测试
开发一个天气应用并检查问题
创建应用并进行QA测试
开发并测试前端
这个应用能正常运行吗？
用Playwright测试这个Web应用
在localhost:3000上运行视觉QA
检查我的网站是否存在Bug
执行自动化浏览器测试
验证UI能否正常工作
截图并测试Web应用
在我的项目中查找视觉Bug
像真实用户一样测试应用
对前端进行QA测试
运行Playwright测试
确保上线前应用能正常运行

Negative

负向示例

Write unit tests with Jest
Run jest/vitest tests
Test the API endpoints with curl
Do load testing with k6
This is a native iOS/Android app
Run backend unit tests

用Jest编写单元测试
运行jest/vitest测试
用curl测试API端点
用k6进行负载测试
这是一个原生iOS/Android应用
运行后端单元测试

Parameters

参数

Name	Type	Required	Description
url	string	No	Target URL to test (defaults to http://localhost:3000)
server_command	string	No	Command to start the dev server (e.g., "npm run dev")
checks	string	No	Comma-separated list of checks: visual_snapshot, console_errors, network_errors, interaction_test, responsive_check, accessibility_check, performance_check

名称	类型	是否必填	描述
url	string	否	待测试的目标URL（默认值为http://localhost:3000）
server_command	string	否	启动开发服务器的命令（例如："npm run dev"）
checks	string	否	以逗号分隔的检查项列表：visual_snapshot、console_errors、network_errors、interaction_test、responsive_check、accessibility_check、performance_check

Runtime Prompt

运行时提示

You are running automated visual QA on a web application using Playwright.

Workflow:

Install dependencies (if project was just scaffolded):
- If the project has a
```
package.json
```
  but no
```
node_modules
```
  , run
```
npm install
```
  (or
```
yarn
```
  /
```
pnpm install
```
  ) via
```
run_command
```
  first.
- NEVER skip this step for a freshly created project —
```
npm run dev
```
  will fail without it.
Start the dev server (if not already running):
- Use
```
qa_run
```
  with
```
server_command
```
  to start it automatically, OR
- Use
```
run_command
```
  to start the server manually if needed
Run full QA pipeline:
- Call
```
qa_run
```
  with the target URL and enabled checks
- This will automatically: launch browser, navigate, check console errors, check network errors, take visual snapshots, and test interactive elements
Review results:
- Check the QA report for any issues
- Issues are categorized as critical, major, or minor
Fix issues (if auto_fix is enabled):
- For each critical/major issue, fix the code
- Re-run
```
qa_run
```
  to verify the fix
- Repeat until all critical/major issues are resolved
Manual testing (for specific flows):
- Use
```
qa_navigate
```
  to go to specific pages
- Use
```
qa_interact
```
  to test user flows (click buttons, fill forms, hover elements)
- Use
```
qa_screenshot
```
  to capture state at key points
- Use
```
qa_check
```
  to run specific checks
Cleanup:
- Always call
```
qa_cleanup
```
  when done

Key tools:

```
qa_run
```
— Full automated pipeline (recommended starting point)
```
qa_navigate
```
— Navigate to a URL
```
qa_interact
```
— Click, fill, hover, scroll
```
qa_screenshot
```
— Take a screenshot with diagnostics
```
qa_check
```
— Run a specific check
```
qa_report
```
— Get current run report
```
qa_cleanup
```
— Tear down browser and server

Best practices:

Always start with
```
qa_run
```
for a comprehensive first pass
Fix critical issues before minor ones
Re-run after fixes to verify
Use
```
qa_interact
```
for specific user flow testing
Take screenshots at key interaction points
Check both desktop and mobile viewports

你正在使用Playwright对Web应用执行自动化视觉QA测试。

工作流：

安装依赖（如果项目刚搭建完成）：
- 如果项目有
```
package.json
```
  但无
```
node_modules
```
  ，先通过
```
run_command
```
  执行
```
npm install
```
  （或
```
yarn
```
  /
```
pnpm install
```
  ）。
- 对于刚创建的项目，绝不能跳过此步骤——没有依赖的话
```
npm run dev
```
  会执行失败。
启动开发服务器（如果尚未运行）：
- 使用
```
qa_run
```
  并传入
```
server_command
```
  自动启动，或者
- 如有需要，使用
```
run_command
```
  手动启动服务器
运行完整QA流程：
- 调用
```
qa_run
```
  并传入目标URL和启用的检查项
- 此操作会自动执行：启动浏览器、导航至目标页面、检查控制台错误、检查网络错误、拍摄视觉快照并测试交互元素
审核结果：
- 检查QA报告中的所有问题
- 问题分为严重、主要和次要三个等级
修复问题（如果启用了auto_fix）：
- 针对每个严重/主要问题修复代码
- 重新运行
```
qa_run
```
  以验证修复效果
- 重复此过程直至所有严重/主要问题都已解决
手动测试（针对特定流程）：
- 使用
```
qa_navigate
```
  导航至特定页面
- 使用
```
qa_interact
```
  测试用户流程（点击按钮、填写表单、悬停元素）
- 使用
```
qa_screenshot
```
  捕获关键节点的状态
- 使用
```
qa_check
```
  执行特定检查项
清理环境：
- 完成测试后务必调用
```
qa_cleanup
```

核心工具：

```
qa_run
```
—— 完整自动化流程（推荐作为初始步骤）
```
qa_navigate
```
—— 导航至指定URL
```
qa_interact
```
—— 点击、填写、悬停、滚动
```
qa_screenshot
```
—— 带诊断信息的截图
```
qa_check
```
—— 执行特定检查项
```
qa_report
```
—— 获取当前运行报告
```
qa_cleanup
```
—— 关闭浏览器和服务器

最佳实践：

始终从
```
qa_run
```
开始，进行全面的首次测试
先修复严重问题，再处理次要问题
修复后重新运行测试以验证效果
使用
```
qa_interact
```
测试特定用户流程
在关键交互节点处截取截图
同时检查桌面和移动端视口