UI Testing

Browser-based UI testing with Playwright, Puppeteer, Cypress, and accessibility tools.

Install Playwright

# Install Playwright and browsers
npm init playwright@latest
npx playwright install --with-deps

# Install specific browser only
npx playwright install chromium

Run Playwright tests

# Run all tests
npx playwright test

# Run specific test file
npx playwright test tests/login.spec.ts

# Run in headed mode (visible browser)
npx playwright test --headed

# Run in specific browser
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

# Run with debug inspector
npx playwright test --debug

Generate tests from URL

# Open codegen to record interactions
npx playwright codegen https://example.com

# Save generated test to a file
npx playwright codegen --output tests/generated.spec.ts https://example.com

# Codegen with specific viewport
npx playwright codegen --viewport-size=1280,720 https://example.com

Screenshot page

# Take a screenshot of a URL
npx playwright screenshot --full-page https://example.com screenshot.png

# Screenshot with specific viewport
npx playwright screenshot --viewport-size=1280,720 https://example.com screenshot.png

Visual regression

# Run Playwright tests with snapshot comparison
npx playwright test --update-snapshots

# Compare screenshots (expects toHaveScreenshot in tests)
npx playwright test tests/visual.spec.ts

# Show visual diff report
npx playwright show-report

Run Cypress tests

# Open Cypress interactive runner
npx cypress open

# Run Cypress headless
npx cypress run

# Run specific spec
npx cypress run --spec cypress/e2e/login.cy.ts

# Run in specific browser
npx cypress run --browser chrome

Accessibility audit with axe-core

# Install axe-core CLI
npm install -g @axe-core/cli

# Run accessibility audit on a URL
npx @axe-core/cli https://example.com

# Audit with specific rules
npx @axe-core/cli https://example.com --rules wcag2a,wcag2aa

# Playwright + axe-core (requires @axe-core/playwright)
npx playwright test tests/accessibility.spec.ts