1// playwright.config.ts
 2import { defineConfig, devices } from "@playwright/test";
 3
 4export default defineConfig({
 5  testDir: "./e2e",
 6  timeout: 30000,
 7  expect: {
 8    timeout: 5000,
 9  },
10  fullyParallel: true,
11  forbidOnly: !!process.env.CI,
12  retries: process.env.CI ? 2 : 0,
13  workers: process.env.CI ? 1 : undefined,
14  reporter: [["html"], ["junit", { outputFile: "results.xml" }]],
15  use: {
16    baseURL: "http://localhost:3000",
17    trace: "on-first-retry",
18    screenshot: "only-on-failure",
19    video: "retain-on-failure",
20  },
21  projects: [
22    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
23    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
24    { name: "webkit", use: { ...devices["Desktop Safari"] } },
25    { name: "mobile", use: { ...devices["iPhone 13"] } },
26  ],
27});

 1// pages/LoginPage.ts
 2import { Page, Locator } from "@playwright/test";
 3
 4export class LoginPage {
 5  readonly page: Page;
 6  readonly emailInput: Locator;
 7  readonly passwordInput: Locator;
 8  readonly loginButton: Locator;
 9  readonly errorMessage: Locator;
10
11  constructor(page: Page) {
12    this.page = page;
13    this.emailInput = page.getByLabel("Email");
14    this.passwordInput = page.getByLabel("Password");
15    this.loginButton = page.getByRole("button", { name: "Login" });
16    this.errorMessage = page.getByRole("alert");
17  }
18
19  async goto() {
20    await this.page.goto("/login");
21  }
22
23  async login(email: string, password: string) {
24    await this.emailInput.fill(email);
25    await this.passwordInput.fill(password);
26    await this.loginButton.click();
27  }
28
29  async getErrorMessage(): Promise<string> {
30    return (await this.errorMessage.textContent()) ?? "";
31  }
32}
33
34// Test using Page Object
35import { test, expect } from "@playwright/test";
36import { LoginPage } from "./pages/LoginPage";
37
38test("successful login", async ({ page }) => {
39  const loginPage = new LoginPage(page);
40  await loginPage.goto();
41  await loginPage.login("user@example.com", "password123");
42
43  await expect(page).toHaveURL("/dashboard");
44  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
45});
46
47test("failed login shows error", async ({ page }) => {
48  const loginPage = new LoginPage(page);
49  await loginPage.goto();
50  await loginPage.login("invalid@example.com", "wrong");
51
52  const error = await loginPage.getErrorMessage();
53  expect(error).toContain("Invalid credentials");
54});

 1// fixtures/test-data.ts
 2import { test as base } from "@playwright/test";
 3
 4type TestData = {
 5  testUser: {
 6    email: string;
 7    password: string;
 8    name: string;
 9  };
10  adminUser: {
11    email: string;
12    password: string;
13  };
14};
15
16export const test = base.extend<TestData>({
17  testUser: async ({}, use) => {
18    const user = {
19      email: `test-${Date.now()}@example.com`,
20      password: "Test123!@#",
21      name: "Test User",
22    };
23    // Setup: Create user in database
24    await createTestUser(user);
25    await use(user);
26    // Teardown: Clean up user
27    await deleteTestUser(user.email);
28  },
29
30  adminUser: async ({}, use) => {
31    await use({
32      email: "admin@example.com",
33      password: process.env.ADMIN_PASSWORD!,
34    });
35  },
36});
37
38// Usage in tests
39import { test } from "./fixtures/test-data";
40
41test("user can update profile", async ({ page, testUser }) => {
42  await page.goto("/login");
43  await page.getByLabel("Email").fill(testUser.email);
44  await page.getByLabel("Password").fill(testUser.password);
45  await page.getByRole("button", { name: "Login" }).click();
46
47  await page.goto("/profile");
48  await page.getByLabel("Name").fill("Updated Name");
49  await page.getByRole("button", { name: "Save" }).click();
50
51  await expect(page.getByText("Profile updated")).toBeVisible();
52});

 1// ❌ Bad: Fixed timeouts
 2await page.waitForTimeout(3000); // Flaky!
 3
 4// ✅ Good: Wait for specific conditions
 5await page.waitForLoadState("networkidle");
 6await page.waitForURL("/dashboard");
 7await page.waitForSelector('[data-testid="user-profile"]');
 8
 9// ✅ Better: Auto-waiting with assertions
