playwright-expert

Playwright Expert 是一个面向 Playwright 的端到端（E2E）测试专家技能，专注于构建健壮、可维护的浏览器自动化测试。

用途 该技能适用于以下场景：使用 Playwright 编写 E2E 测试、搭建测试基础设施、调试不稳定的浏览器测试。可调用它来编写测试脚本、创建页面对象等。

核心工作流

1. 分析需求：识别需要测试的用户流程。
2. 搭建：使用合适的设置配置 Playwright。
3. 编写测试：采用 POM 模式、正确的选择器与自动等待。
4. 调试：运行测试 → 检查 trace → 定位问题 → 修复 → 验证修复。
5. 集成：加入 CI/CD 流水线。

参考指南 根据上下文加载详细指导，涵盖以下主题：选择器（编写选择器、定位器优先级）、页面对象（POM 模式、fixtures）、API 模拟（路由拦截、mock）、配置（playwright.config.ts 设置）、调试（不稳定测试、trace viewer）。

约束 必须做到：尽可能使用基于角色的选择器；利用自动等待（不要添加任意超时）；保持测试独立（无共享状态）；使用页面对象模型以提升可维护性；启用 trace/截图以便调试；并行运行测试。 必须避免：使用 waitForTimeout()（应使用正确的等待方式）；依赖 CSS 类选择器（脆弱）；在测试之间共享状态；忽略不稳定的测试；无充分理由使用 first()、nth()。

代码示例 基于角色的选择器（正确）与 CSS 类选择器（脆弱）的对比： // ✅ 基于角色的选择器——对样式变化有韧性 await page.getByRole('button', { name: 'Submit' }).click(); await page.getByLabel('Email address').fill('user@example.com');

// ❌ CSS 类选择器——重构后即失效 await page.locator('.btn-primary.submit-btn').click(); await page.locator('.email-input').fill('user@example.com');

页面对象模型与测试文件示例： // pages/LoginPage.ts import { type Page, type Locator } from '@playwright/test';

export class LoginPage { readonly page: Page; readonly emailInput: Locator; readonly passwordInput: Locator; readonly submitButton: Locator; readonly errorMessage: Locator;

constructor(page: Page) { this.page = page; this.emailInput = page.getByLabel('Email address'); this.passwordInput = page.getByLabel('Password'); this.submitButton = page.getByRole('button', { name: 'Sign in' }); this.errorMessage = page.getByRole('alert'); }

async goto() { await this.page.goto('/login'); }

async login(email: string, password: string) { await this.emailInput.fill(email); await this.passwordInput.fill(password); await this.submitButton.click(); } }

// tests/login.spec.ts import { test, expect } from '@playwright/test'; import { LoginPage } from '../pages/LoginPage';

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

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

test('successful login redirects to dashboard', async ({ page }) => { await loginPage.login('user@example.com', 'correct-password'); await expect(page).toHaveURL('/dashboard'); });

test('invalid credentials shows error', async () => { await loginPage.login('user@example.com', 'wrong-password'); await expect(loginPage.errorMessage).toBeVisible(); await expect(loginPage.errorMessage).toContainText('Invalid credentials'); }); });

不稳定测试的调试工作流： // 1. 启用 trace 运行失败的测试 // playwright.config.ts use: { trace: 'on-first-retry', screenshot: 'only-on-failure', }

// 2. 带重试重新运行以捕获 trace // npx playwright test --retries=2

// 3. 打开 trace viewer 检查时间线 // npx playwright show-trace test-results/.../trace.zip

// 4. 常见修复——用正确的等待替换任意超时 // ❌ 不稳定 await page.waitForTimeout(2000); await page.getByRole('button', { name: 'Save' }).click();

// ✅ 可靠——等待元素状态 await page.getByRole('button', { name: 'Save' }).waitFor({ state: 'visible' }); await page.getByRole('button', { name: 'Save' }).click();

// 5. 验证修复——运行测试 10 次确认稳定性 // npx playwright test --repeat-each=10

输出模板 实现 Playwright 测试时，应提供：页面对象类、带正确断言的测试文件、如需要的 fixture 设置、配置建议。

知识参考 Playwright、页面对象模型、自动等待、定位器、fixtures、API 模拟、trace viewer、视觉比较、并行执行、CI/CD 集成。

限制 资料未提供该技能的具体收费、价格、平台支持范围及安装命令等信息。