-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.js
181 lines (170 loc) · 7.56 KB
/
index.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
const resemble = require('nodejs-resemble');
const fs = require('fs');
const parentModule = require('parent-module');
const path = require('path');
const sharp = require('sharp');
const DEFAULT_COMPRESSION = 85;
const DEFAULT_PNG_COMPRESSION = 8;
// currying everywhere, that allows us to create one setup and then use tester without copying config each time
const ScreenTestFactory = function(
threshold = 0,
includeAA = false,
ignoreColors = false,
matchingBox = {
ignoreRectangles: [],
includeRectangles: []
},
errorSettings = {
errorColor: {
red: 255,
green: 0,
blue: 255
},
errorType: 'flat',
transparency: 0.7
},
outputSettings = {
forceExt: null,
compressionLevel: null,
overrides: {}
}) {
if(Array.isArray(matchingBox)) {
console.error(`You're using old version of API, please refer to https://github.com/burnpiro/puppeteer-screenshot-tester/releases/tag/1.3.0`);
matchingBox = {
ignoreRectangles: matchingBox,
includeRectangles: []
}
}
resemble.outputSettings(errorSettings);
// get path to called directory
// cannot use __directory because it returns module directory instead of caller
const folderPath = path.dirname(parentModule());
return new Promise( resolve => {
resolve(async (page, name = 'test', screenshotOptions = {}) => {
let saveFolder = folderPath;
let ext = screenshotOptions.type ? `.${screenshotOptions.type}` : '.png';
if(screenshotOptions.path != null) {
const puppeteerExt = path.extname(screenshotOptions.path);
const puppeteerPath = path.dirname(screenshotOptions.path);
const puppeteerFileName = path.basename(screenshotOptions.path, puppeteerExt);
if(typeof puppeteerFileName === 'string' && puppeteerFileName.length > 0 && typeof puppeteerPath === 'string' && puppeteerPath.length > 0) {
saveFolder = puppeteerPath;
name = puppeteerFileName;
ext = puppeteerExt || '.png';
}
delete screenshotOptions.path;
}
// get existing image, might return undefined
const oldImage = await getOldImageData(saveFolder, name, ext);
// get page object from puppeteer and create screenshot without path to receive Buffer
const screenShot = await page.screenshot(screenshotOptions);
if (oldImage !== undefined) {
// call comparison between images
const comparisonResult = resemble(screenShot)
.compareTo(oldImage);
// Add extra options if specified
if (!includeAA) {
comparisonResult.ignoreAntialiasing()
}
if (ignoreColors) {
comparisonResult.ignoreColors()
}
if (Array.isArray(matchingBox.ignoreRectangles) && matchingBox.ignoreRectangles.length > 0) {
comparisonResult.ignoreRectangles(matchingBox.ignoreRectangles)
}
if (Array.isArray(matchingBox.includeRectangles) && matchingBox.includeRectangles.length > 0) {
comparisonResult.includeRectangles(matchingBox.includeRectangles)
}
// await for a comparison to be completed and return resolved value
return await new Promise(resolve => {
comparisonResult.onComplete((data) => {
// check if images are the same dimensions and mismatched pixels are below threshold
if (data.isSameDimensions === false || Number(data.misMatchPercentage) > threshold) {
// save diff to test folder with '-diff' postfix
const storeExt = outputSettings.forceExt != null ? outputSettings.forceExt : ext.substring(ext.lastIndexOf(".")+1);
const overrides = outputSettings.overrides || {};
const extFormatter = {
'jpeg': () => sharp().jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides }),
'jpg': () => sharp().jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides }),
'png': () => sharp().png({ compressionLevel: outputSettings.compressionLevel || DEFAULT_PNG_COMPRESSION, ...overrides }),
'webp': () => sharp().webp({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides })
}
data.getDiffImage().pack()
.pipe(extFormatter[storeExt]())
.pipe(fs.createWriteStream(`${saveFolder}/${name}-diff${ext}`));
// optionally save the new image to the test directory
if (screenshotOptions.saveNewImageOnError || screenshotOptions.overwriteImageOnChange) {
const newFilePath = screenshotOptions.overwriteImageOnChange ? `${saveFolder}/${name}${ext}` : `${saveFolder}/${name}-new${ext}`;
switch (storeExt) {
case 'jpeg':
case 'jpg':
sharp(screenShot)
.jpeg({quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides})
.toFile(newFilePath);
break;
case 'webp':
sharp(screenShot)
.webp({quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides})
.toFile(newFilePath);
break;
default:
sharp(screenShot)
.png({compressionLevel: outputSettings.compressionLevel || DEFAULT_PNG_COMPRESSION, ...overrides})
.toFile(newFilePath);
}
}
resolve(false)
} else {
resolve(true)
}
});
});
} else {
// if there is no old image we cannot compare two images so just write existing screenshot as default image
// fs.writeFileSync(`${saveFolder}/${name}${ext}`, screenShot);
const storeExt = outputSettings.forceExt != null ? outputSettings.forceExt : ext.substring(ext.lastIndexOf(".")+1);
const overrides = outputSettings.overrides || {};
switch (storeExt) {
case 'jpeg':
case 'jpg':
await sharp(screenShot)
.jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides })
.toFile(`${saveFolder}/${name}${ext}`);
break;
case 'webp':
await sharp(screenShot)
.webp({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION, ...overrides })
.toFile(`${saveFolder}/${name}${ext}`);
break;
default:
await sharp(screenShot)
.png({ compressionLevel: outputSettings.compressionLevel || DEFAULT_PNG_COMPRESSION, ...overrides })
.toFile(`${saveFolder}/${name}${ext}`);
}
console.log('There was nothing to compare, current screens saved as default');
return true;
}
})
})
}
// returns promise which resolves with undefined or PNG object
const getOldImageData = function(folderPath, name = 'test', ext = 'png') {
return new Promise((resolve) => {
fs.stat(`${folderPath}/${name}${ext}`, (error) => {
if (error) {
// if there is an error resolve with undefined
resolve();
} else {
// if file exists just get file and pipe it into PNG
fs.readFile(`${folderPath}/${name}${ext}`, (err, data) => {
if (err || !data instanceof Buffer) {
resolve();
} else {
resolve(data);
}
})
}
})
})
}
module.exports = ScreenTestFactory