comparadise-utils 0.0.10 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/images.d.ts +1 -1
- package/dist/images.js +9 -9
- package/dist/match-screenshot.js +11 -10
- package/dist/screenshots.d.ts +1 -1
- package/dist/screenshots.js +5 -6
- package/package.json +1 -1
package/dist/images.d.ts
CHANGED
package/dist/images.js
CHANGED
|
@@ -22,11 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
25
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
29
|
exports.getDiffPixels = void 0;
|
|
27
30
|
const fs = __importStar(require("fs"));
|
|
28
31
|
const pngjs_1 = require("pngjs");
|
|
29
|
-
const
|
|
32
|
+
const pixelmatch_1 = __importDefault(require("pixelmatch"));
|
|
30
33
|
const PIXELMATCH_OPTIONS = {
|
|
31
34
|
threshold: 0.3
|
|
32
35
|
};
|
|
@@ -48,7 +51,7 @@ const fillSizeDifference = (width, height) => (image) => {
|
|
|
48
51
|
for (let y = 0; y < image.height; y++) {
|
|
49
52
|
for (let x = 0; x < image.width; x++) {
|
|
50
53
|
if (inArea(x, y)) {
|
|
51
|
-
const idx = (
|
|
54
|
+
const idx = (image.width * y + x) << 2;
|
|
52
55
|
image.data[idx] = 0;
|
|
53
56
|
image.data[idx + 1] = 0;
|
|
54
57
|
image.data[idx + 2] = 0;
|
|
@@ -76,7 +79,7 @@ function alignImagesToSameSize(firstImage, secondImage) {
|
|
|
76
79
|
// Fill resized area with black transparent pixels
|
|
77
80
|
return [
|
|
78
81
|
fillSizeDifference(firstImageWidth, firstImageHeight)(resizedFirst),
|
|
79
|
-
fillSizeDifference(secondImageWidth, secondImageHeight)(resizedSecond)
|
|
82
|
+
fillSizeDifference(secondImageWidth, secondImageHeight)(resizedSecond)
|
|
80
83
|
];
|
|
81
84
|
}
|
|
82
85
|
/**
|
|
@@ -88,13 +91,10 @@ function alignImagesToSameSize(firstImage, secondImage) {
|
|
|
88
91
|
function getDiffPixels(basePath, actualPath) {
|
|
89
92
|
const rawBase = pngjs_1.PNG.sync.read(fs.readFileSync(basePath));
|
|
90
93
|
const rawActual = pngjs_1.PNG.sync.read(fs.readFileSync(actualPath));
|
|
91
|
-
const hasSizeMismatch =
|
|
92
|
-
|
|
93
|
-
const [base, actual] = hasSizeMismatch
|
|
94
|
-
? alignImagesToSameSize(rawBase, rawActual)
|
|
95
|
-
: [rawBase, rawActual];
|
|
94
|
+
const hasSizeMismatch = rawBase.height !== rawActual.height || rawBase.width !== rawActual.width;
|
|
95
|
+
const [base, actual] = hasSizeMismatch ? alignImagesToSameSize(rawBase, rawActual) : [rawBase, rawActual];
|
|
96
96
|
const diff = new pngjs_1.PNG({ width: base.width, height: base.height });
|
|
97
|
-
const diffPixels =
|
|
97
|
+
const diffPixels = (0, pixelmatch_1.default)(actual.data, base.data, diff.data, diff.width, diff.height, PIXELMATCH_OPTIONS);
|
|
98
98
|
return { diffPixels, diff };
|
|
99
99
|
}
|
|
100
100
|
exports.getDiffPixels = getDiffPixels;
|
package/dist/match-screenshot.js
CHANGED
|
@@ -3,7 +3,7 @@ const PREFIX_DIFFERENTIATOR = '___';
|
|
|
3
3
|
const SUFFIX_TEST_IDENTIFIER = '.spec.ts';
|
|
4
4
|
const SCREENSHOTS_FOLDER_NAME = 'screenshots';
|
|
5
5
|
function forceFont() {
|
|
6
|
-
const iframe = window.parent.document.querySelector(
|
|
6
|
+
const iframe = window.parent.document.querySelector('iframe');
|
|
7
7
|
const contentDocument = iframe && iframe.contentDocument;
|
|
8
8
|
if (contentDocument) {
|
|
9
9
|
const style = contentDocument.createElement('style');
|
|
@@ -19,10 +19,8 @@ function getTestFolderPathFromScripts(rawName) {
|
|
|
19
19
|
if (!relativeTestPath) {
|
|
20
20
|
throw new Error('❌ Could not find matching script in the Cypress DOM to infer the test folder path');
|
|
21
21
|
}
|
|
22
|
-
// i.e. payment-card-cvvdialog
|
|
23
22
|
const testName = relativeTestPath.substring(relativeTestPath.lastIndexOf('/') + 1, relativeTestPath.lastIndexOf(SUFFIX_TEST_IDENTIFIER));
|
|
24
23
|
const name = rawName || testName;
|
|
25
|
-
// i.e. screenshots/packages/flights/forced-choice/test/visual/forced-choice/payment-card-cvvdialog
|
|
26
24
|
const screenshotsFolder = `${SCREENSHOTS_FOLDER_NAME}/${relativeTestPath.substring(0, relativeTestPath.lastIndexOf(testName))}${name}`;
|
|
27
25
|
return {
|
|
28
26
|
name,
|
|
@@ -31,12 +29,14 @@ function getTestFolderPathFromScripts(rawName) {
|
|
|
31
29
|
}
|
|
32
30
|
function verifyImages() {
|
|
33
31
|
if (Cypress.$('img:visible').length > 0) {
|
|
34
|
-
cy.document()
|
|
32
|
+
cy.document()
|
|
33
|
+
.its('body')
|
|
34
|
+
.find('img')
|
|
35
|
+
.filter(':visible')
|
|
36
|
+
.then(images => {
|
|
35
37
|
if (images) {
|
|
36
|
-
cy.wrap(images).each(
|
|
37
|
-
cy.wrap($img)
|
|
38
|
-
.should('exist')
|
|
39
|
-
.and('have.prop', 'naturalWidth');
|
|
38
|
+
cy.wrap(images).each($img => {
|
|
39
|
+
cy.wrap($img).should('exist').and('have.prop', 'naturalWidth');
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
});
|
|
@@ -49,7 +49,7 @@ function matchScreenshot(subject, args) {
|
|
|
49
49
|
// Making sure each image is visible before taking screenshots
|
|
50
50
|
verifyImages();
|
|
51
51
|
const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
|
|
52
|
-
cy.task('baseExists', screenshotsFolder).then(
|
|
52
|
+
cy.task('baseExists', screenshotsFolder).then(hasBase => {
|
|
53
53
|
const type = 'new';
|
|
54
54
|
const target = subject ? cy.wrap(subject) : cy;
|
|
55
55
|
// For easy slicing of path ignoring the root screenshot folder
|
|
@@ -58,8 +58,9 @@ function matchScreenshot(subject, args) {
|
|
|
58
58
|
cy.task('createNewScreenshot', screenshotsFolder).then(() => {
|
|
59
59
|
cy.task('log', `✅ A new base image was created for ${name}. Create this as a new base image via Comparadise!`);
|
|
60
60
|
});
|
|
61
|
+
return;
|
|
61
62
|
}
|
|
62
|
-
cy.task('compareScreenshots', screenshotsFolder).then(
|
|
63
|
+
cy.task('compareScreenshots', screenshotsFolder).then(diffPixels => {
|
|
63
64
|
if (diffPixels === 0) {
|
|
64
65
|
cy.log(`✅ Actual image of ${name} was the same as base`);
|
|
65
66
|
return null;
|
package/dist/screenshots.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export declare function createNewScreenshot(screenshotFolder: string): null;
|
|
|
11
11
|
* @param screenshotFolder - Full screenshots folder where the base/new/diff
|
|
12
12
|
* images will be compared and written to.
|
|
13
13
|
*/
|
|
14
|
-
export declare function compareScreenshots(screenshotFolder: string):
|
|
14
|
+
export declare function compareScreenshots(screenshotFolder: string): number;
|
|
15
15
|
/**
|
|
16
16
|
* Renames all root cypress screenshots to where the test was actually run.
|
|
17
17
|
* Should NOT be used standalone. Works with the matchScreenshot task.
|
package/dist/screenshots.js
CHANGED
|
@@ -44,7 +44,7 @@ function baseExists(path) {
|
|
|
44
44
|
exports.baseExists = baseExists;
|
|
45
45
|
function createNewScreenshot(screenshotFolder) {
|
|
46
46
|
const newImage = pngjs_1.PNG.sync.read(fs.readFileSync((0, files_1.createImageFileName)(screenshotFolder, 'new')));
|
|
47
|
-
fs.writeFile((0, files_1.createImageFileName)(screenshotFolder, 'new'), pngjs_1.PNG.sync.write(newImage),
|
|
47
|
+
fs.writeFile((0, files_1.createImageFileName)(screenshotFolder, 'new'), pngjs_1.PNG.sync.write(newImage), err => {
|
|
48
48
|
if (err) {
|
|
49
49
|
console.error('❌Unable to create new.png', err);
|
|
50
50
|
}
|
|
@@ -63,7 +63,7 @@ function compareScreenshots(screenshotFolder) {
|
|
|
63
63
|
const { diffPixels, diff } = (0, images_1.getDiffPixels)(basePath, actualPath);
|
|
64
64
|
if (diffPixels) {
|
|
65
65
|
// Create diff.png next to base and new for review
|
|
66
|
-
fs.writeFile((0, files_1.createImageFileName)(screenshotFolder, 'diff'), pngjs_1.PNG.sync.write(diff),
|
|
66
|
+
fs.writeFile((0, files_1.createImageFileName)(screenshotFolder, 'diff'), pngjs_1.PNG.sync.write(diff), err => {
|
|
67
67
|
if (err) {
|
|
68
68
|
console.error('❌Diff exists but unable to create diff.png', err);
|
|
69
69
|
}
|
|
@@ -71,7 +71,7 @@ function compareScreenshots(screenshotFolder) {
|
|
|
71
71
|
}
|
|
72
72
|
else {
|
|
73
73
|
// Delete created new.png. Not needed if there's no diff
|
|
74
|
-
fs.unlink(actualPath,
|
|
74
|
+
fs.unlink(actualPath, err => {
|
|
75
75
|
if (err) {
|
|
76
76
|
console.error('❌No diff but unable to deleteactualPath}', err);
|
|
77
77
|
}
|
|
@@ -91,8 +91,7 @@ function onAfterScreenshot(details) {
|
|
|
91
91
|
return Promise.resolve({});
|
|
92
92
|
}
|
|
93
93
|
const getNewPath = (path) => {
|
|
94
|
-
let newPath = path
|
|
95
|
-
.slice(path.lastIndexOf('___') + 3);
|
|
94
|
+
let newPath = path.slice(path.lastIndexOf('___') + 3);
|
|
96
95
|
console.log(newPath);
|
|
97
96
|
if (newPath.startsWith('/')) {
|
|
98
97
|
newPath = `.${newPath}`;
|
|
@@ -109,7 +108,7 @@ function onAfterScreenshot(details) {
|
|
|
109
108
|
console.error('❌ Error creating new screenshot folder:', newPathDir, err);
|
|
110
109
|
}
|
|
111
110
|
return new Promise((resolve, reject) => {
|
|
112
|
-
fs.rename(details.path, newPath,
|
|
111
|
+
fs.rename(details.path, newPath, err => {
|
|
113
112
|
if (err) {
|
|
114
113
|
reject(err);
|
|
115
114
|
}
|
package/package.json
CHANGED