← ClaudeAtlas

playwright-opslisted

Playwright end-to-end testing operations - selectors, fixtures, network mocking, auth, parallelism, CI, visual regression, flake hunting. Use for: playwright, e2e test, end-to-end testing, browser test, getByRole, page object, storageState, trace viewer, flaky test, test sharding, visual regression, toHaveScreenshot, playwright config, codegen.
0xDarkMatter/claude-mods · ★ 22 · Testing & QA · score 74
Install: claude install-skill 0xDarkMatter/claude-mods
# Playwright Operations End-to-end testing with Playwright Test (`@playwright/test`, TS/JS). A Python flavor (`pytest-playwright`) exists with the same browser API but pytest-style fixtures — patterns here translate directly; runner config does not. ## Quick Start ```bash npm init playwright@latest # scaffold config + example test + GH Actions workflow npx playwright test # run all tests, all projects npx playwright test --project=chromium --grep "@smoke" npx playwright test --ui # interactive UI mode (watch, time-travel) npx playwright codegen https://app.local # record actions -> generated locators npx playwright show-report # open last HTML report npx playwright show-trace trace.zip # inspect a trace ``` ## Selector Strategy **Hierarchy — always prefer the highest tier that uniquely matches:** | Tier | Locator | When | |------|---------|------| | 1 | `page.getByRole('button', { name: 'Submit' })` | Anything with an ARIA role — buttons, links, headings, textboxes. Tests a11y for free | | 2 | `page.getByLabel('Password')` | Form fields with labels | | 3 | `page.getByPlaceholder('name@example.com')` | Inputs without labels (fix the label instead, when you can) | | 4 | `page.getByText('Welcome back')` | Non-interactive text content | | 5 | `page.getByTestId('cart-total')` | Stable hook when semantics don't disambiguate. Configure attribute via `testIdAttribute` | | 6 | `page.locator('css=...')` / `xpath=` | **Last resort.**