playwright-tests_skill

Overview

This skill provides end-to-end browser testing with Playwright for full-stack web AI apps, using production-ready patterns and step-by-step recipe guidance. It bundles practical test patterns for user interactions, form validation, navigation, and visual feedback across real browsers. The goal is fast, reliable browser automation that integrates with TypeScript projects and common UI component libraries.

How this skill works

The skill installs and configures Playwright test runners and recommended TypeScript settings, then applies curated test recipes that exercise UI flows and edge cases. It includes example test suites for clicks, form entry, routing, authentication flows, and visual snapshots. A centralized recipe resource provides structured guidance and commands to fetch the configuration and sample tests.

When to use it

• Validate critical user flows across Chromium, WebKit, and Firefox before releases
• Automate regression tests for form validations and error states
• Verify navigation, routing, and client-side state transitions in complex SPAs
• Capture visual regressions with snapshot testing for UI components
• Integrate reliable e2e checks into CI pipelines for production readiness

Best practices

• Write focused tests that assert one user journey or behavior per test
• Use fixtures and page objects to reuse setup and reduce flakiness
• Run headless tests in CI and optionally run headed locally for debugging
• Keep test selectors stable by using data-test attributes instead of CSS classes
• Limit external network dependencies with request interception or test doubles

Example use cases

• End-to-end signup flow: fill form, validate errors, confirm email step, and land on dashboard
• Shopping cart checkout: add items, update quantities, complete payment flow, and verify order summary
• Auth guard checks: assert protected routes redirect to login and role-based UI changes
• Visual regression: capture snapshots of critical pages and fail CI on layout drift
• Accessibility smoke tests: ensure basic ARIA roles, labels, and keyboard navigation