E2E + Visual QA for Personal Websites: What to Test and Why
A practical QA stack for personal sites using route-level E2E checks and Playwright screenshot loops to catch regressions early.
Personal websites are products. They deserve the same regression protection as client systems, especially once content, navigation, and build pipelines get more complex.
My QA setup has two pillars: functional E2E checks and fast visual review loops with Playwright screenshots.
01. Functional E2E: Core Coverage
I test routes that matter for user flow and credibility: home, source, logs, about, contact, and post pages.
- HTTP success for each route.
- Topbar/footer presence consistency.
- Internal link validity across pages.
- Blog behaviors: filters, search, infinite scroll, share/bookmark.
- Contact form basic input behavior and action wiring.
02. Visual QA: Screenshot Loops
Visual regressions usually slip through functional tests. I capture desktop and mobile screenshots on every critical route, then review diffs for spacing, clipping, typography drift, and broken media.
Common catches
- Text truncation after content updates.
- Navigation hidden or overlapping on mobile.
- Hero/animated modules too large for smaller viewports.
- Inconsistent font/rendering between sections.
03. Why This Matters for Personal Sites
A portfolio is a trust surface. Broken links, cut-off copy, and inconsistent layout reduce perceived engineering quality immediately. Quick QA loops preserve trust while still allowing fast iteration.
04. Lightweight Operating Model
- Build static outputs.
- Run E2E route/link checks.
- Capture desktop/mobile screenshots.
- Patch only the observed regression.
- Repeat until clean.
This gives high confidence without heavyweight process. It is enough rigor for a fast-moving personal site.