Playwright snapshots vs visual tools How do you catch UI bugs?
by•
Unit tests are great for making sure buttons click and forms submit but they are completely blind to a modal moving 5 pixels to the left or a background color bleeding into a header.
We started running automated headless browser screenshots before and after restyling PRs to catch silent layout breaks.
It caught CSS inheritance bugs that our test suite totally ignored.
Do you rely on local screenshot diffs in your pipeline or do you use hosted visual testing services like Percy or Chromatic?
5 views
Replies
Mobile, not web, but the same idea. When my Flutter app got a light theme next to the dark one, a test walks 18 screens in light and then in dark on the iOS simulator and saves a capture of each, 36 in all, and the rule is to run it again after any theme or palette change. I look at the captures rather than diff them pixel by pixel, because the bugs a theme change causes are rarely a few pixels, they are text the same colour as its background. The note that keeps it honest is the list of screens that were still not seen, written next to the test, so "all screens checked" never quietly means "all the screens the test could reach".