E2E Testing Patterns

Build reliable, fast, and maintainable end-to-end test suites that provide confidence to ship code quickly and catch regressions before users do.

When to Use This Skill

• Implementing end-to-end test automation

• Debugging flaky or unreliable tests

• Testing critical user workflows

• Setting up CI/CD test pipelines

• Testing across multiple browsers

• Validating accessibility requirements

• Testing responsive designs

• Establishing E2E testing standards

Core Concepts

1. E2E Testing Fundamentals

What to Test with E2E:

• Critical user journeys (login, checkout, signup)

• Complex interactions (drag-and-drop, multi-step forms)

• Cross-browser compatibility

• Real API integration

• Authentication flows

What NOT to Test with E2E:

• Unit-level logic (use unit tests)

• API contracts (use integration tests)

• Edge cases (too slow)

• Internal implementation details

2. Test Philosophy

The Testing Pyramid:

    /\
   /E2E\         ← Few, focused on critical paths
  /─────\
 /Integr\        ← More, test component interactions
/────────\

/Unit Tests\ ← Many, fast, isolated /────────────\

Best Practices:

• Test user behavior, not implementation

• Keep tests independent

• Make tests deterministic

• Optimize for speed

• Use data-testid, not CSS selectors

Playwright Patterns

Setup and Configuration

// playwright.config.ts import { defineConfig, devices } from "@playwright/test";

export default defineConfig({ testDir: "./e2e", timeout: 30000, expect: { timeout: 5000, }, fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: [["html"], ["junit", { outputFile: "results.xml" }]], use: { baseURL: "http://localhost:3000", trace: "on-first-retry", screenshot: "only-on-failure", video: "retain-on-failure", }, projects: [ { name: "chromium", use: { ...devices["Desktop Chrome"] } }, { name: "firefox", use: { ...devices["Desktop Firefox"] } }, { name: "webkit", use: { ...devices["Desktop Safari"] } }, { name: "mobile", use: { ...devices["iPhone 13"] } }, ], });

Pattern 1: Page Object Model

// pages/LoginPage.ts import { Page, Locator } from "@playwright/test";

export class LoginPage { readonly page: Page; readonly emailInput: Locator; readonly passwordInput: Locator; readonly loginButton: Locator; readonly errorMessage: Locator;

constructor(page: Page) { this.page = page; this.emailInput = page.getByLabel("Email"); this.passwordInput = page.getByLabel("Password"); this.loginButton = page.getByRole("button", { name: "Login" }); this.errorMessage = page.getByRole("alert"); }

async goto() { await this.page.goto("/login"); }

async login(email: string, password: string) { await this.emailInput.fill(email); await this.passwordInput.fill(password); await this.loginButton.click(); }

async getErrorMessage(): Promise<string> { return (await this.errorMessage.textContent()) ?? ""; } }

// Test using Page Object import { test, expect } from "@playwright/test"; import { LoginPage } from "./pages/LoginPage";

test("successful login", async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.goto(); await loginPage.login("user@example.com", "password123");

await expect(page).toHaveURL("/dashboard"); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible(); });

test("failed login shows error", async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.goto(); await loginPage.login("invalid@example.com", "wrong");

const error = await loginPage.getErrorMessage(); expect(error).toContain("Invalid credentials"); });

Pattern 2: Fixtures for Test Data

// fixtures/test-data.ts import { test as base } from "@playwright/test";

type TestData = { testUser: { email: string; password: string; name: string; }; adminUser: { email: string; password: string; }; };

