pix-diff

Pix-Diff

A lightweight protractor plugin for image comparison

##Installation

Install this module locally with the following command:

npm install pix-diff

Save to dependencies or dev-dependencies:

npm install --save pix-diff
npm install --save-dev pix-diff

##Usage Pix-Diff can be used for:

• Desktop browsers (Chrome / Firefox / Safari / Internet Explorer 11 / Microsoft Edge)
• Mobile browsers (Chrome / Safari on simulators / real devices) via Appium

Refer to docs for more documentation and examples.

Conventions

There are directory and naming conventions that must be met.

Directory structure

path
└── to
    └── screenshots
        ├── diff
        │   └── examplePage-chrome-1280x1024.png
        ├── examplePage-chrome-800x600.png
        ├── examplePage-chrome-1280x1024.png
        ├── examplePageTitle-chrome-800x600.png
        └── examplePageTitle-chrome-1280x1024.png

The basePath directory must contain all the approved images. You may create subdirectories for better organisation, but the relative path should then be given in the test spec method. Failed comparisons generate a diff image under the diff folder.

Image naming

Images should obey the following default format:

{descriptionInCamelCase}-{browserName}-{width}x{height}-dpr-{dpr}.png

The naming convention can be customized by passing the parameter formatImageName with a format string like:

{browserName}_{tag}__{width}-{height}

The following variables can be passed to format the string

• browserName The browser name property from the capabilities
• deviceName The device name property from the capabilities
• dpr The device pixel ratio
• height The calculated DPR height
• logName The logName from capabilities
• name The name from capabilities
• width The calculated DPR width

Images specified via name in the spec method will be selected according to the tag name, then browsers current resolution. That is to say multiple images can share the same name differentiated by resolution.

##Tests

Local

• npm test or npm test -- local: Run all tests on a local machine with Chrome and Firefox.

Be sure to first run npm run wd-update to update the webdriver at least once after install.

Sauce Labs

• npm test -- saucelabs: This command is used to test the build on Travis-ci. It runs a variety of desktop and mobile browser Continuous Integration tests.

###Dependencies

• blink-diff
• png-image
• camel-case
• fs-extra

###Dev-Dependencies

• grunt
• grunt-cli
• grunt-contrib-clean
• grunt-conventional-changelog
• grunt-jsdoc-to-markdown
• grunt-protractor-runner
• jasmine-spec-reporter
• jshint
• load-grunt-tasks
• protractor

##License

The MIT License

Copyright 2016 Koola.