January 10, 2026
Screenshot or it didn’t ship
Visual regression tests for personal blogs
Bloggers unleash robot screenshot cops to catch sneaky site glitches
TLDR: A blogger set up automated screenshots (via Playwright) to catch visual glitches on a static site. Commenters swapped tips and demos, asked if snapshot updates are built in, and linked examples—arguing this lightweight safety net can stop silent layout breakage and preserve a visual history.
Personal blogs just hired robot screenshot cops. The article shows how Playwright—a tool that opens pages and snaps pics—keeps a blog’s look from quietly breaking. It compares fresh screenshots to a “golden” version; any unexpected change is flagged. The author even scrolls the page to coax lazy-loaded images into view and checks screenshots into the site’s code history, creating a visual time capsule. Bonus geek cred: refresh those goldens with the simple “--update-snapshots” command.
The comments lit up with confessions and flexes. Curiositry admitted they “frequently break” their site and wants to ditch paid monitors for homegrown screenshot checks, while asking how to best “diff” images. Power user csomar dropped a live demo and bragged about running this in an automated build pipeline (CI/CD), comparing against the previous commit. Newcomer kkarpkkarp sparked a mini-thread by asking if the magic is built into Playwright or needs extra code. Meanwhile, OuterVale name-dropped TurnTrout’s design notes, turning this into a tiny link-fest. The vibe? Half “why didn’t I do this sooner,” half “is this overkill for a blog?” with jokes about screenshot paparazzi and the new rule of the web: pics or it didn’t ship.
Key Points
- •The site is a static website built with Astro, authored in MDX, and styled with complex CSS.
- •Playwright is used to implement visual regression testing via automated screenshots compared to golden snapshots.
- •Tests fail when screenshots differ beyond a threshold, and snapshots can be updated for legitimate changes.
- •Screenshots are committed to Git, providing a visual history aligned with each commit.
- •Technical setup includes initializing Playwright with npm, iterating site routes, scrolling to load content, waiting for network idle, and capturing full-page screenshots.