nightmarecss
v1.3.0
Published
A Nightmarecss plugin similar to phantomcss
Downloads
5
Maintainers
Readme
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
import Nightmare from 'nightmare'
import NightmareCSS from 'nightmarecss'
import screenshotSelector from 'nightmare-screenshot-selector'
Nightmare.action('screenshotSelector', screenshotSelector)
jasmine.DEFAULT_TIMEOUT_INTERVAL = 30 * 1000
let nightmare = null
beforeEach(() => {
nightmare = new Nightmare()
nightmare.use(NightmareCSS({rebase: process.env.REBASE || false}))
})
afterEach(() => {
nightmare.halt()
})
test('checking', () => {
return nightmare
.goto('http://google.com')
.screenshotCompare('google')
.screenshotCompare('google-input', '.lst-c')
.compareAll()
})
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: 0.05,
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: 0.3,
largeImageThreshold: 1200,
useCrossOrigin: false
}
}
Jasmine and Jest
you might want to put
jasmine.DEFAULT_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 i
npm test
npm run lint
npx dist