Skip to main content

CSS Testing Made Easy

The #1 visual regression testing tool for Wordpress. Never miss a visual bug again.

14 days free trial period,
no credit card required

Use Cases

WordPress Hosting

Ensure your updates do not break your clients sites. We can take screenshots of multiples sites before and after the update to ensure no breaks were introduced.

Archive/Monitoring

Your client can refer that you have broken the site with your changes even if you didn't touch that section. We allow you to have visual archive of the site so you can always show how site was before your work. In the same way you can monitor what editors do.

WordPress Theme

If you sell and maintain a theme you probably have a demo site. By adding visual regression testing to demo site you can ensure nothing gets broken when you deploy new changes.

Optimization

Running performance optimization? We ensure that your changes had zero visual changes to the site on all pages.

At WP-OK we manage hundreds of WordPress websites, and detecting an issue before our customers do it's a tremendous added value. Before signing up I was afraid of having to deal with a lot of false positives. But the comparison works really well and Diffy helps us to deliver our promises. It's like having extra staff in our team!

Daniele Besana
Founder of WP-OK

14 days free trial period,
no credit card required

Main Features

Monitoring

Set daily/weekly monitoring on auto-pilot and receive notifications when something actually changed.

Custom Image Compare Algorithm

Get less false positive noise as our algorithm understands vertical shifts.

Performance

Use highly scalable infrastructure of workers so you get results faster. Take thousands of screenshots in 30+ concurrent browser sessions.

Predefined and Custom Environments

Compare your Live with Staging or Staging with Development. We support custom environments for your pull request builds.

Easy to integrate

We have a CLI tool to interact with our APIs so you can builds integrations fast.

Mask / Exclude elements

Avoid false positives by removing / masking DOM elements on the page prior to taking the screenshot. Great for hiding ads, slides, popups.

Delay, scroll, javascript

Get the needed state of the page by executing custom javascript, setting a delay or scrolling.

Teams, notifications

Set up your team to share projects. Email, Slack, Github notifications available.

CSS Testing - The Why

CSS bugs are extremely easy to introduce because unique rules need to be written for rendering every visual element on a page, taking into consideration all combinations of devices, browsers, and screen sizes.

It’s simply too much for a developer to handle manually.

Moreover, because these bugs might only appear in certain browsers and screen sizes, they’re quite hard to catch.

And you can’t just sit around and wait for your users to let you know about a visual bug - if they have a bad user experience, more often than not they’ll just leave and check out a competitor!

Hence the importance of CSS testing.

Integrations

button button

Github - checks

Github app that provides a check for your pull requests. Once testing job is completed it will be posted to your pull request as a check so you have all results right there, in pull request thread. Read more.

Pantheon - Build Tools

Build Tools allow to spin up Multi Dev pull request environments. We provide an easy integration to compare those environments with Dev and post results back to Github. Read more.

CircleCI Orb

Custom CircleCI Orb that compares pull request environments with DEV so you have less integration code to maintain as it is hidden in the orb. Read more.

About Visual Regression Testing Tools

The most straightforward approach to perform a CSS test is called visual regression testing.

Tools like Diffy allow developers to save hours of QA, by leveraging the power of technology.

These visual regression testing tools are able to detect the tiniest of bugs - those that a user would describe as “something about this page just feels off”.

By having three different staging environments, visual bugs are caught early on, and teams are able to keep a steady schedule, since no dev has to keep going back and fix issues nobody knew about.

Can I just do it on my own?

  • Get started in less than 5 minutes. No local dependencies.
  • Share results with clients. No need to take care of storing images somewhere.
  • No need to set up and maintain your own server. A year of our service will cost you less than the effort having your own.
  • And to top it all off, you get some nice extra features such as Slack integration with no effort

14 days free trial period,
no credit card required