export const test = base.extend<TestData>({ testUser: async ({}, use) => { const user = { email: test-${Date.now()}@example.com, password: "Test123!@#", name: "Test User", }; // Setup: Create user in database await createTestUser(user); await use(user); // Teardown: Clean up user await deleteTestUser(user.email); },

adminUser: async ({}, use) => { await use({ email: "admin@example.com", password: process.env.ADMIN_PASSWORD!, }); }, });

// Usage in tests import { test } from "./fixtures/test-data";

test("user can update profile", async ({ page, testUser }) => { await page.goto("/login"); await page.getByLabel("Email").fill(testUser.email); await page.getByLabel("Password").fill(testUser.password); await page.getByRole("button", { name: "Login" }).click();

await page.goto("/profile"); await page.getByLabel("Name").fill("Updated Name"); await page.getByRole("button", { name: "Save" }).click();

await expect(page.getByText("Profile updated")).toBeVisible(); });

Pattern 3: Waiting Strategies

// ❌ Bad: Fixed timeouts await page.waitForTimeout(3000); // Flaky!

// ✅ Good: Wait for specific conditions await page.waitForLoadState("networkidle"); await page.waitForURL("/dashboard"); await page.waitForSelector('[data-testid="user-profile"]');

// ✅ Better: Auto-waiting with assertions await expect(page.getByText("Welcome")).toBeVisible(); await expect(page.getByRole("button", { name: "Submit" })).toBeEnabled();

// Wait for API response const responsePromise = page.waitForResponse( (response) => response.url().includes("/api/users") && response.status() === 200, ); await page.getByRole("button", { name: "Load Users" }).click(); const response = await responsePromise; const data = await response.json(); expect(data.users).toHaveLength(10);

// Wait for multiple conditions await Promise.all([ page.waitForURL("/success"), page.waitForLoadState("networkidle"), expect(page.getByText("Payment successful")).toBeVisible(), ]);

Pattern 4: Network Mocking and Interception

// Mock API responses test("displays error when API fails", async ({ page }) => { await page.route("**/api/users", (route) => { route.fulfill({ status: 500, contentType: "application/json", body: JSON.stringify({ error: "Internal Server Error" }), }); });

await page.goto("/users"); await expect(page.getByText("Failed to load users")).toBeVisible(); });

// Intercept and modify requests test("can modify API request", async ({ page }) => { await page.route("**/api/users", async (route) => { const request = route.request(); const postData = JSON.parse(request.postData() || "{}");

// Modify request
postData.role = "admin";

await route.continue({
  postData: JSON.stringify(postData),
});

});

// Test continues... });

// Mock third-party services test("payment flow with mocked Stripe", async ({ page }) => { await page.route("/api/stripe/", (route) => { route.fulfill({ status: 200, body: JSON.stringify({ id: "mock_payment_id", status: "succeeded", }), }); });

// Test payment flow with mocked response });

Cypress Patterns

Setup and Configuration

// cypress.config.ts import { defineConfig } from "cypress";

export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", viewportWidth: 1280, viewportHeight: 720, video: false, screenshotOnRunFailure: true, defaultCommandTimeout: 10000, requestTimeout: 10000, setupNodeEvents(on, config) { // Implement node event listeners }, }, });

Pattern 1: Custom Commands

// cypress/support/commands.ts declare global { namespace Cypress { interface Chainable { login(email: string, password: string): Chainable<void>; createUser(userData: UserData): Chainable<User>; dataCy(value: string): Chainable<JQuery<HTMLElement>>; } } }

Cypress.Commands.add("login", (email: string, password: string) => { cy.visit("/login"); cy.get('[data-testid="email"]').type(email); cy.get('[data-testid="password"]').type(password); cy.get('[data-testid="login-button"]').click(); cy.url().should("include", "/dashboard"); });

Cypress.Commands.add("createUser", (userData: UserData) => { return cy.request("POST", "/api/users", userData).its("body"); });

Cypress.Commands.add("dataCy", (value: string) => { return cy.get([data-cy="${value}"]); });

// Usage cy.login("user@example.com", "password"); cy.dataCy("submit-button").click();

Pattern 2: Cypress Intercept

// Mock API calls cy.intercept("GET", "/api/users", { statusCode: 200, body: [ { id: 1, name: "John" }, { id: 2, name: "Jane" }, ], }).as("getUsers");

cy.visit("/users"); cy.wait("@getUsers"); cy.get('[data-testid="user-list"]').children().should("have.length", 2);

// Modify responses cy.intercept("GET", "/api/users", (req) => { req.reply((res) => { // Modify response res.body.users = res.body.users.slice(0, 5); res.send(); }); });

