1# e2e-testing-patterns — detailed patterns and worked examples
2 
3## Playwright Patterns
4 
5### Setup and Configuration
6 
7```typescript
8// playwright.config.ts
9import { defineConfig, devices } from "@playwright/test";
10 
11export default defineConfig({
12  testDir: "./e2e",
13  timeout: 30000,
14  expect: {
15    timeout: 5000,
16  },
17  fullyParallel: true,
18  forbidOnly: !!process.env.CI,
19  retries: process.env.CI ? 2 : 0,
20  workers: process.env.CI ? 1 : undefined,
21  reporter: [["html"], ["junit", { outputFile: "results.xml" }]],
22  use: {
23    baseURL: "http://localhost:3000",
24    trace: "on-first-retry",
25    screenshot: "only-on-failure",
26    video: "retain-on-failure",
27  },
28  projects: [
29    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
30    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
31    { name: "webkit", use: { ...devices["Desktop Safari"] } },
32    { name: "mobile", use: { ...devices["iPhone 13"] } },
33  ],
34});
35```
36 
37### Pattern 1: Page Object Model
38 
39```typescript
40// pages/LoginPage.ts
41import { Page, Locator } from "@playwright/test";
42 
43export class LoginPage {
44  readonly page: Page;
45  readonly emailInput: Locator;
46  readonly passwordInput: Locator;
47  readonly loginButton: Locator;
48  readonly errorMessage: Locator;
49 
50  constructor(page: Page) {
51    this.page = page;
52    this.emailInput = page.getByLabel("Email");
53    this.passwordInput = page.getByLabel("Password");
54    this.loginButton = page.getByRole("button", { name: "Login" });
55    this.errorMessage = page.getByRole("alert");
56  }
57 
58  async goto() {
59    await this.page.goto("/login");
60  }
61 
62  async login(email: string, password: string) {
63    await this.emailInput.fill(email);
64    await this.passwordInput.fill(password);
65    await this.loginButton.click();
66  }
67 
68  async getErrorMessage(): Promise<string> {
69    return (await this.errorMessage.textContent()) ?? "";
70  }
71}
72 
73// Test using Page Object
74import { test, expect } from "@playwright/test";
75import { LoginPage } from "./pages/LoginPage";
76 
77test("successful login", async ({ page }) => {
78  const loginPage = new LoginPage(page);
79  await loginPage.goto();
80  await loginPage.login("[email protected]", "password123");
81 
82  await expect(page).toHaveURL("/dashboard");
83  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
84});
85 
86test("failed login shows error", async ({ page }) => {
87  const loginPage = new LoginPage(page);
88  await loginPage.goto();
89  await loginPage.login("[email protected]", "wrong");
90 
91  const error = await loginPage.getErrorMessage();
92  expect(error).toContain("Invalid credentials");
93});
94```
95 
96### Pattern 2: Fixtures for Test Data
97 
98```typescript
99// fixtures/test-data.ts
100import { test as base } from "@playwright/test";
101 
102type TestData = {
103  testUser: {
104    email: string;
105    password: string;
106    name: string;
107  };
108  adminUser: {
109    email: string;
110    password: string;
111  };
112};
113 
114export const test = base.extend<TestData>({
115  testUser: async ({}, use) => {
116    const user = {
117      email: `test-${Date.now()}@example.com`,
118      password: "Test123!@#",
119      name: "Test User",
120    };
121    // Setup: Create user in database
122    await createTestUser(user);
123    await use(user);
124    // Teardown: Clean up user
125    await deleteTestUser(user.email);
126  },
127 
128  adminUser: async ({}, use) => {
129    await use({
130      email: "[email protected]",
131      password: process.env.ADMIN_PASSWORD!,
132    });
133  },
134});
135 
136// Usage in tests
137import { test } from "./fixtures/test-data";
138 
139test("user can update profile", async ({ page, testUser }) => {
140  await page.goto("/login");
141  await page.getByLabel("Email").fill(testUser.email);
142  await page.getByLabel("Password").fill(testUser.password);
143  await page.getByRole("button", { name: "Login" }).click();
144 
145  await page.goto("/profile");
146  await page.getByLabel("Name").fill("Updated Name");
147  await page.getByRole("button", { name: "Save" }).click();
148 
149  await expect(page.getByText("Profile updated")).toBeVisible();
150});
151```
152 
153### Pattern 3: Waiting Strategies
154 
155```typescript
156// ❌ Bad: Fixed timeouts
157await page.waitForTimeout(3000); // Flaky!
158 
159// ✅ Good: Wait for specific conditions
160await page.waitForLoadState("networkidle");
161await page.waitForURL("/dashboard");
162await page.waitForSelector('[data-testid="user-profile"]');
163 
164// ✅ Better: Auto-waiting with assertions
165await expect(page.getByText("Welcome")).toBeVisible();
166await expect(page.getByRole("button", { name: "Submit" })).toBeEnabled();
167 
168// Wait for API response
169const responsePromise = page.waitForResponse(
170  (response) =>
171    response.url().includes("/api/users") && response.status() === 200,
172);
173await page.getByRole("button", { name: "Load Users" }).click();
174const response = await responsePromise;
175const data = await response.json();
176expect(data.users).toHaveLength(10);
177 
178// Wait for multiple conditions
179await Promise.all([
180  page.waitForURL("/success"),
181  page.waitForLoadState("networkidle"),
182  expect(page.getByText("Payment successful")).toBeVisible(),
183]);
184```
185 
186### Pattern 4: Network Mocking and Interception
187 
188```typescript
189// Mock API responses
190test("displays error when API fails", async ({ page }) => {
191  await page.route("**/api/users", (route) => {
192    route.fulfill({
193      status: 500,
194      contentType: "application/json",
195      body: JSON.stringify({ error: "Internal Server Error" }),
196    });
197  });
198 
199  await page.goto("/users");
200  await expect(page.getByText("Failed to load users")).toBeVisible();
201});
202 
203// Intercept and modify requests
204test("can modify API request", async ({ page }) => {
205  await page.route("**/api/users", async (route) => {
206    const request = route.request();
207    const postData = JSON.parse(request.postData() || "{}");
208 
209    // Modify request
210    postData.role = "admin";
211 
212    await route.continue({
213      postData: JSON.stringify(postData),
214    });
215  });
216 
217  // Test continues...
218});
219 
220// Mock third-party services
221test("payment flow with mocked Stripe", async ({ page }) => {
222  await page.route("**/api/stripe/**", (route) => {
223    route.fulfill({
224      status: 200,
225      body: JSON.stringify({
226        id: "mock_payment_id",
227        status: "succeeded",
228      }),
229    });
230  });
231 
232  // Test payment flow with mocked response
233});
234```
235 
236## Cypress Patterns
237 
238### Setup and Configuration
239 
240```typescript
241// cypress.config.ts
242import { defineConfig } from "cypress";
243 
244export default defineConfig({
245  e2e: {
246    baseUrl: "http://localhost:3000",
247    viewportWidth: 1280,
248    viewportHeight: 720,
249    video: false,
250    screenshotOnRunFailure: true,
251    defaultCommandTimeout: 10000,
252    requestTimeout: 10000,
253    setupNodeEvents(on, config) {
254      // Implement node event listeners
255    },
256  },
257});
258```
259 
260### Pattern 1: Custom Commands
261 
262```typescript
263// cypress/support/commands.ts
264declare global {
265  namespace Cypress {
266    interface Chainable {
267      login(email: string, password: string): Chainable<void>;
268      createUser(userData: UserData): Chainable<User>;
269      dataCy(value: string): Chainable<JQuery<HTMLElement>>;
270    }
271  }
272}
273 
274Cypress.Commands.add("login", (email: string, password: string) => {
275  cy.visit("/login");
276  cy.get('[data-testid="email"]').type(email);
277  cy.get('[data-testid="password"]').type(password);
278  cy.get('[data-testid="login-button"]').click();
279  cy.url().should("include", "/dashboard");
280});
281 
282Cypress.Commands.add("createUser", (userData: UserData) => {
283  return cy.request("POST", "/api/users", userData).its("body");
284});
285 
286Cypress.Commands.add("dataCy", (value: string) => {
287  return cy.get(`[data-cy="${value}"]`);
288});
289 
290// Usage
291cy.login("[email protected]", "password");
292cy.dataCy("submit-button").click();
293```
294 
295### Pattern 2: Cypress Intercept
296 
297```typescript
298// Mock API calls
299cy.intercept("GET", "/api/users", {
300  statusCode: 200,
301  body: [
302    { id: 1, name: "John" },
303    { id: 2, name: "Jane" },
304  ],
305}).as("getUsers");
306 
307cy.visit("/users");
308cy.wait("@getUsers");
309cy.get('[data-testid="user-list"]').children().should("have.length", 2);
310 
311// Modify responses
312cy.intercept("GET", "/api/users", (req) => {
313  req.reply((res) => {
314    // Modify response
315    res.body.users = res.body.users.slice(0, 5);
316    res.send();
317  });
318});
319 
320// Simulate slow network
321cy.intercept("GET", "/api/data", (req) => {
322  req.reply((res) => {
323    res.delay(3000); // 3 second delay
324    res.send();
325  });
326});
327```
328 
329## Advanced Patterns
330 
331### Pattern 1: Visual Regression Testing
332 
333```typescript
334// With Playwright
335import { test, expect } from "@playwright/test";
336 
337test("homepage looks correct", async ({ page }) => {
338  await page.goto("/");
339  await expect(page).toHaveScreenshot("homepage.png", {
340    fullPage: true,
341    maxDiffPixels: 100,
342  });
343});
344 
345test("button in all states", async ({ page }) => {
346  await page.goto("/components");
347 
348  const button = page.getByRole("button", { name: "Submit" });
349 
350  // Default state
351  await expect(button).toHaveScreenshot("button-default.png");
352 
353  // Hover state
354  await button.hover();
355  await expect(button).toHaveScreenshot("button-hover.png");
356 
357  // Disabled state
358  await button.evaluate((el) => el.setAttribute("disabled", "true"));
359  await expect(button).toHaveScreenshot("button-disabled.png");
360});
361```
362 
363### Pattern 2: Parallel Testing with Sharding
364 
365```typescript
366// playwright.config.ts
367export default defineConfig({
368  projects: [
369    {
370      name: "shard-1",
371      use: { ...devices["Desktop Chrome"] },
372      grepInvert: /@slow/,
373      shard: { current: 1, total: 4 },
374    },
375    {
376      name: "shard-2",
377      use: { ...devices["Desktop Chrome"] },
378      shard: { current: 2, total: 4 },
379    },
380    // ... more shards
381  ],
382});
383 
384// Run in CI
385// npx playwright test --shard=1/4
386// npx playwright test --shard=2/4
387```
388 
389### Pattern 3: Accessibility Testing
390 
391```typescript
392// Install: npm install @axe-core/playwright
393import { test, expect } from "@playwright/test";
394import AxeBuilder from "@axe-core/playwright";
395 
396test("page should not have accessibility violations", async ({ page }) => {
397  await page.goto("/");
398 
399  const accessibilityScanResults = await new AxeBuilder({ page })
400    .exclude("#third-party-widget")
401    .analyze();
402 
403  expect(accessibilityScanResults.violations).toEqual([]);
404});
405 
406test("form is accessible", async ({ page }) => {
407  await page.goto("/signup");
408 
409  const results = await new AxeBuilder({ page }).include("form").analyze();
410 
411  expect(results.violations).toEqual([]);
412});
413```
414