Visual regression tool?

Afternoon all,

Can anybody recommend me a free visual regression tool? I am after something that I can chuck two images at and it’ll highlight any differences. This could be useful to quickly check that a site is unaffected following a CSS change for instance.

Many thanks,

sad_muso :grinning:

1 Like

I’d be interested if someone has something free and quick like the request above. I was recently searching for something similar. I haven’t found a super simple free tool, but did run across 2 things that I have been dabbling with.

The first comes from Viv Richards and the code C# can be found via github, link at the bottom of the article. http://vivrichards.co.uk/automation/automating-visual-regression-testing The pro’s with this solution is, Selenium Webdriver is baked into the project (using Chrome). The con was the diff image that the framework generated by default wasn’t very useful. (only highlighted areas were pixels changed and didn’t have both images translucent to one another to see the differences easily.

The second is implemented in Ruby - https://github.com/teachbase/imatcher and it does provide a good diff image that has both images translucent to one another. The con here is that it is stand alone code that you would have to add a framework around it.

I’ll probably end up doing something with the Ruby implementation as I am familiar with Watir (which uses selenium webdriver). The most common paid version is Applitools Eyes.

2 Likes

I’m sure there are tools, but when I had to do something similar, I made my own, first with sikuli (based on Python), and then in another company with python (pyautogui). In my case, I took the current screen and compared it with portions of a screenshot from a previous version. Since in both cases, the code took a short time to build (hours, at most), I never bothered to look for a pre-made package to do the same.

Unfortunately, I didn’t keep the code, so I would have to start over if the situation comes up again.

1 Like

Try https://github.com/BBC-News/wraith.

Thanks for the mention. I’ve tried to address some of the shortfalls of the free visual regression tool and the con you mentioned - I plan to update the tool when ever I get some free time.

  • The difference image now shows the original image with pink squares overlayed around areas where differences were found
  • User can specify which browser to use to take base screenshots with
  • User can specify which browser to use to compare image with image by visiting url
  • User can also simply just compare one image with another image

In the future I hope to add more options to compare other file types - pdf’s for example, browser sizes to test responsiveness etc … watch this space :slight_smile:

1 Like

We use https://applitools.com/

2 Likes

My colleague developed a tool just for this: https://gitlab.com/altom/WebUIChecker
It’s a Selenium library for visual checking. Currently in beta.

I would recommend BackstopJS (https://github.com/garris/BackstopJS).

If you are interested in similar paid tool – welcome to check ours https://diffy.website.

If you want to do it on your own it is very easy to do with Puppeteer.

Here we have an article on this Automated visual testing - Easy snapshot testing with Puppeteer

If you want to have complete solution we would recommend our tool Eye QAProvider for visual regression testing. It has some benefits comparing to other tools and free solutions:

  1. We do not do a pixel by pixel comparison. We do a smart diff. It is explained on the web site how it works.
  2. We have nice view page that helps you to see the exact diff places easily.
  3. We use the tool every day and do a lot of improvements, so the whole test process with this tool is always improving.
  4. It has parallel runs, so you will get results for 10 URLs & 5 view ports in a few minutes.
  5. We can give a free usage for a 6 month, just send a message to our support.

If you want to automate these visual regression tests and don’t mind a hosted service with a limited free tier, I’d recommend Percy. You can upload up to 5000 screenshots a month for free. We used this service at the place I used to work at, and it was really good at catching unintended changes in our web apps.

You should check out playwright for a cross-browser version of puppeteer. Testim also added a free recorder to create tests that run as code on playwright. http://testim.io/playground or read here https://www.testim.io/blog/introducing-the-testim-playground/