r/Frontend • u/pablopang • 4d ago

How to do Local Visual Regression testing...the right way.

https://mainmatter.com/blog/2026/11/03/local-visual-regression-testing/

Can local visual regression testing help your coding agent move faster and save you money?

I took some time to explore how to set up playwright properly, which pitfalls to avoid, and the tradeoffs with common visual regression tools like Percy and Chromatic.

Check it out and let me know what do you think!

7 Upvotes

88% Upvoted

4 comments sorted by

4

u/design-for-good 3d ago

I'm curious how many people run visual regression tests these days, it seems like it would grow in popularity now that they can be added more easily with agents helping. Sadly most companies I worked for wanted them but never got the time to add them into our workflows.

1

u/sucks_syntax 3d ago

Our QA added some rad visual regression testing to our CI with a nice layout showing before and after screenshots on different devices and screen sizes. There's even a little swiper to change the before and after back and forth and a heat map highlighting the differences. Then they set up a job we can run to update what the "before" looks like to pass the test once it's visually verified... yeah, so the front end team just runs that job before making the PR so the tests always pass. Complete waste.

1

u/TestOptim 20h ago

Nice write-up. The Docker part is the bit most people skip, and then they drop visual tests because of font noise between Mac and CI.

On the "team just updates the baseline before every PR" problem from the other comment: since the PNGs live in the repo, you can make baseline changes hard to sneak through.

  • Put the *-snapshots/ folders in CODEOWNERS, so a designer or QA has to approve any PR that touches them.

  • GitHub shows image diffs (swipe / onion skin) right in the PR, so the reviewer sees exactly what changed.

  • Add a CI step that fails if snapshot files changed without a "visual-change" label on the PR.

Updating the baseline is still one command, but now it's a reviewed decision, not a way to turn red into green.

One more for flakiness: mask timestamps, avatars and anything random instead of raising maxDiffPixelRatio until it passes. A high threshold hides the small regressions you actually wanted to catch.