I've been a big fan of visual validation testing ever since I talked to Adam Carmi the co-founder and CTO of Applitools on my TestGuild Automation Podcast.
But for folks on a small team that doesn't have a budget a question that came up more than once was “Are there any FREE open-source visual validation tools options? “
Based on this question, I decided to compile a list of 17 free / open-srouce tools you can use for your visual validation testing efforts.
If you don’t know what visual validation testing is, check out my video on Visual Validation Testing using Selenium & Java – Mini Course.
**I originally posted this in 2017 but updated it by removing all the previous libraries that relied on PhantomJS which is no longer being updated/
FREE Visual Validation Tools
Except for FBSnapshotTestCase, as far as I can tell all these tools only work for websites and not mobile apps.
That’s another reason why I like using paid solutions like Applitools that work with everything.
Although all the tools share the same workflow, they come in two flavors:
- Code/Script Based
- Configuration Based
What are the Top Visual Validation Tools for Testers?
Most of you are probably wondering what the top automaton frameworks for Visual Validation testing actually are. Here’s what I found.
This list is broken up into the two main approaches used for visual validation testing: code-based and configuration-based.
Note: This list is in no particular order – this is not a ranking
Code/Script Based Visual Validation Tools:
AyeSpy is a high-performance visual regression tool to catch UI regressions. According to their Github page “With the correct setup, you can expect 40 comparisons running under a minute.”
¤ 167 Github Stars
2. iOSSnapshotTestCase (previously FBSnapshotTestCase)
iOSSnapshotTestCase uses a “snapshot test case” that takes a configured UIView or CALayer and uses the renderInContext: method to get an image snapshot of its contents. It compares this snapshot to a “reference image” stored in your source code repository and fails the test if the two images don't match. Check out Writing your first FBsnapshot testcase from TestTalks alumni Andy Obusek.
¤1.6k Github stars
Herminoe (Formally Gemini) is a utility for regression testing the visual appearance of web pages. It is basically a browser test runner based on mocha and wdio
Check it out on Getting Started with Gemini
¤506 Github stars
4.Needle (Uses Python)
Needle is a tool for testing visuals with Selenium and nose.
It checks that visuals (CSS/fonts/images/SVG/etc.) render correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.
See an example in the Visual Regression Testing post.
¤463 Github stars
(Uses .NET and WD)
Vizregress is used to spot visual regression in your web application by comparing screen-shots against an approved set of screen-shots. This was created as a research project where they used TDD (Test Driven Development) to support visual regression testing. They also used SpecFlow as their BDD (Behavior Driven Development) tool to perform browser-based tests.
¤5 Github stars
6. VisualCeption (Uses PHP and CodeCeption)
VisualCeption uses a combination of the “make a screenshot” feature in webdriver, imagick, and jquery to compare visual elements on a website.
¤2 Github stars
Configured Based Visual Validation Tools:
BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time. A good place to get started with BackstopJs would be css-tricks article on automating CSS regression tests.
¤6k Github stars
8. Visual Regression Tracker
This is a new one on the list. Visual Regression Tracker is an open-source, self-hosted solution for visual testing and managing results of visual testing. It currently supports Cypress and Playwright.
At the time of this post, it's very new but something worth keeping an eye on since it is very feature-rich.
¤377 Github stars
10. Grunt Photobox
Grunt Photobox is a plugin to prevent your project of broken layout via screenshot photo sessions of your site.
¤277 Github stars
VIFF helps you to find visual differences between web pages in different environments (developing, staging, production) and browsers.
¤187 Github stars
GreenOnion helps solve the issue of having to catch regression bugs and solve the testing of HTML and CSS issues of having to be such a back and forth between designers and devs.
It also helps you to follow TDD and BDD against the presentation layer? GreenOnion helps you get the same results on testing front-end styling that you've enjoyed in your unit and integration tests up to now.
GreenOnion records ‘skins', which are snapshots of the current state of a view (or any page that a browser can navigate to). The first time that it is run on a view, it saves the skin; the second time that it is run, it will compare the first skin to the fresh (new) skin.
You can either compare with a diff image that is automatically created or by an outputted percentage of difference.
¤168 Github stars
13. CSS Visual Test
CSS Visual Test helps you to test your front-end components visually.
Currently supports components built with react and commonjs / browserify.
¤10 Github stars
14. Snap And Compare
SnapAndCompare is an easy to use screenshot comparison tool used for CSS Visual Regression Testing built using NodeJS.
¤8 Github stars
Grunt-Vigo is a simple visual regression testing tool using phantomJS 2
16. Galen Framework
Galen is more like a tool for developers to quickly verify that their layouts are not broken, but it is great for what it does.
You should check it out to see if it can handle what you are looking for.
It can do many thing like help you with:
- Review and approve changes to web pages, visual layouts and browser components
- Automate acceptance/regression tests for visual look and feel in a visual language
- Can use a BDD approacj to sketch (hand-drawn, wireframe, or from a graphic tool), easily compare actual outcomes, then just approve the final result to make a regression test