10await expect(page.getByText("Welcome")).toBeVisible();
11await expect(page.getByRole("button", { name: "Submit" })).toBeEnabled();
12
13// Wait for API response
14const responsePromise = page.waitForResponse(
15  (response) =>
16    response.url().includes("/api/users") && response.status() === 200,
17);
18await page.getByRole("button", { name: "Load Users" }).click();
19const response = await responsePromise;
20const data = await response.json();
21expect(data.users).toHaveLength(10);
22
23// Wait for multiple conditions
24await Promise.all([
25  page.waitForURL("/success"),
26  page.waitForLoadState("networkidle"),
27  expect(page.getByText("Payment successful")).toBeVisible(),
28]);

 1// Mock API responses
 2test("displays error when API fails", async ({ page }) => {
 3  await page.route("**/api/users", (route) => {
 4    route.fulfill({
 5      status: 500,
 6      contentType: "application/json",
 7      body: JSON.stringify({ error: "Internal Server Error" }),
 8    });
 9  });
10
11  await page.goto("/users");
12  await expect(page.getByText("Failed to load users")).toBeVisible();
13});
14
15// Intercept and modify requests
16test("can modify API request", async ({ page }) => {
17  await page.route("**/api/users", async (route) => {
18    const request = route.request();
19    const postData = JSON.parse(request.postData() || "{}");
20
21    // Modify request
22    postData.role = "admin";
23
24    await route.continue({
25      postData: JSON.stringify(postData),
26    });
27  });
28
29  // Test continues...
30});
31
32// Mock third-party services
33test("payment flow with mocked Stripe", async ({ page }) => {
34  await page.route("**/api/stripe/**", (route) => {
35    route.fulfill({
36      status: 200,
37      body: JSON.stringify({
38        id: "mock_payment_id",
39        status: "succeeded",
40      }),
41    });
42  });
43
44  // Test payment flow with mocked response
45});

 1// cypress.config.ts
 2import { defineConfig } from "cypress";
 3
 4export default defineConfig({
 5  e2e: {
 6    baseUrl: "http://localhost:3000",
 7    viewportWidth: 1280,
 8    viewportHeight: 720,
 9    video: false,
10    screenshotOnRunFailure: true,
11    defaultCommandTimeout: 10000,
12    requestTimeout: 10000,
13    setupNodeEvents(on, config) {
14      // Implement node event listeners
15    },
16  },
17});

 1// cypress/support/commands.ts
 2declare global {
 3  namespace Cypress {
 4    interface Chainable {
 5      login(email: string, password: string): Chainable<void>;
 6      createUser(userData: UserData): Chainable<User>;
 7      dataCy(value: string): Chainable<JQuery<HTMLElement>>;
 8    }
 9  }
10}
11
12Cypress.Commands.add("login", (email: string, password: string) => {
13  cy.visit("/login");
14  cy.get('[data-testid="email"]').type(email);
15  cy.get('[data-testid="password"]').type(password);
16  cy.get('[data-testid="login-button"]').click();
17  cy.url().should("include", "/dashboard");
18});
19
20Cypress.Commands.add("createUser", (userData: UserData) => {
21  return cy.request("POST", "/api/users", userData).its("body");
22});
23
24Cypress.Commands.add("dataCy", (value: string) => {
25  return cy.get(`[data-cy="${value}"]`);
26});
27
28// Usage
29cy.login("user@example.com", "password");
30cy.dataCy("submit-button").click();

 1// Mock API calls
 2cy.intercept("GET", "/api/users", {
 3  statusCode: 200,
 4  body: [
 5    { id: 1, name: "John" },
 6    { id: 2, name: "Jane" },
 7  ],
 8}).as("getUsers");
 9
