Loading...
Loading...
UI testing with Playwright and Puppeteer -- browser automation, visual regression, screenshots, and accessibility audits.
npx skill4agent add thinkfleetai/thinkfleet-engine testing-ui# Install Playwright and browsers
npm init playwright@latest
npx playwright install --with-deps
# Install specific browser only
npx playwright install chromium# 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# 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# 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# 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# 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# 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