Dayguard is a "plugin" for NightwatchJS that allows you to do CSS Regression tests.
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
Install the following dependencies:
$ npm install nwrun dayguard nightwatch chromedriver
Save the following script as
const chromedriver = ;const dayguard = ;const nwrun = ;const path = ;;
Save the following code as
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?
takeScreenshotFromElement() gets called dayguard will do the following:
- Save the screenshot as
- 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
ref.0.png— initial reference
ref.0_1.png— difference between
ref.1.png— second reference
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.