End-to-End Testing

Understand what E2E tests cover, when to write them, how Playwright automates real browsers, and how to install and configure Playwright for a Next.js project.

Master Playwright's locator API to find elements by ARIA role, label, text, and test ID. Learn the semantic locator hierarchy that makes tests resilient to CSS and markup refactoring.

Simulate real user interactions in Playwright: fill forms, handle checkboxes and dropdowns, upload files, press keyboard shortcuts, accept dialogs, and handle new tab navigation.

Apply the Page Object Model pattern to encapsulate Playwright locators and actions in reusable TypeScript classes, keeping test files focused on behaviour rather than DOM details.

Avoid logging in on every test by persisting authentication state with Playwright's storageState, use API-based login for speed, and test multiple user roles with separate browser contexts.

Intercept outgoing network requests in Playwright to mock API responses, assert on request payloads, simulate slow or failed networks, and test offline behaviour.

Test across Chromium, Firefox, and WebKit with Playwright projects, verify responsive layouts at multiple viewport sizes, and detect browser-specific rendering differences.

Capture and compare UI screenshots to detect unintended visual changes, configure pixel-diff thresholds, mask dynamic content, and integrate visual testing into CI workflows.

Use Playwright's trace viewer to debug failing tests, make direct API calls with the request fixture, test React and Vue components in isolation with Playwright Component Testing.

Diagnose and eliminate flaky Playwright tests by identifying timing issues, selector brittleness, shared state pollution, and network dependency — and build a suite that passes reliably every run.

Configure GitHub Actions to run Playwright tests with sharding, upload trace artifacts on failure, merge distributed reports, and gate pull request merges on passing E2E tests.

Apply professional E2E testing judgment: choose the right scenarios for E2E vs integration tests, keep suites lean and fast, write tests that survive application evolution, and establish team E2E conventions.