Diffy Visual Regression Testing

Most plugin updates are fine. Now and then one breaks something you can see but nobody notices: a header that wraps on tablets, a button pushed below the fold, a form that loses its styling on one template. Nothing is logged and nothing goes red in a dashboard.

This plugin adds a visual check to your plugin updates. On the Plugins screen, next to each available update, you get an extra link: update now with Diffy visual testing. When you use it:

1. Diffy takes screenshots of the pages in your Diffy project, before the update.
2. WordPress runs the plugin update.
3. Diffy takes a second set of screenshots and compares the two.
4. You see the result on the Plugins screen, with a link to the report, and Diffy emails it to you.

Ideally the comparison finds no changes. When it does, the report highlights exactly what moved, page by page and screen width by screen width, so you can fix it or roll back before a visitor finds it.

What you need

• A Diffy account and a project for this site. The plugin can create both for you with one click.
• Any Diffy plan, the free one too. The plugin talks to Diffy through its API, which every plan includes.
• A site that can be reached from the internet. Diffy takes the screenshots from its own servers, so local development sites won’t work.

Why Diffy

• Every page and every width. Diffy screenshots each page in your project at the widths you choose, from 240px to 2000px, in Chrome or WebKit (the engine behind Safari).
• Works with any theme and page builder. Diffy screenshots the rendered page, so Elementor, Divi, the block editor and custom themes all work.
• Stable screenshots. Hide cookie banners, freeze sliders with a short script, mask videos and replace changing text before screenshots are taken, so the comparison only shows real changes.
• A report you can share. Send the comparison to a client or a developer who doesn’t have a Diffy account.

Diffy also compares staging with production, runs on a schedule, and integrates with CI. Read more about visual regression testing for WordPress.

External services

This plugin connects to the Diffy API (https://app.diffy.website/api/) to take screenshots of your site and compare them. Diffy is a service run by the plugin’s authors.

• When you save the settings, the plugin sends the API key and the project ID to Diffy to check that they are valid.
• When you update a plugin with “update now with Diffy visual testing”, the plugin sends the API key and asks Diffy to take screenshots of the pages in your project and compare them. Diffy then loads those pages from its own servers.
• When you click “One-click register”, the plugin sends your admin email address, a name made from your display name and email address, a generated password and your site’s address to create a Diffy account, a project and an API key.

No data is sent to Diffy unless you use one of these features. See Diffy’s terms and privacy policy.