Playwright E2E Testing: 4 Rules for Zero Flaky Tests

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

test.describe("E-Commerce Checkout Workflow", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/store");
  });

  test("User can search, add item to cart, and reach payment screen", async ({ page }) => {
    // 1. Resilient Locator: Target user-facing semantic role
    const searchInput = page.getByRole("searchbox", { name: "Search products" });
    await searchInput.fill("Mechanical Keyboard");
    await page.keyboard.press("Enter");

    // 2. Locate product card and click Add to Cart
    const productCard = page.getByTestId("product-card").filter({ hasText: "Keychron K2" });
    await expect(productCard).toBeVisible();

    const addToCartButton = productCard.getByRole("button", { name: "Add to Cart" });
    await addToCartButton.click();

    // 3. Verify badge updates without manual wait
    const cartBadge = page.getByRole("status", { name: "Cart items" });
    await expect(cartBadge).toHaveText("1");

    // 4. Navigate to checkout and confirm form presence
    await page.getByRole("link", { name: "Proceed to Checkout" }).click();
    await expect(page).toHaveURL(/.*\/checkout/);

    const emailInput = page.getByLabel("Email address");
    await expect(emailInput).toBeFocused();
  });
});