// Simulate slow network cy.intercept("GET", "/api/data", (req) => { req.reply((res) => { res.delay(3000); // 3 second delay res.send(); }); });

Advanced Patterns

Pattern 1: Visual Regression Testing

// With Playwright import { test, expect } from "@playwright/test";

test("homepage looks correct", async ({ page }) => { await page.goto("/"); await expect(page).toHaveScreenshot("homepage.png", { fullPage: true, maxDiffPixels: 100, }); });

test("button in all states", async ({ page }) => { await page.goto("/components");

const button = page.getByRole("button", { name: "Submit" });

// Default state await expect(button).toHaveScreenshot("button-default.png");

// Hover state await button.hover(); await expect(button).toHaveScreenshot("button-hover.png");

// Disabled state await button.evaluate((el) => el.setAttribute("disabled", "true")); await expect(button).toHaveScreenshot("button-disabled.png"); });

Pattern 2: Parallel Testing with Sharding

// playwright.config.ts export default defineConfig({ projects: [ { name: "shard-1", use: { ...devices["Desktop Chrome"] }, grepInvert: /@slow/, shard: { current: 1, total: 4 }, }, { name: "shard-2", use: { ...devices["Desktop Chrome"] }, shard: { current: 2, total: 4 }, }, // ... more shards ], });

// Run in CI // npx playwright test --shard=1/4 // npx playwright test --shard=2/4

Pattern 3: Accessibility Testing

// Install: npm install @axe-core/playwright import { test, expect } from "@playwright/test"; import AxeBuilder from "@axe-core/playwright";

test("page should not have accessibility violations", async ({ page }) => { await page.goto("/");

const accessibilityScanResults = await new AxeBuilder({ page }) .exclude("#third-party-widget") .analyze();

expect(accessibilityScanResults.violations).toEqual([]); });

test("form is accessible", async ({ page }) => { await page.goto("/signup");

const results = await new AxeBuilder({ page }).include("form").analyze();

expect(results.violations).toEqual([]); });

Best Practices

• Use Data Attributes: data-testid or data-cy for stable selectors

• Avoid Brittle Selectors: Don't rely on CSS classes or DOM structure

• Test User Behavior: Click, type, see - not implementation details

• Keep Tests Independent: Each test should run in isolation

• Clean Up Test Data: Create and destroy test data in each test

• Use Page Objects: Encapsulate page logic

• Meaningful Assertions: Check actual user-visible behavior

• Optimize for Speed: Mock when possible, parallel execution

// ❌ Bad selectors cy.get(".btn.btn-primary.submit-button").click(); cy.get("div > form > div:nth-child(2) > input").type("text");

// ✅ Good selectors cy.getByRole("button", { name: "Submit" }).click(); cy.getByLabel("Email address").type("user@example.com"); cy.get('[data-testid="email-input"]').type("user@example.com");

Common Pitfalls

• Flaky Tests: Use proper waits, not fixed timeouts

• Slow Tests: Mock external APIs, use parallel execution

• Over-Testing: Don't test every edge case with E2E

• Coupled Tests: Tests should not depend on each other

• Poor Selectors: Avoid CSS classes and nth-child

• No Cleanup: Clean up test data after each test

• Testing Implementation: Test user behavior, not internals

Debugging Failing Tests

// Playwright debugging // 1. Run in headed mode npx playwright test --headed

// 2. Run in debug mode npx playwright test --debug

// 3. Use trace viewer await page.screenshot({ path: 'screenshot.png' }); await page.video()?.saveAs('video.webm');

// 4. Add test.step for better reporting test('checkout flow', async ({ page }) => { await test.step('Add item to cart', async () => { await page.goto('/products'); await page.getByRole('button', { name: 'Add to Cart' }).click(); });

await test.step('Proceed to checkout', async () => {
    await page.goto('/cart');
    await page.getByRole('button', { name: 'Checkout' }).click();
});

});

// 5. Inspect page state await page.pause(); // Pauses execution, opens inspector