Overview
Argus eyes does 3 things for you:
- Take screenshots of UI components in different views and branches
- Test the screenshots for visual differences
- Create images of the visual differences
Screenshots are caputured with PhantomJS, comparing sceenshots is done using Blink-diff.
Introduction
After installing, you want to tell argus eyes which pages and which components to check for visual regression. Argus eyes works by going over a straightforward JSON file containing the resolutions you want to capture, as well as the pages with their url's, and the components with their CSS-selectors.
Once argus eyes knows where to find the components, it's time for some command line action. The first command you want
to use is $ argus-eyes capture master. This makes argus eyes go over the config file and take screenshots of
all specified components in there. The screenshots are saved in .argus-eyes/master and this set of screenshots can
be compared with another set.
Say you want to compare the components in your dev branch with those in your master branch. Now is the time to switch
branches and do a new $ argus-eyes capture dev.
To compare the 2 sets you run $ argus-eyes compare master dev, that's it! Argus eyes now checks all supposedly
identical screenshots for visual differences. If differences were found, a new folder .argus-eyes/diff_master_dev
is created. This folder contains overlay-images of the offending components, highlighting their differences in red.
Example
Authors
The initial idea and continued vision is a shared responsibility between Maarten Groeneweg and Bran van der Meer.
We strongly believe a visual regression testing tool should be looking for the sweet spot in collaboration between a Front-End Developer and a Test Engineer. That’s why we started working on Argus Eyes together.
For a list of all contributors, see the contributor graph.