e2e-testing

End-to-end testing with Playwright automates user flows by scripting browser interactions—clicks, form fills, navigation—and asserting UI state. Set up Playwright, define test files with page interactions and assertions, configure browser projects (Chromium, Firefox, WebKit), and run tests to validate complete journeys before production.

Playwright supports cross-browser testing through multiple projects configured for Chromium, Firefox, WebKit, and mobile simulators. Configure these in your test setup, and tests run against all specified browsers automatically, ensuring UI consistency across platforms.

Visual regression testing compares rendered pages against baseline screenshots to detect unintended visual changes. Playwright provides hooks and patterns to capture and assert visual state within test flows, catching layout, styling, and rendering issues before release.

TypeScript support is required for this Skill's test structure and patterns. While Playwright itself supports JavaScript, the Skill's implementation assumes TypeScript for type safety and scalable test organization, especially with page-object patterns.

Page-object patterns encapsulate page interactions and form logic into reusable components, reducing duplication. Structure tests to submit forms, intercept or validate API calls triggered by UI actions, and assert responses—enabling scalable, maintainable test suites for complex user journeys.

Playwright includes mobile simulator configurations that test responsive behavior on mobile viewports and devices. Configure mobile projects alongside desktop browsers to validate layouts, touch interactions, and mobile-specific UI across screen sizes and orientations.