Start with the risk.
Choose checks that answer a useful question, rather than adding assertions for their own sake.
AN INTERACTIVE QUALITY ENGINEERING PORTFOLIO
Explore quality.
/hands-on
Don’t just read about testing.
See what it catches.
Explore working demonstrations, investigate the evidence, and discover the engineering decisions behind reliable software.
visual-guard.spec.tsTS
01test('the UI matches its baseline',
02 async ({ page }) => {
03 await page.goto('/inventory');
04 await expect(page)
05 .toHaveScreenshot();
06 }
07);
✓
14 tests passed22 screenshot baselines · 2 viewports
RECORDED RUNILLUSTRATIVE CODE · REAL PROJECT RESULTS● PLAYWRIGHT
⌖
Functional checks pass.
But did the appearance change?
↗But did the appearance change?
TOOLS IN MY PRACTICEPlaywrightTypeScriptCypressPythonCI/CDAI quality
01 / FIND YOUR STARTING POINT
A lab for the curious.
Choose a topic. Understand the problem.
Explore the evidence.
01 INTERACTIVE DEMO AVAILABLE
»→No published demo yet
Visual regression: a working example
Compare an approved UI with an intentional styling change. Explore what failed, why, and how the evidence helps.
Control the noise.
Make state, environment, and assumptions explicit so a failure is worth investigating.
Keep the evidence.
Give the next person screenshots, traces, and enough context to understand what happened.
Focus areas describe my practice. Only projects marked “Interactive demo” are available to explore today.
02 / STEP INSIDE THE DEMO
One change.
A clear signal.
A real recorded result.
A small interaction to help explain it.
Visual Guard
Catch what functional tests can miss.
A shopping flow still works—but its product titles have changed. Compare the approved UI with an intentional regression and inspect the result.
18,032changed pixels detected
in the recorded regression
Open the full case study ↗in the recorded regression
Recorded local results. This demo explores captured evidence; it doesn’t execute tests in your browser.
TRY THE COMPARISONDRAG TO REVEAL ↔
↔
APPROVEDCHANGED Intentional styling change detected
03 / FROM DETECTION TO DECISION
A quality gate.
With the evidence to back it.
Check the state. Compare the UI.
Give the team a clear next action.
EVIDENCE YOU CAN EXPLOREA report.
A report.
Not just a red dot.
Playwright connects the failing assertion to the test steps and visual evidence, so the team can investigate with context.
14 / 14tests passed
recorded local run
recorded local run
Browse the actual native HTML report: filter results, inspect steps, and explore both viewport projects.
Open native Playwright report ↗Native passing report included. Failure view is a captured report. Full source and raw traces are not included in this public upload.
PLAYWRIGHT HTML REPORT✓ RECORDED PASS
Actual reporter output · Click image to enlarge · Captured October 29, 2026
WHEN A VISUAL CHECK FAILS01 / Expected image ↗02 / Actual image ↗03 / Pixel diff ↗04 / Trace retained in CI artifact
THE ARCHITECTUREPredictable inputs.
Predictable inputs.
Explainable outcomes.
A lightweight framework around Playwright’s native runner and screenshot assertions.
01Test scenariosLogin · catalog · cart · checkout
02Isolated setupFresh contexts · local app · stable data
03Browser projectsChromium · desktop + narrow
04Assertion gatesPage state + screenshot comparison
Reviewed baselinesVersioned by OS, viewport, and checkpoint
↑ COMPARE↳
Decision + evidencePass / fail → HTML report → screenshots → trace on failure
ASSERTIONS ARE THE QUALITY GATESThree questions.
Three questions.
One release signal.
Click a gate to see a representative assertion from the suite.
STATE GATE / READY BEFORE CAPTURE
await expect(page.getByTestId('inventory-list')).toBeVisible();Stops a screenshot check from evaluating the wrong screen or an incomplete journey.
Visual policy0 changed pixels allowed above the configured per-pixel color threshold of 0.2.Animations disabled · fonts and images awaited · no automatic baseline approval
CI/CD / CONTINUOUS FEEDBACKEvery change gets checked.
Every change gets checked.
Every failure gets evidence.
Configured for push, pull request, and manual workflow runs in GitHub Actions.
ILLUSTRATIVE REPLAY · NO CLOUD RUN STARTED
PLAYWRIGHT QUALITY-GATE WALKTHROUGHREADY / 9 STAGES
START WITH A CHANGEEXAMPLE WORKFLOW
Follow one change through the gates.
Watch state, content, and visual checks turn a code change into a clear pass/fail signal.
Select an outcome, then press Play flow.○ Page state READY
○ Expected data READY
○ Visual baseline READY
CODE CHANGEREQUIRED CHECK*REVIEW / MERGE
*Illustrates merge gating when branch protection requires this workflow.
Ready. This walkthrough does not execute code.
- 01Code changePush / pull request
- 02Prepare runnernpm ci + Chromium
- 03Type checktsc --noEmit
- 04Run assertionsnpm test
- 05Publish evidenceReports + failure artifacts
Ready to explore the feedback loop.
Select an outcome and replay the workflow.
↻
Investigate → fix or review an intended change → commit → re-run.
Baseline updates require human review. Failed test commands return a non-zero exit code; artifact upload runs even after a failure.
CI integration verified
The checked hosted run completed with 10 passed and 4 visual failures; report artifacts uploaded successfully. This is an observed run, not a live status badge.
View the checked workflow run ↗Enforce the gate at merge time
Make the visual workflow a required status check in branch protection. Without that repository setting, a failed check reports risk but does not itself prevent a merge.
Earlier feedback. Faster investigation. More informed release decisions.These checks reduce risk within their coverage; they complement functional, exploratory, and accessibility testing.
04 / THE THINKING BEHIND THE TESTS
A green check is useful.
Know what it proves.
My work spans test automation, web and API quality, and AI-assisted engineering. This lab makes those ideas tangible through small, focused demonstrations.
Each case study connects a testing decision to its outcome. The goal is to make quality easier to inspect, discuss, and improve.
KEEP THE CONVERSATION GOING
Let’s talk /quality.
Interested in the work, the process, or what comes next?