21 articles tagged “Visual Testing”
Set up Playwright visual regression testing with toHaveScreenshot(): baselines, masking, stable screenshots, thresholds, multiple viewports and running it in CI.
Screenshot testing works only when the same page gives the same image twice. How to capture reliably, what to compare, and how to tell flake from a real bug.
Open-source and hosted visual regression testing tools compared on price, free tiers and what they actually screenshot. Every figure from the vendor's own page.
Every visual testing tool now advertises AI. What the models actually do, what stays deterministic, and where AI still gets it wrong, with the numbers.
Visually test every Upsun preview environment: a GitHub Action starts a Diffy comparison with production, and the result lands on the pull request as a check.
Which breakpoints to test in 2026 (with device data), what breaks at each one, manual vs automated testing, the tools, and how to screenshot every breakpoint on every deploy.
A practical website migration testing checklist: build the URL inventory, verify redirects and content, compare every page visually at every breakpoint, and keep monitoring after launch.
Diffy AI reads every changed screenshot in a comparison and writes one plain-English summary, split into Critical and Minor changes. Available on request.
Install the open-source Diffy plugin for Claude Code: ten skills that let the agent screenshot your pages, compare them with a baseline and report what changed.
Diffy's AI check catches cookie banners, CDN challenge pages, unloaded media and broken layouts before they turn into false positives in your results.
Visual regression testing sits between manual QA and automated tests. When it makes sense, what to test, and why good screenshots are hard.
Elementor sliders, countdowns and Lottie animations cause false positives. Here are the JavaScript snippets that stabilise each widget type.
Build a Drupal style guide page combining all your UI elements, then restrict it by IP address so only your visual testing tool can reach it.
You can embed an animated GIF inside an SVG, which makes freezing the animation tricky. Here is the JavaScript snippet we use to stop it.
Two ways to use a baseline set of screenshots in visual regression testing: ongoing site monitoring, and faster pull request reviews.
How to reach elements inside shadow DOM with jQuery, so you can open menus and search boxes before taking visual regression screenshots.
How to bring a design system into your Drupal theme, comparing Storybook, Emulsify, UI Suite, Wingsuit and ready-made component libraries.
A step-by-step regression testing plan for a website you did not build, including how to prioritise tests, plus two real-world worked examples.
The visual bugs you can catch by eye and the ones you cannot, based on the regressions we see most often across the sites Diffy tests daily.
Why visual tests flag changes that aren't bugs, and five fixes: mask elements, hide them with CSS, freeze animations, use content fixtures and sync environments.
How to run visual regression testing against a Patternlab component library in Drupal and catch regressions across every component at once.
