PLAYWRIGHT + TYPESCRIPT / VISUAL REGRESSION TESTING

Catch the change.
Keep the confidence.

A button still works. Its layout is broken.
Functional tests can pass while the UI changes.

This project compares the interface against an approved screenshot—and makes unexpected changes visible.

Explore the comparison ↘

14 / 14tests passed in the recorded run

22screenshots across two viewports

1 intentional regressionintroduced, detected, and explained

RECORDED LOCAL RESULTS
NOT A LIVE CI FEED

01 / SEE THE EVIDENCE

Same page. One visual regression.

SAUCEDEMO · PRODUCT INVENTORY

Approved SauceDemo inventory with original product title sizes and colors — Approved baselineEXPECTED

Intentional regression: larger red product titles cause wrapping and layout changes — Intentional UI changeCAUGHT

Visual assertion failed. Exactly as intended.

The controlled styling change produced 18,032 different pixels. Playwright saved the expected image, actual image, diff, and trace for investigation.

18,032CHANGED PIXELS

An actual recorded test result using a local copy of SauceDemo. The change is injected only for this demo; no checkout data or approved baseline is modified. The normal test suite passes.

02 / THE ENGINEERING

A small workflow. A useful safety net.

Open the repo, run the suite,
review the evidence.

Approve the reference

Capture stable pages with predictable data, fixed viewport sizes, and animation disabled. Review the images before committing.

npm run test:update

Compare each run

Playwright compares the current UI with the stored baseline. Functional assertions check that each page reached the intended state.

npm test

Inspect the change

Use the HTML report and browser trace to investigate. Approve intentional changes through Git review; fix unintended ones.

npm run report

03 / WHAT IS COVERED

Beyond a single screenshot.

Seven scenarios cover the shopping journey at desktop and narrow viewport sizes. Each test starts with a fresh browser context.

PlaywrightTypeScriptGitHub ActionsHTML reports

01Sign inPage + validation state

02Browse productsInventory + card + details

03Review cartEmpty + filled states

04Complete checkoutInformation → validation → summary → confirmation

04 / TRY IT YOURSELF

Make a change. Watch it get caught.

The demo changes product titles and exits with a failed visual assertion. Run the normal suite afterward to return to a passing report.

Back to the portfolio ↗

● ● ●YOUR TERMINAL

# Install dependencies and Chromium
npm ci
npx playwright install chromium

# Passing suite → intentional visual failure
npm test
npm run demo:regression
npm run report

Catch the change.Keep the confidence.