@telus/nightwatch-visual

2.3.1 • Public • Published

Nightwatch VISUAL License

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

©️ TELUS digital • License: ISC • Github: @telus • Twitter: @telusdigital

Dependents (0)

Package Sidebar

Install

npm i @telus/nightwatch-visual

Weekly Downloads

31

Version

2.3.1

License

ISC

Unpacked Size

13.5 kB

Total Files

6

Last publish

Collaborators

  • pdufault
  • telusdigitaldelivery
  • stv-telus