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

Example of argus eyes visual regression testing baseline current diff

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.