Nightwatch.js utility assertion for visual testing

Usage no npm install needed!

<script type="module">
  import telusNightwatchVisual from 'https://cdn.skypack.dev/@telus/nightwatch-visual';


Nightwatch VISUAL License

Screenshot comparison assertion for Nightwatch.js


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.


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


Update your nightwatch config:

  custom_assertions_path: [


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


  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