Visual Regression Testing for WordPress

Every WordPress site gets updated all the time: plugins, the theme, core, the PHP version on the host. Most updates are fine. Now and then one breaks something, and in WordPress it’s usually something you can see but nobody notices: a header that wraps on tablets, a WooCommerce button pushed below the fold, a contact form that loses its styling on one template. No error gets logged and nothing goes red in a dashboard. A client finds it a week later.

Diffy is a visual regression testing tool that catches those changes before anyone else does. It takes screenshots of your pages before and after a change (or on staging and production), compares them at every breakpoint and highlights exactly what moved. You don’t install a plugin or write any code. You give Diffy URLs and it does the rest.

Start testing for free: 500 screenshots a month, no credit card.

What breaks when you update WordPress

Visual regressions on WordPress sites tend to come from the same few places:

Plugin updates. A plugin ships new CSS or JavaScript that loads on every page, a new class name overrides your theme’s styles, or a new version of a shared library clashes with another plugin.
Theme and child-theme updates. The parent theme changes a template or a stylesheet your child theme depends on, and your overrides stop working.
Page builders. Elementor, Divi, Beaver Builder and similar builders generate their own markup and CSS. A builder update can change spacing, column widths or responsive behaviour across every page built with it.
Core and the block editor. Changes to core blocks and global styles can shift the layout of content created in the block editor.
WooCommerce templates. Stores that override WooCommerce templates in the theme can end up with outdated overrides after a WooCommerce update.
Performance and caching plugins. Turning on CSS/JS minification, combining files or lazy-loading can reorder styles or hide content that only appears after a script runs.
Hosting changes. A PHP version upgrade or a new CDN rule can change what renders, even when you haven’t touched WordPress at all.

The hard part is that these problems only show up on some pages. The navbar is fine everywhere except on pages with no hero image, or the grid only breaks at 768px. Clicking through a handful of pages after an update won’t catch that. Comparing every page at every breakpoint will.

Three ways to test a WordPress site with Diffy

1. Before and after an update

This is the simplest workflow and the most common one for maintenance plans. Take a set of screenshots of the site, run your plugin, theme or core updates, then take another set and compare the two. Diffy shows every page and breakpoint with a change, side by side, with the differences highlighted.

It works on the live site, but it’s safer on staging: update staging first, compare, and push to production only when the comparison is clean.

2. Staging vs production

If your host gives you a staging copy of the site (most managed WordPress hosts do), add it as a second environment in Diffy. Diffy swaps the production domain for the staging domain in every URL automatically, so you keep one list of pages and compare the two environments with one click. Staging behind HTTP basic auth works too: add the username and password to the environment.

3. Scheduled monitoring

Not every change comes from a planned update. Auto-updates, a colleague editing a reusable block or a third-party script changing overnight can all alter the site with nobody on your team deploying anything. Set a schedule in the project, and Diffy screenshots production on the days and at the time you choose. It compares each run with the previous one or with a fixed baseline, and notifies you by email, Slack or webhook when something changes.

Getting your pages into Diffy

You don’t need to type URLs one by one. When you create a project, Diffy can collect the page list from:

Your XML sitemap. WordPress has generated /wp-sitemap.xml since version 5.5, and SEO plugins like Yoast and Rank Math generate their own. Diffy reads sitemap index files too, so a sitemap split into posts, pages and products works.
Internal links on a page you point it at.
A text file with one URL per line.

For large sites you don’t need every post. Pick one or two examples of each template (homepage, a page, a post, an archive, a product, the cart, a form) and you’ll cover most of what an update can break, for a fraction of the screenshots.

Making WordPress screenshots stable

Screenshots only help if they don’t flag changes that aren’t real. WordPress sites are full of things that change on every page load, and Diffy has settings for each of them:

Cookie consent banners. Set the consent cookie in the project so the banner never appears, or hide the banner element.
Sliders, carousels and animations. Freeze them with a JavaScript snippet that runs before the screenshot. Our guide to stabilising Elementor sites has ready-made snippets for sliders, animated headlines, countdowns and Lottie animations.
Embedded videos and maps. Mask them so a different video frame doesn’t show up as a change.
“Latest posts” and other dynamic content. Replace changing text with placeholder text using mock content, so a new blog post doesn’t show up as a difference on every page.
Pages behind a login. Diffy can log in before taking screenshots, so you can test WooCommerce account pages and members-only areas.
Security plugins and firewalls. If Wordfence, Cloudflare or your host blocks unknown traffic, allowlist Diffy’s worker IP address and turn on the single-IP option in the project settings.

Diffy project settings replacing dynamic text with mock content before screenshots are taken

Every breakpoint, two browser engines

Responsive bugs are where WordPress updates hurt most, because theme and builder CSS is full of media queries. Diffy screenshots each page at as many widths as you set, from 240px to 2000px, and you can choose between Chrome and WebKit (the engine behind Safari). Our responsive design testing guide explains which widths are worth testing.

Reviewing the results

A comparison of 50 pages at 4 breakpoints is 200 pairs of screenshots, so reviewing them quickly matters.

An AI summary groups the changes by impact, so you see “the footer changed on all 48 pages” as one item rather than 48.
You approve changes one at a time, per screenshot, per page or per breakpoint, so expected changes are out of the way and only the real problems are left.
Shareable links let you send a comparison to a client or developer who doesn’t have a Diffy account.

Built for agencies maintaining many WordPress sites

If you run care plans for dozens of client sites, updates are a monthly routine and visual checks are the step that gets skipped. Diffy is built for that:

One project per client site, organised with tags, with bulk actions to run comparisons across many projects at once.
Unlimited team members, with administrator, developer and read-only roles, so clients can see their own results.
Notifications by email, Slack or webhook, with a threshold so small changes don’t wake anyone up.
Ticket creation in Jira, Trello or Basecamp through Zapier, straight from a comparison.

A before-and-after comparison attached to the monthly maintenance report is also an easy way to show a client that the updates were actually checked.

Automating it

On a paid plan you can trigger comparisons from your deployment pipeline with the Diffy CLI, for example after every deploy to staging, or on every pull request with the GitHub integration. Teams that develop locally can take screenshots of their local site with the DDEV or Lando add-ons and compare them with production before pushing.

Frequently asked questions

Do I need to install a WordPress plugin?

No. Diffy works from URLs. It loads your pages in a real browser the same way a visitor would, so it works with any theme, page builder or host, and adds nothing to your site.

Does it work with Elementor, Divi and other page builders?

Yes. Diffy screenshots the rendered page, so the tool that built it doesn’t matter. Builders do tend to add animations and sliders, so freeze them with a short JavaScript snippet that runs before each screenshot.

Can I test a staging site that’s password-protected?

Yes. Add the HTTP basic auth username and password to the staging environment in the project settings. For sites that need a WordPress login, Diffy can log in first.

How many screenshots does a WordPress site need?

One screenshot is one page at one breakpoint. Comparing 40 pages at 3 breakpoints on staging and production uses 240 screenshots. The free plan includes 500 a month, enough for regular checks on a small site or a trial on a bigger one.

How is this different from a WordPress uptime or broken-link monitor?

Uptime and link checkers tell you whether a page loads. Visual regression testing tells you whether it still looks right. A page can return 200 OK with its layout completely broken.

Start with your next update

Before your next round of plugin updates, add the site to Diffy, take a baseline, run the updates and compare. It takes a few minutes to set up and you’ll see exactly what changed.

Create a free account