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
└── ...

Workflow

1. Taking screenshot
2. Create new folders if not exist
3. Creating baseline files if not exist
4. Comparing images
5. Return assertion result

:copyright: TELUS digital • License: ISC • Github: @telus • Twitter: @telusdigital