2.4Playwright Test: E2E Testing

Playwright Test is the modern standard for end-to-end browser testing in the JS/TS ecosystem.

// checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe("Checkout Flow", () => {
    test("user can complete purchase", async ({ page }) => {
        await page.goto("/products");
        await page.click('[data-testid="add-to-cart"]');
        await expect(page.locator(".cart-count")).toHaveText("1");

        await page.click('[data-testid="checkout-button"]');
        await page.fill('[name="card-number"]', "4111111111111111");
        await page.fill('[name="expiry"]', "12/29");
        await page.fill('[name="cvv"]', "123");
        await page.click('[data-testid="pay-button"]');

        await expect(page.locator(".confirmation")).toContainText("Order confirmed");
    });

    test("empty cart shows appropriate message", async ({ page }) => {
        await page.goto("/cart");
        await expect(page.locator(".empty-cart-message")).toBeVisible();
        await expect(page.locator('[data-testid="checkout-button"]')).toBeDisabled();
    });
});

Playwright Fixtures

// fixtures.ts
import { test as base } from '@playwright/test';

type TestFixtures = {
    authenticatedPage: Page;
};

export const test = base.extend<TestFixtures>({
    authenticatedPage: async ({ page }, use) => {
        await page.goto("/login");
        await page.fill('[name="email"]', "test@example.com");
        await page.fill('[name="password"]', "pass123");
        await page.click('[type="submit"]');
        await page.waitForURL("/dashboard");
        await use(page);
    },
});