-
Notifications
You must be signed in to change notification settings - Fork 7
/
visual-regression.spec.js
47 lines (40 loc) · 1.33 KB
/
visual-regression.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const puppeteer = require('puppeteer');
const fs = require('fs');
const looksSame = require('looks-same');
// You can switch to using https://github.com/mapbox/pixelmatch#nodejs
// If you prefer to keep a diff image in your reports
// Inspiration: https://github.com/trentmwillis/devtools-protocol-demos/blob/master/testing-demos/visual-regression.js
const takeScreenshot = async (page, title) => {
if (!fs.existsSync('./.screenshots')) {
fs.mkdirSync('./.screenshots');
}
const filePath = `./.screenshots/${title}.png`;
if (fs.existsSync(filePath)) {
const newFilePath = `./.screenshots/${title}-new.png`;
await page.screenshot({
path: newFilePath,
fullPage: true
});
const result = await new Promise(resolve => looksSame(filePath, newFilePath, (err, equal) => resolve(equal)));
fs.unlinkSync(newFilePath);
return result;
} else {
await page.screenshot({
path: filePath,
fullPage: true
});
return true;
}
};
beforeAll(async () => {
this.browser = await puppeteer.launch();
});
afterAll(async () => {
await this.browser.close();
});
test('asserts visual regression on the main page', async() => {
const page = await this.browser.newPage();
await page.goto('https://pptr.dev');
expect(await takeScreenshot(page, 'main-page.1')).toBeTruthy();
await page.close();
}, 20000);