Menu
前端Playwright测试技能，提供UI自动化测试指导和生成能力
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
基于OpenAPI规范生成API文档，支持Swagger UI和ReDoc展示
提供后端单元测试指导和生成能力，支持JUnit 5、Mockito等框架
| name | common-frontend-playwright-test |
| description | 前端Playwright测试技能，提供UI自动化测试指导和生成能力 |
| trigger | 需要编写前端自动化测试时 |
| disable-when | 已有完善的前端测试或使用其他测试框架 |
| category | frontend |
| tags | ["testing","playwright","frontend","automation"] |
提供前端 UI 自动化测试能力，基于 Playwright 框架，帮助开发者编写高质量的端到端测试用例。
在以下情况调用此技能：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pageUrl | String | 是 | 目标页面 URL |
| testType | String | 否 | 测试类型（功能测试/视觉测试/A11y测试） |
| browser | String | 否 | 目标浏览器（chromium/firefox/webkit） |
| viewport | String | 否 | 视口大小（desktop/mobile/tablet） |
{
"status": "SUCCESS",
"pageUrl": "https://example.com/login",
"browser": "chromium",
"testCode": "生成的测试代码",
"testCases": [
{
"name": "登录页面测试",
"steps": ["步骤1", "步骤2", "步骤3"],
"expectedResult": "期望结果"
}
],
"locators": [
{
"name": "用户名输入框",
"locator": "input[name='username']",
"type": "text"
}
],
"suggestions": ["优化建议1", "优化建议2"]
}
页面分析 → 定位器识别 → 测试设计 → 测试编写 → 测试执行 → 结果验证 → 报告生成
| 检查项 | 说明 | 状态 |
|---|---|---|
| 定位器稳定 | 元素定位器是否稳定可靠 | ✅/❌ |
| 等待策略 | 是否正确使用等待机制 | ✅/❌ |
| 断言明确 | 断言是否清晰明确 | ✅/❌ |
| 测试独立 | 测试用例是否相互独立 | ✅/❌ |
| 异常处理 | 是否处理异常情况 | ✅/❌ |
| 截图验证 | 是否有必要的截图验证 | ✅/❌ |
| 性能考虑 | 是否考虑测试性能 | ✅/❌ |
| 文档完整 | 是否有必要的注释说明 | ✅/❌ |
import { test, expect } from '@playwright/test';
test.describe('登录页面', () => {
test('成功登录', async ({ page }) => {
// 导航到登录页面
await page.goto('/login');
// 填写表单
await page.locator('input[name="username"]').fill('test@example.com');
await page.locator('input[name="password"]').fill('password123');
// 点击登录按钮
await page.locator('button[type="submit"]').click();
// 验证跳转
await expect(page).toHaveURL('/dashboard');
await expect(page.locator('h1')).toHaveText('欢迎回来');
});
test('密码错误时显示错误消息', async ({ page }) => {
await page.goto('/login');
await page.locator('input[name="username"]').fill('test@example.com');
await page.locator('input[name="password"]').fill('wrongpassword');
await page.locator('button[type="submit"]').click();
// 验证错误消息
await expect(page.locator('.error-message')).toHaveText('用户名或密码错误');
});
});
| 优先级 | 定位方式 | 示例 | 说明 |
|---|---|---|---|
| 1 | role + name | page.getByRole('button', { name: '登录' }) | 最稳定的定位方式 |
| 2 | data-testid | page.locator('[data-testid="login-button"]') | 推荐的测试属性 |
| 3 | label | page.getByLabel('用户名') | 基于表单标签定位 |
| 4 | placeholder | page.getByPlaceholder('请输入邮箱') | 基于占位符定位 |
| 5 | text | page.getByText('提交') | 基于文本定位 |
| 6 | css | page.locator('button[type="submit"]') | CSS选择器 |
// 等待元素可见
await page.locator('button').waitFor({ state: 'visible' });
// 等待网络空闲
await page.waitForLoadState('networkidle');
// 等待特定请求完成
const [response] = await Promise.all([
page.waitForResponse('**/api/login'),
page.locator('button').click()
]);
test('页面视觉测试', async ({ page }) => {
await page.goto('/dashboard');
await expect(page).toHaveScreenshot('dashboard.png', {
fullPage: true,
maxDiffPixels: 100
});
});
import { AxeBuilder } from '@axe-core/playwright';
test('页面可访问性测试', async ({ page }) => {
await page.goto('/login');
const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
expect(accessibilityScanResults.violations).toEqual([]);
});
| 组件 | 职责 | 描述 |
|---|---|---|
| TestGenerator | 测试生成器 | 根据页面生成测试代码 |
| LocatorGenerator | 定位器生成器 | 生成元素定位器 |
| TestRunner | 测试运行器 | 执行测试用例 |
| ReportGenerator | 报告生成器 | 生成测试报告 |
| 变量名 | 说明 | 默认值 |
|---|---|---|
| PLAYWRIGHT_BROWSER | 默认浏览器 | chromium |
| PLAYWRIGHT_TIMEOUT | 测试超时时间 | 30000 |
playwright:
browser: chromium
timeout: 30000
viewport:
width: 1920
height: 1080
trace:
enabled: true
output-dir: test-results/traces