Sauce Demo Playwright Suite

Problem

A portfolio project is easy to dismiss as a toy — a single-file demo nobody could point coworkers at. I wanted a suite that runs against a real, live target with real failure modes, and a report a stranger could open and trust, not a screenshot.

Approach

• Built 25 functional cases (catalog, cart, checkout, account, and a chained signup-to-checkout journey) in Playwright + TypeScript, Page Object Model, typed fixtures, matrixed across Chromium, Firefox, and WebKit in CI.
• Wired Allure reporting into the pipeline and added a GitHub Pages publish step, so every push to main produces a public, browsable report, not just a CI artifact.
• Documented two real constraints from the live target instead of hiding them: Cloudflare's bot management can challenge automated browsers regardless of IP reputation, and hCaptcha hard-blocks registration/login under CDP-driven automation entirely — confirmed via network inspection, not treated as a bug in the suite.
• Built this site's own /qa-suite page to fetch that published report's JSON at request time and replay it case by case, with the full Allure report embedded underneath.

From the code

test.describe('Full purchase journey @account @journey', () => {
  test('signup, login, add to cart, checkout, and browse site pages', async ({
    registerPage, loginPage, homePage, productPage, cartPage, checkoutPage, page,
  }) => {
    const user = buildDisposableUser();

    await test.step('sign up as a new customer', async () => {
      await registerPage.goto();
      await registerPage.register(user);
      await expect(homePage.header.logOutLink).toBeVisible();
    });
    // …
  });
});

Outcome

A suite that runs against a real store and is honest when the store — not the suite — is the reason a run goes red, with a report anyone can open and check for themselves.

Business Impact

The same discipline I bring to production suites — a flaky test is a defect to diagnose, not weather to retry away — applied somewhere anyone can verify it firsthand.