Skip to content

Commit 90595d3

Browse files
puneet0191miraojpmschuler
authoredNov 6, 2021
Release 1.9.5 (#100)
* Fixed optional param in JSDoc and generated TS definition (#99) * [TASK] fix relative paths for Mochawesome context screenshots (#97) * [TASK] fix relative paths for Mochawesome context screenshots * [TASK] improve relative path generation for cases where report is not in default folder * [TASK] switch to Path.relative * [TASK] add more pessimistic check for undefined options * [TASK] resolveRelativePath should not be public * [FEATURE] allow resemble.compare even if dimensions are not the same (#96) * [FEATURE] allow resemble.compare even if dimensions are not the same \n\nsee #94 * fix default value overriding custom value "false" * Update Version, Prepare for release. Co-authored-by: Jaromir Obr <jaromir.obr@gmail.com> Co-authored-by: jpmschuler <jpmschuler@users.noreply.github.com>
1 parent 3d9974d commit 90595d3

File tree

4 files changed

+183
-10
lines changed

4 files changed

+183
-10
lines changed
 

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ These are the major functions that help in visual testing:
4444

4545
First one is the `seeVisualDiff` which basically takes two parameters
4646
1) `baseImage` Name of the base image, this will be the image used for comparison with the screenshot image. It is mandatory to have the same image file names for base and screenshot image.
47-
2) `options` options can be passed which include `prepaseBaseImage` and `tolerance`.
47+
2) `options` options can be passed which include `prepaseBaseImage`, `tolerance` and `needsSameDimension`.
4848

