@telus/nightwatch-visual NPM

Nightwatch VISUAL

Screenshot comparison assertion for Nightwatch.js

Description

This custom assertion allows you to easily integrate visual regression testing into a Nightwatch test suite.

It uses resemble.js to compare your code change against your approved baseline screenshots of your application.

Installation

# using npm
npm install --global @telus/build-essential
npm install --only-production --save @telus/nightwatch-visual

Usage

Update your nightwatch config:

{
  custom_assertions_path: [
    './node_modules/@telus/nightwatch-visual/assertions',
    './node_modules/@telus/nightwatch-visual/commands'
  ]
}

...

  "test_settings": {
      "nightwatch_visual": {
        "visualTesting": "enabled"
        "defaultSelector": "html",
        "defaultTolerance": 3,
        "defaultPath": "./nightwatch-visual"
      },

Mount your screenshot folder in your Dockerfile

RUN chmod -R g+w /app/tests/nightwatch-visual \

Use in your tests:

module.exports = {
  Test: function(browser) {
    browser.assert.compareScreenshot(fileName, selector, tolerance, path)
  }
}

Parameter	Default	Description
fileName	`browserName_browserVersion_testName.png`	Customized output when multiple screenshots on the same test: `browserName_browserVersion_fileName.png`
selector	'html'	CSS selector of the targeted component the assertion is ran against
tolerance	3	% of difference between the baseline and result images from which the assertion will fail
path	'path.join(__dirname, '../nightwatch-visual''	Folder where to save screenshots. Usefull especially when running with Docker

Workspace Structure

Screenshots will be saved in the \nightwatch-visual\your-test-name\ folders

.
├── nightwatch-visual
│   └── testName
│       ├── baseline
│       │   └── browserName_browserVersion_testName.png
│       ├── diffs
│       │   └── browserName_browserVersion_testName.png
│       └── results
│           └── browserName_browserVersion_testName.png
├── test
│   └── specs
│       └── testName.js
└── ...