10cy.visit("/users");
11cy.wait("@getUsers");
12cy.get('[data-testid="user-list"]').children().should("have.length", 2);
13
14// Modify responses
15cy.intercept("GET", "/api/users", (req) => {
16  req.reply((res) => {
17    // Modify response
18    res.body.users = res.body.users.slice(0, 5);
19    res.send();
20  });
21});
22
23// Simulate slow network
24cy.intercept("GET", "/api/data", (req) => {
25  req.reply((res) => {
26    res.delay(3000); // 3 second delay
27    res.send();
28  });
29});

 1// With Playwright
 2import { test, expect } from "@playwright/test";
 3
 4test("homepage looks correct", async ({ page }) => {
 5  await page.goto("/");
 6  await expect(page).toHaveScreenshot("homepage.png", {
 7    fullPage: true,
 8    maxDiffPixels: 100,
 9  });
10});
11
12test("button in all states", async ({ page }) => {
13  await page.goto("/components");
14
15  const button = page.getByRole("button", { name: "Submit" });
16
17  // Default state
18  await expect(button).toHaveScreenshot("button-default.png");
19
20  // Hover state
21  await button.hover();
22  await expect(button).toHaveScreenshot("button-hover.png");
23
24  // Disabled state
25  await button.evaluate((el) => el.setAttribute("disabled", "true"));
26  await expect(button).toHaveScreenshot("button-disabled.png");
27});

 1// playwright.config.ts
 2export default defineConfig({
 3  projects: [
 4    {
 5      name: "shard-1",
 6      use: { ...devices["Desktop Chrome"] },
 7      grepInvert: /@slow/,
 8      shard: { current: 1, total: 4 },
 9    },
10    {
11      name: "shard-2",
12      use: { ...devices["Desktop Chrome"] },
13      shard: { current: 2, total: 4 },
14    },
15    // ... more shards
16  ],
17});
18
19// Run in CI
20// npx playwright test --shard=1/4
21// npx playwright test --shard=2/4

 1// Install: npm install @axe-core/playwright
 2import { test, expect } from "@playwright/test";
 3import AxeBuilder from "@axe-core/playwright";
 4
 5test("page should not have accessibility violations", async ({ page }) => {
 6  await page.goto("/");
 7
 8  const accessibilityScanResults = await new AxeBuilder({ page })
 9    .exclude("#third-party-widget")
10    .analyze();
11
12  expect(accessibilityScanResults.violations).toEqual([]);
13});
14
15test("form is accessible", async ({ page }) => {
16  await page.goto("/signup");
17
18  const results = await new AxeBuilder({ page }).include("form").analyze();
19
20  expect(results.violations).toEqual([]);
21});

1// ❌ Bad selectors
2cy.get(".btn.btn-primary.submit-button").click();
3cy.get("div > form > div:nth-child(2) > input").type("text");
4
5// ✅ Good selectors
6cy.getByRole("button", { name: "Submit" }).click();
7cy.getByLabel("Email address").type("user@example.com");
8cy.get('[data-testid="email-input"]').type("user@example.com");

 1// Playwright debugging
 2// 1. Run in headed mode
 3npx playwright test --headed
 4
 5// 2. Run in debug mode
 6npx playwright test --debug
 7
 8// 3. Use trace viewer
 9await page.screenshot({ path: 'screenshot.png' });
10await page.video()?.saveAs('video.webm');
11
12// 4. Add test.step for better reporting
13test('checkout flow', async ({ page }) => {
14    await test.step('Add item to cart', async () => {
15        await page.goto('/products');
16        await page.getByRole('button', { name: 'Add to Cart' }).click();
17    });
18
19    await test.step('Proceed to checkout', async () => {
20        await page.goto('/cart');
21        await page.getByRole('button', { name: 'Checkout' }).click();
22    });
23});
24
25// 5. Inspect page state
26await page.pause();  // Pauses execution, opens inspector