qa/e2e-playwright
Playwright E2E 测试完整方法论，涵盖项目初始化、Page Object Model、认证复用、API Mock、视觉回归、多浏览器测试、CI 集成和调试技巧
npx skills add echoVic/boss-skill --skill e2e-playwright --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Guides the implementation of end-to-end tests using Playwright, detailing project initialization, a Page Object Model (POM) structure, authentication reuse strategies, API mocking, visual regression testing, multi-browser testing, and CI integration. It provides concrete example code snippets and directory layout to organize fixtures, pages, specs, helpers, and test results.
How it works
- Project initialization: shows commands to create or add Playwright tests and config files, including a detailed playwright.config.ts with settings for testDir, outputDir, timeouts, retries, reporters, globalUse, and multi-project browser configurations.
- Page Object Model: defines patterns for creating a LoginPage and reusable components (e.g., NavbarComponent) with clearly labeled methods (goto, login, logout, etc.) and a recommended locator priority order (getByRole, getByLabel, getByPlaceholder, etc.).
- Authentication reuse: demonstrates Global Setup (login once and store storageState to admin.json) and per-project use with storageState; also shows multi-role authentication fixtures creating adminPage and userPage contexts.
- API Mocking: instructs using page.route to intercept API requests, provide mock responses, simulate errors, and mix mock with real APIs; includes a rule about marking core paths as unverified when mocked.
- Visual regression: includes examples for taking screenshots, updating baselines, and notes about handling dynamic content and cross-OS differences.
- Multi-browser and mobile: provides configuration examples for projects (chromium, firefox, webkit, mobile-chrome, mobile-safari, tablet) and running tests by project; includes responsive assertions for mobile vs desktop.
- Test data management and CI: covers seeding and cleanup via API, global setup/teardown hooks, and a GitHub Actions workflow to install, build, run, and publish artifacts; includes a Docker image reference for Playwright browsers.
When to use it
- When Web projects require end-to-end tests and need authentication flow validation, multi-browser coverage, or visual regression.
- When gate rules require E2E verification and there is a need for API mocking or fixtures.
- When CI/CD pipelines must run E2E tests and produce reports/traces.
What it can touch
- Uses Playwright tooling and APIs such as:
- page.route for API mocking
- test and expect APIs from @playwright/test
- storageState for authentication persistence
- globalSetup/globalTeardown for test data seeding/cleanup
- various device profiles via devices in Playwright config
- commands in scripts like npm run dev, npm i, npx playwright test
- References files and directories including: e2e/playwright-report, e2e/test-results, e2e/.auth/admin.json, e2e/.auth/user.json, e2e/pages, e2e/specs, e2e/helpers, and CI workflow at .github/workflows/e2e.yml.
Caveats
- Requires a shared/tech-stack-detection dependency to be present.
- Some sections rely on specific project structure (e.g., e2e/pages and e2e/specs) and environment setup (e.g., a running dev server at http://localhost:3000).
- Mocking rules state core user paths must be marked as unverified when only mocked as evidence for Boss gate rules.
- JSON-based and TypeScript code examples assume standard Playwright usage and may need adaptation for non-standard projects.
# Playwright E2E 测试方法论 ## 适用场景 - Web 项目需要编写端到端测试 - 门禁（Gate 1）要求 E2E 测试通过 - 需要覆盖关键用户流程的自动化验证 - 需要多浏览器/多视口兼容性验证 - 需要视觉回归测试 --- ## 1. 项目初始化 ### 1.1 安装 ```bash # 新项目初始化（推荐） npm init playwright@latest # 已有项目添加 npm install -D @playwright/test npx playwright install ``` ### 1.2 配置文件（`playwright.config.ts`） ```typescript import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './e2e', // 测试产物目录 outputDir: './e2e/test-results', // 全局超时 timeout: 30_000, expect: { timeout: 5_000 }, // 并行执行 fullyParallel: true, workers: process.env.CI ? 1 : undefined, // 失败重试（CI 中重试一次减少 flaky） retries: process.env.CI ? 1 : 0, // 报告 reporter: [ ['html', { outputFolder: './e2e/playwright-report' }], ['json', { outputFile: './e2e/test-results/results.json' }], // CI 中额外输出到 stdout ...(process.env.CI ? [['github'] as const] : []), ], // 全局配置 use: { baseURL: process.env.BASE_URL || 'http://localhost:3000', // 失败时自动截图 screenshot: 'only-on-failure', // 失败时录制 trace trace: 'on-first-retry', // 失败时录制视频 video: 'on-first-retry', }, // 多浏览器 + 移动端视口 projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { n
- 适用场景
- 1. 项目初始化
- 1.1 安装
- 1.2 配置文件（playwright.config.ts）
- 1.3 目录结构
- 2. Page Object Model（POM）
- 2.1 核心原则
- 2.2 基础 POM
- 2.3 组件 POM
- 2.4 定位器优先级
- 3. 认证状态复用
- 3.1 Global Setup 方式
- 3.2 多角色认证
- 4. API Mocking
npm init playwright@latest npm install -D @playwright/test npx playwright install npx playwright test --update-snapshots npx playwright test homepage.spec.ts --update-snapshots npx playwright test --project=chromium npx playwright test --project=mobile-chrome --project=mobile-safari npx playwright test --ui npx playwright show-trace e2e/test-results/specs-auth-login-spec-ts/trace.zip npx playwright test --debug
What does the qa/e2e-playwright skill do?
Playwright E2E 测试完整方法论，涵盖项目初始化、Page Object Model、认证复用、API Mock、视觉回归、多浏览器测试、CI 集成和调试技巧
How do I install it?
Run `npx skills add echoVic/boss-skill --skill e2e-playwright --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From echoVic/boss-skill, a repository with 557 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.