Playwright Skill
Browser automation and end-to-end testing with Playwright. Covers both Python (pytest-playwright) and TypeScript (@playwright/test).
Core Principles
- Auto-waiting by default -- Playwright waits for elements to be actionable before interacting. Do not add manual sleeps.
- Test isolation -- Every test gets a fresh browser context. Do not share state between tests.
- User-facing selectors -- Prefer
getByRole, getByText, getByLabel over CSS/XPath. These are resilient to DOM changes.
- Web-first assertions -- Use Playwright's built-in assertions that auto-retry, not raw
assert or expect from other libraries.
Quick Reference
Python Setup
pip install pytest-playwright
playwright install
TypeScript Setup
npm init playwright@latest
# or
npx playwright install
Run Tests
# Python
pytest --headed # visible browser
pytest --browser firefox # specific browser
pytest -k "test_login" # filter by name
# TypeScript
npx playwright test # all tests
npx playwright test --ui # interactive UI mode
npx playwright test --debug # step-through debugger
npx playwright test login.spec # specific file
WRONG vs CORRECT: Selector Strategy
WRONG -- brittle CSS selectors
# WRONG: tightly coupled to DOM structure
page.click("div.header > ul.nav > li:nth-child(3) > a")
page.fill("input#email-field-v2", "user@example.com")
CORRECT -- user-facing locators
# CORRECT: resilient to DOM changes
page.get_by_role("link", name="Settings").click()
page.get_by_label("Email").fill("user@example.com")
WRONG vs CORRECT: Waiting
WRONG -- manual sleep
// WRONG: arbitrary delay, still flaky
await page.click('#submit');
await page.waitForTimeout(3000);
expect(await page.textContent('.result')).toBe('Done');
CORRECT -- auto-retrying assertion
// CORRECT: retries until condition met or timeout
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Done')).toBeVisible();
Sub-files
| File |
Topic |
| testing-patterns.md |
Test structure, fixtures, assertions, parallel execution |
| selectors-and-waiting.md |
Locator strategies, auto-waiting, explicit waits, anti-patterns |
| automation-recipes.md |
Screenshots, PDF gen, network interception, auth, file uploads |
| accessibility.md |
axe-core integration, ARIA, keyboard navigation testing |
What You Get
- Reference documentation for Playwright browser automation covering both Python (pytest-playwright) and TypeScript (@playwright/test).
- Selector strategies, auto-waiting patterns, and assertion best practices with WRONG vs CORRECT examples.
- Recipes for common automation tasks: screenshots, PDF generation, network interception, auth flows, file uploads, and accessibility testing.
See also
tdd -- for TDD workflow when writing Playwright testsdesign-ux -- for UI/UX patterns informing what to test
1---2name: playwright3description: Browser automation and end-to-end testing with Playwright (Python and TypeScript). TRIGGER when: user asks about browser automation, e2e testing, web scraping with a browser, Playwright setup, page navigation, selectors, screenshots, PDF generation, network interception, file uploads, auth flows, mobile viewports, or accessibility testing with Playwright. Also when code imports playwright, @playwright/test, pytest-playwright, or references playwright.config. DO NOT TRIGGER when: user asks about Cypress, Selenium, Puppeteer, or other browser automation tools; unit testing without a browser; HTTP-only scraping (use requests/httpx); or general pytest usage without Playwright.4---56# Playwright Skill78Browser automation and end-to-end testing with Playwright. Covers both Python (pytest-playwright) and TypeScript (@playwright/test).910## Core Principles1112- **Auto-waiting by default** -- Playwright waits for elements to be actionable before interacting. Do not add manual sleeps.13- **Test isolation** -- Every test gets a fresh browser context. Do not share state between tests.14- **User-facing selectors** -- Prefer `getByRole`, `getByText`, `getByLabel` over CSS/XPath. These are resilient to DOM changes.15- **Web-first assertions** -- Use Playwright's built-in assertions that auto-retry, not raw `assert` or `expect` from other libraries.1617## Quick Reference1819### Python Setup2021```bash22pip install pytest-playwright23playwright install24```2526### TypeScript Setup2728```bash29npm init playwright@latest30# or31npx playwright install32```3334### Run Tests3536```bash37# Python38pytest --headed # visible browser39pytest --browser firefox # specific browser40pytest -k "test_login" # filter by name4142# TypeScript43npx playwright test # all tests44npx playwright test --ui # interactive UI mode45npx playwright test --debug # step-through debugger46npx playwright test login.spec # specific file47```4849## WRONG vs CORRECT: Selector Strategy5051### WRONG -- brittle CSS selectors5253```python54# WRONG: tightly coupled to DOM structure55page.click("div.header > ul.nav > li:nth-child(3) > a")56page.fill("input#email-field-v2", "user@example.com")57```5859### CORRECT -- user-facing locators6061```python62# CORRECT: resilient to DOM changes63page.get_by_role("link", name="Settings").click()64page.get_by_label("Email").fill("user@example.com")65```6667## WRONG vs CORRECT: Waiting6869### WRONG -- manual sleep7071```typescript72// WRONG: arbitrary delay, still flaky73await page.click('#submit');74await page.waitForTimeout(3000);75expect(await page.textContent('.result')).toBe('Done');76```7778### CORRECT -- auto-retrying assertion7980```typescript81// CORRECT: retries until condition met or timeout82await page.getByRole('button', { name: 'Submit' }).click();83await expect(page.getByText('Done')).toBeVisible();84```8586## Sub-files8788| File | Topic |89|------|-------|90| [testing-patterns.md](testing-patterns.md) | Test structure, fixtures, assertions, parallel execution |91| [selectors-and-waiting.md](selectors-and-waiting.md) | Locator strategies, auto-waiting, explicit waits, anti-patterns |92| [automation-recipes.md](automation-recipes.md) | Screenshots, PDF gen, network interception, auth, file uploads |93| [accessibility.md](accessibility.md) | axe-core integration, ARIA, keyboard navigation testing |9495## What You Get9697- Reference documentation for Playwright browser automation covering both Python (pytest-playwright) and TypeScript (@playwright/test).98- Selector strategies, auto-waiting patterns, and assertion best practices with WRONG vs CORRECT examples.99- Recipes for common automation tasks: screenshots, PDF generation, network interception, auth flows, file uploads, and accessibility testing.100101## See also102103- `tdd` -- for TDD workflow when writing Playwright tests104- `design-ux` -- for UI/UX patterns informing what to test
DROOdotFOO