4949
```js
5050
/**
5151
* Check Visual Difference for Base and Screenshot Image
5252
* @param baseImage Name of the Base Image (Base Image path is taken from Configuration)
53-
* @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
53+
* @param options Options ex {prepareBaseImage: true, tolerance: 5, needsSameDimension: false} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
5454
* @returns {Promise<void>}
5555
*/
5656
async seeVisualDiff(baseImage, options) {}

‎index.d.ts

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
export = ResembleHelper;
2+
/**
3+
* Resemble.js helper class for CodeceptJS, this allows screen comparison
4+
* @author Puneet Kala
5+
*/
6+
declare class ResembleHelper {
7+
constructor(config: any);
8+
baseFolder: any;
9+
diffFolder: any;
10+
screenshotFolder: string;
11+
prepareBaseImage: any;
12+
resolvePath(folderPath: any): any;
13+
/**
14+
* Compare Images
15+
*
16+
* @param image
17+
* @param options
18+
* @returns {Promise<resolve | reject>}
19+
*/
20+
_compareImages(image: any, options: any): Promise<any | any>;
21+
/**
22+
*
23+
* @param image
24+
* @param options
25+
* @returns {Promise<*>}
26+
*/
27+
_fetchMisMatchPercentage(image: any, options: any): Promise<any>;
28+
/**
29+
* Take screenshot of individual element.
30+
* @param selector selector of the element to be screenshotted
31+
* @param name name of the image
32+
* @returns {Promise<void>}
33+
*/
34+
screenshotElement(selector: any, name: any): Promise<void>;
35+
/**
36+
* This method attaches image attachments of the base, screenshot and diff to the allure reporter when the mismatch exceeds tolerance.
37+
* @param baseImage
38+
* @param misMatch
39+
* @param options
40+
* @returns {Promise<void>}
41+
*/
42+
_addAttachment(baseImage: any, misMatch: any, options: any): Promise<void>;
43+
/**
44+
* This method attaches context, and images to Mochawesome reporter when the mismatch exceeds tolerance.
45+
* @param baseImage
46+
* @param misMatch
47+
* @param options
48+
* @returns {Promise<void>}
49+
*/
50+
_addMochaContext(baseImage: any, misMatch: any, options: any): Promise<void>;
51+
/**
52+
* This method uploads the diff and screenshot images into the bucket with diff image under bucketName/diff/diffImage and the screenshot image as
53+
* bucketName/output/ssImage
54+
* @param accessKeyId
55+
* @param secretAccessKey
56+
* @param region
57+
* @param bucketName
58+
* @param baseImage
59+
* @param options
60+
* @returns {Promise<void>}
61+
*/
62+
_upload(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise<void>;
63+
/**
64+
* This method downloads base images from specified bucket into the base folder as mentioned in config file.
65+
* @param accessKeyId
66+
* @param secretAccessKey
67+
* @param region
68+
* @param bucketName
69+
* @param baseImage
70+
* @param options
71+
* @returns {Promise<void>}
72+
*/
73+
_download(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise<void>;
74+
/**
75+
* Check Visual Difference for Base and Screenshot Image
76+
* @param baseImage Name of the Base Image (Base Image path is taken from Configuration)
77+
* @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
78+
* @returns {Promise<void>}
79+
*/
80+
seeVisualDiff(baseImage: any, options?: any): Promise<void>;
81+
/**
82+
* See Visual Diff for an Element on a Page
83+
*
84+
* @param selector Selector which has to be compared expects these -> CSS|XPath|ID
85+
* @param baseImage Base Image for comparison
86+
* @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
87+
* @returns {Promise<void>}
88+
*/
89+
seeVisualDiffForElement(selector: any, baseImage: any, options?: any): Promise<void>;
90+
_assertVisualDiff(selector: any, baseImage: any, options: any): Promise<void>;
91+
/**
92+
* Function to prepare Base Images from Screenshots
93+
*
94+
* @param screenShotImage Name of the screenshot Image (Screenshot Image Path is taken from Configuration)
95+
* @param options
96+
*/
97+
_prepareBaseImage(screenShotImage: any, options: any): Promise<void>;
98+
/**
99+
* Function to create Directory
100+
* @param directory
101+
* @returns {Promise<void>}
102+
* @private
103+
*/
104+
private _createDir;
105+
/**
106+
* Function to fetch Bounding box for an element, fetched using selector
107+
*
108+
* @param selector CSS|XPath|ID selector
109+
* @returns {Promise<{boundingBox: {left: *, top: *, right: *, bottom: *}}>}
110+
*/
111+
_getBoundingBox(selector: any): Promise<{
112+
boundingBox: {
113+
left: any;
114+
top: any;
115+
right: any;
116+
bottom: any;
117+
};
118+
}>;
119+
_getHelper(): any;
120+
/**
121+
* Returns the final name of the expected base image, without a path
122+
* @param image Name of the base-image, without path
123+
* @param options Helper options
124+
* @returns {string}
125+
*/
126+
_getBaseImageName(image: any, options: any): string;
127+
/**
128+
* Returns the path to the expected base image
129+
* @param image Name of the base-image, without path
130+
* @param options Helper options
131+
* @returns {string}
132+
*/
133+
_getBaseImagePath(image: any, options: any): string;
134+
/**
135+
* Returns the path to the actual screenshot image
136+
* @param image Name of the image, without path
137+
* @returns {string}
138+
*/
139+
_getActualImagePath(image: any): string;
140+
/**
141+
* Returns the path to the image that displays differences between base and actual image.
142+
* @param image Name of the image, without path
143+
* @returns {string}
144+
*/
145+
_getDiffImagePath(image: any): string;
146+
/**
147+
* Returns the final `prepareBaseImage` flag after evaluating options and config values
148+
* @param options Helper options
149+
* @returns {boolean}
150+
*/
151+
_getPrepareBaseImage(options: any): boolean;
152+
}

‎index.js

+28-7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const getDirName = require('path').dirname;
66
const AWS = require('aws-sdk');
77
const path = require('path');
88
const sizeOf = require('image-size');
9+
const Container = require('codeceptjs/lib/container');
910

1011
/**
1112
* Resemble.js helper class for CodeceptJS, this allows screen comparison
@@ -29,6 +30,23 @@ class ResembleHelper extends Helper {
2930
return folderPath;
3031
}
3132

33+
_resolveRelativePath(folderPath) {
34+
let absolutePathOfImage = folderPath;
35+
if (!path.isAbsolute(absolutePathOfImage)) {
36+
absolutePathOfImage = path.resolve(global.codecept_dir, absolutePathOfImage) + "/";
37+
}
38+
let absolutePathOfReportFolder = global.output_dir;
39+
// support mocha
40+
if (Container.mocha() && typeof Container.mocha().options.reporterOptions.reportDir !== 'undefined') {
41+
absolutePathOfReportFolder = Container.mocha().options.reporterOptions.reportDir;
42+
}
43+
// support mocha-multi-reporters
44+
if (Container.mocha() && typeof Container.mocha().options.reporterOptions.mochawesomeReporterOptions.reportDir !== 'undefined') {
45+
absolutePathOfReportFolder = Container.mocha().options.reporterOptions.mochawesomeReporterOptions.reportDir;
46+
}
47+
return path.relative(absolutePathOfReportFolder, absolutePathOfImage);
48+
}
49+
3250
/**
3351
* Compare Images
3452
*
@@ -60,9 +78,12 @@ class ResembleHelper extends Helper {
6078

6179
return new Promise((resolve, reject) => {
6280

63-
if (!options.outputSettings) {
81+
if (options.outputSettings) {
6482
options.outputSettings = {};
6583
}
84+
if (typeof options.needsSameDimension === 'undefined') {
85+
options.needsSameDimension = true;
86+
}
6687
resemble.outputSettings({
6788
boundingBox: options.boundingBox,
6889
ignoredBox: options.ignoredBox,
@@ -76,7 +97,7 @@ class ResembleHelper extends Helper {
7697
if (err) {
7798
reject(err);
7899
} else {
79-
if (!data.isSameDimensions) {
100+
if (options.needsSameDimension && !data.isSameDimensions) {
80101
let dimensions1 = sizeOf(baseImage);
81102
let dimensions2 = sizeOf(actualImage);
82103
reject(new Error(`The base image is of ${dimensions1.height} X ${dimensions1.width} and actual image is of ${dimensions2.height} X ${dimensions2.width}. Please use images of same dimensions so as to avoid any unexpected results.`));
@@ -170,11 +191,11 @@ class ResembleHelper extends Helper {
170191

171192
if (mocha !== undefined && misMatch >= options.tolerance) {
172193
await mocha.addMochawesomeContext("Base Image");
173-
await mocha.addMochawesomeContext(this._getBaseImagePath(baseImage, options));
194+
await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getBaseImagePath(baseImage, options)));
174195
await mocha.addMochawesomeContext("ScreenShot Image");
175-
await mocha.addMochawesomeContext(this._getActualImagePath(baseImage));
196+
await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getActualImagePath(baseImage)));
176197
await mocha.addMochawesomeContext("Diff Image");
177-
await mocha.addMochawesomeContext(this._getDiffImagePath(baseImage));
198+
await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getDiffImagePath(baseImage)));
178199
}
179200
}
180201

@@ -286,7 +307,7 @@ class ResembleHelper extends Helper {
286307
/**
287308
* Check Visual Difference for Base and Screenshot Image
288309
* @param baseImage Name of the Base Image (Base Image path is taken from Configuration)
289-
* @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
310+
* @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
290311
* @returns {Promise<void>}
291312
*/
292313
async seeVisualDiff(baseImage, options) {
@@ -298,7 +319,7 @@ class ResembleHelper extends Helper {
298319
*
299320
* @param selector Selector which has to be compared expects these -> CSS|XPath|ID
300321
* @param baseImage Base Image for comparison
301-
* @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
322+
* @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
302323
* @returns {Promise<void>}
303324
*/
304325
async seeVisualDiffForElement(selector, baseImage, options) {

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "codeceptjs-resemblehelper",
3-
"version": "1.9.4",
3+
"version": "1.9.5",
44
"description": "Resemble Js helper for CodeceptJS, with Support for Playwright, Webdriver, TestCafe, Puppeteer & Appium",
55
"repository": {
66
"type": "git",

0 commit comments

Comments
 (0)
Please sign in to comment.