Nightwatch assertions to compare screenshots in your tests. Currently under development and contains a bunch of hardcoded options. Do not use yet, but please let me know if you want too.
The module is now based on webdriver-image-comparison module. Thanks a lot Wim Selles for creating and open sourcing it!
- Install module
npm install --save-dev @nitive/nightwatch-image-comparison
- Configure module in
nightwatch.conf.js
const path = require('path')
const nightwatchImageComparison = require('@nitive/nightwatch-image-comparison')
module.exports = {
globals: {
screenshots: {
testsRootDir: path.join(__dirname, 'tests'), // required
screenshotsRootDir: path.join(__dirname, 'screenshots'), // required
skipScreenshotAssertions: false, // default: false
},
},
custom_assertions_path: [nightwatchImageComparison.assertionsPath],
}
Making screenshot of all page
browser.assert.screenshotPage('full authorization page')
Make a screenshot of element with selector [data-test-id="auth-form"]
browser.assert.screenshotElement(
'[data-test-id="auth-form"]',
'Authorization form before filling: every field is empty'
)
Specifing allowed mismatch percentage. Try not to use it because it can lead to missing unexpected changes.
browser.assert.screenshotElement(
'[data-test-id="confirm-registration-form"]',
'Confirmation form: fields are empty, submit button is disabled',
{
// Rendering in IE is slightly different every time
allowedMisMatchPercentage: 0.5, // 0,5%
}
)
Hide some selectors before taking screenshot
browser.assert.screenshotElement(
'[data-test-id="confirm-registration-form"]',
'форма подтверждения регистрации: поля не заполнены, кнопка отправки задизейблена',
{
hideSelectors: [
// Email is different every test run (created randomly)
'[data-test-id="auth-form-email-field"]',
],
}
)
- It's best to describe expected screenshot content. It will help to validate screenshots on code review.
- Use Git LFS to store a lot of images in repository