Nightmare CSS
This is a plugin for nightmare so you can do similar things as with phantomcss
Installation
npm i -D nightmarecss
optional, if you want selectors
npm i -D nightmare-screenshot-selector
Usage
Example jest test
Nightmareaction'screenshotSelector' screenshotSelector jasmineDEFAULT_TIMEOUT_INTERVAL = 30 * 1000 let nightmare = null
this will create:
./screenshots/google.current.png
./screenshots/google.latest.png
./screenshots/google-input.current.png
./screenshots/google-input.latest.png
and if there is a diff then it will create appropriate *.diff.png
files
screenshotCompare
if you want to get the default screenshot
screenshotCompare('google')
if you want to use a selector you need to install nightmare-screenshot-selector
screenshotCompare('google-input', '.lst-c')
compareAll
compareAll()
this will call .end
for you so don't have to call it as part of your test, if you want to continue to do this after this; chain .then
options
these are the defualt options
see Resemble.js for more details
// fs screenshotRoot: './screenshots' diffExtension: 'diff' currentExtension: 'current' latestExtension: 'latest' // nightmarecss tolerance: 005 rebase: false // replaces .latest.jpg with .current.jpg // resemble options ignoreAntialiasing: true ignoreNothing: false ignoreColors: false outputSettings: errorColor: red: 255 green: 255 blue: 0 errorType: 'movement' transparency: 03 largeImageThreshold: 1200 useCrossOrigin: false
Jasmine and Jest
you might want to put
jasmineDEFAULT_TIMEOUT_INTERVAL = 30 * 1000
in your tests, depends on how quick your machine is if you need it but makes tests a little more stable for slow machines
Rebasing
in the example above you can do NightmareCSS({rebase: process.env.REBASE || false})
which means you can run
REBASE=true npm test
and it will rebase your images
Git Ignore
You will want to add this to your git ignore
*.diff.png*.latest.png
you don't want to commit these files
Developing
install, test, lint, dist
npm inpm testnpm run lintnpx dist