dayguard
[![NPM version](https://badge.fury.io/js/dayguard.png)](http://badge.fury.io/js/dayguard)
Last updated 4 years ago by pateketrueke .
Original npm · Tarball · package.json
$ cnpm install dayguard 
SYNC missed versions from official npm registry.

NPM version

Dayguard is a "plugin" for NightwatchJS that allows you to do CSS Regression tests.

It's based on Resemble.js (for NodeJS) and gm for GraphicsMagick/ImageMagick support.

API

  • visualChangesOf(selector, customName, threshold) — will call low-level commands and test for differences
  • takeScreenshotFromElement(selector, customName, timeout) — takes a custom screenshot for the given selector
  • compareScreenshotFromElement(selector, customName, callback) — compare the differences between the last references

Example

Install the following dependencies:

$ npm install nwrun dayguard nightwatch chromedriver

Save the following script as runner.js:

const chromedriver = require('chromedriver');
const dayguard = require('dayguard');
const nwrun = require('nwrun');
const path = require('path');

nwrun({
  standalone: true,
  src_folders: path.join(__dirname, 'tests'),
  output_folder: path.join(__dirname, 'reports'),
  custom_commands_path: [dayguard.custom_commands_path],
  custom_assertions_path: [dayguard.custom_assertions_path],
  selenium: {
    cli_args: {
      'webdriver.chrome.driver': chromedriver.path,
    },
  },
  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: 'chrome',
      },
      screenshots: {
        enabled: true,
        path: path.join(__dirname, 'screenshots'),
      },
    },
  },
}, success => {
  if (!success) {
    process.exit(1);
  }
});

Save the following code as tests/dayguard.js:

module.exports = {
  'Load an example page just for testing': browser => {
    browser
      .url('http://randomcolour.com/')
      .waitForElementVisible('body', 200);
  },
  'Take a screenshot and ask for differences': browser => {
    browser
      .assert.visualChangesOf('body')
      .end();
  },
};

Now just execute node runner.js and see your tests fail.

Why? Because each time you load randoumcolour.com you'll get a different color...

How it works?

Each time takeScreenshotFromElement() gets called dayguard will do the following:

  • Save the screenshot as screenshots/<testName>/<selector>/ref.<offset|diff>.png
  • If there's no previous reference skip the next steps...
  • Compare the most recent screenshot with the latest one:
    • Fail if the difference is not below the given thresdold
    • Continue othwerwise...

Every used selector will keep its saved positions as screenshots/<testName>/<selector>/index.json where each array-item will match the <offset|diff> pattern:

  • ref.0.png — initial reference
  • ref.0_1.png — difference between 0 and 1 refs
  • ref.1.png — second reference
  • etc.

Using this cache dayguard is able to effectively report any difference found.

Why not use other tools?

Dayguard leverages on NightwatchJS (Webdriver → Selenium) so you can take screenshots from real browsers and not just headless ones.

I've got really tired from trying other solutions (NightwatchCSS, PhantomJS, PhantomCSS, CasperJS, Grunt, Gulp, etc.) that relies on "toy" browsers exposing ugly APIs to enjoy.

Meh.

Current Tags

  • 0.2.1                                ...           latest (3 years ago)

10 Versions

  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
  • 0.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dependencies (3)
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |