Playwright End-to-End Testing Claude Skill (.md) | Free & Offline

// Flaky: Brittle selectors, arbitrary sleep timeouts, and no auto-waiting
test("bad test", async ({ page }) => {
  await page.goto("/catalog");
  await page.click("div.col-md-4 > button:nth-child(2)"); // Breaks on minor CSS tweak!
  await page.waitForTimeout(5000); // Flaky anti-pattern!
  const text = await page.innerText("#cart-total");
  expect(text).toBe("1");
});

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

test.describe("Checkout Flow", () => {
  test("allows user to complete cart purchase", async ({ page }) => {
    await page.goto("/catalog");
    
    // Accessible, user-facing locators
    await page.getByRole("button", { name: "Add to Cart" }).first().click();
    await page.getByRole("link", { name: "Cart (1)" }).click();
    
    // Auto-waiting assertions
    await expect(page.getByRole("heading", { name: "Your Shopping Cart" })).toBeVisible();
    await page.getByRole("button", { name: "Proceed to Checkout" }).click();
    
    await expect(page).toHaveURL(/.*checkout/);
  });
});