Home

snappit-mocha-protractor is a library that sits on top of protractor that allows you to take screenshots of the browser as you run your normal protractor tests. Requires the use of mocha. snappit-mocha-protractor automatically organizes your screenshots in your project. It ships with binaries to help you manage your screenshots in a dedicated github repository for just your screenshots, so you don't clutter up your project's git history large screenshot artifacts. This allows you to track the visual changes in your application alongside changes to the code that renders your website.

Introduction

First, you need to get some image manipulation software installed on your machine, and then install and compile snappit-mocha-protractor.

node <(curl -s https://raw.githubusercontent.com/rackerlabs/snappit-mocha-protractor/master/bin/systemDepsInstaller.js)
npm i --save-dev snappit-mocha-protractor

Once you've got it installed, it's best to create a new protractor conf file dedicated to testing just visual regressions. It's not always helpful to mix functional testing with visual checks. Once you've created a new conf file, add a special snappit section for configuring snappit-mocha-protractor.

protractor.visreg.conf.js

exports.config = {
    framework: 'mocha',

    snappit: {
        defaultResolutions: [[1366, 768], [768, 1366]],  // laptop
    },

    onPrepare: function () {
        screenshot = require('snappit-mocha-protractor');
    }

    // ...

};

At this point, you're ready to start using the function screenshot.snap in your tests to create some screenshots.

yourTest.js

describe('Angular JS', function () {
    before(function () {
        browser.get('https://docs.angularjs.org/tutorial');
    });

    it('should be on the right page', function () {
        // full screen image
        screenshot.snap(this);
    });

    it('should have some buttons on the homepage', function () {
        browser.get('https://angularjs.org')
        let buttons = $('.center.stage-buttons');
        // image of just the buttons
        screenshot.snap(this, buttons);
    });
});

Warning: Do not use "fat-arrow" functions

Fat-arrow functions (=>) in node version 4+ will break this tool! It depends on mocha's this context to be passed into each call of screenshot.snap, and fat-arrows change the way that the this context is handled in your tests.

Once you run this test, you'll notice that some extra info has been added to your mocha test output.

  Angular JS
New screenshot added: 1024x0768-full-screen.png
    ✓ should be on the right page (7228ms)
New screenshot added: 1024x0768-By(css selector, .center.stage-buttons).png
New screenshot added: 1366x0768-By(css selector, .center.stage-buttons).png
    ✓ should have some buttons on the homepage (7872ms)


  2 passing (17s)

These are the screenshots that would appear in your ./screenshots directory.

chrome/test/spec/Angular-JS-should-be-on-the-right-page/0768x1024-full-screen.png

chrome/test/spec/Angular-JS-should-have-some-buttons-on-the-homepage/1366x768-By(css selector, .center.stage-buttons).png

chrome/test/spec/Angular-JS-should-have-some-buttons-on-the-homepage/0768x1024-By(css selector, .center.stage-buttons).png

These are designed to be checked into a git repository, but you probably don't want to check them into your team's project alongside all the developer code. That's where the built-in snappit-ci helpers come in. They make it easy to store your screenshots in a dedicated screenshots repository, and will alert you in pull requests when visual elements change in your projects.