From 7a04f9c777632a416976f9b16e0ff912aacf6b3a Mon Sep 17 00:00:00 2001 From: Jaromir Obr Date: Tue, 2 Nov 2021 05:58:10 +0100 Subject: [PATCH 1/4] Fixed optional param in JSDoc and generated TS definition (#99) --- index.d.ts | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 4 +- 2 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..b760d60 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,152 @@ +export = ResembleHelper; +/** + * Resemble.js helper class for CodeceptJS, this allows screen comparison + * @author Puneet Kala + */ +declare class ResembleHelper { + constructor(config: any); + baseFolder: any; + diffFolder: any; + screenshotFolder: string; + prepareBaseImage: any; + resolvePath(folderPath: any): any; + /** + * Compare Images + * + * @param image + * @param options + * @returns {Promise} + */ + _compareImages(image: any, options: any): Promise; + /** + * + * @param image + * @param options + * @returns {Promise<*>} + */ + _fetchMisMatchPercentage(image: any, options: any): Promise; + /** + * Take screenshot of individual element. + * @param selector selector of the element to be screenshotted + * @param name name of the image + * @returns {Promise} + */ + screenshotElement(selector: any, name: any): Promise; + /** + * This method attaches image attachments of the base, screenshot and diff to the allure reporter when the mismatch exceeds tolerance. + * @param baseImage + * @param misMatch + * @param options + * @returns {Promise} + */ + _addAttachment(baseImage: any, misMatch: any, options: any): Promise; + /** + * This method attaches context, and images to Mochawesome reporter when the mismatch exceeds tolerance. + * @param baseImage + * @param misMatch + * @param options + * @returns {Promise} + */ + _addMochaContext(baseImage: any, misMatch: any, options: any): Promise; + /** + * This method uploads the diff and screenshot images into the bucket with diff image under bucketName/diff/diffImage and the screenshot image as + * bucketName/output/ssImage + * @param accessKeyId + * @param secretAccessKey + * @param region + * @param bucketName + * @param baseImage + * @param options + * @returns {Promise} + */ + _upload(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise; + /** + * This method downloads base images from specified bucket into the base folder as mentioned in config file. + * @param accessKeyId + * @param secretAccessKey + * @param region + * @param bucketName + * @param baseImage + * @param options + * @returns {Promise} + */ + _download(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise; + /** + * Check Visual Difference for Base and Screenshot Image + * @param baseImage Name of the Base Image (Base Image path is taken from Configuration) + * @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js + * @returns {Promise} + */ + seeVisualDiff(baseImage: any, options?: any): Promise; + /** + * See Visual Diff for an Element on a Page + * + * @param selector Selector which has to be compared expects these -> CSS|XPath|ID + * @param baseImage Base Image for comparison + * @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js + * @returns {Promise} + */ + seeVisualDiffForElement(selector: any, baseImage: any, options?: any): Promise; + _assertVisualDiff(selector: any, baseImage: any, options: any): Promise; + /** + * Function to prepare Base Images from Screenshots + * + * @param screenShotImage Name of the screenshot Image (Screenshot Image Path is taken from Configuration) + * @param options + */ + _prepareBaseImage(screenShotImage: any, options: any): Promise; + /** + * Function to create Directory + * @param directory + * @returns {Promise} + * @private + */ + private _createDir; + /** + * Function to fetch Bounding box for an element, fetched using selector + * + * @param selector CSS|XPath|ID selector + * @returns {Promise<{boundingBox: {left: *, top: *, right: *, bottom: *}}>} + */ + _getBoundingBox(selector: any): Promise<{ + boundingBox: { + left: any; + top: any; + right: any; + bottom: any; + }; + }>; + _getHelper(): any; + /** + * Returns the final name of the expected base image, without a path + * @param image Name of the base-image, without path + * @param options Helper options + * @returns {string} + */ + _getBaseImageName(image: any, options: any): string; + /** + * Returns the path to the expected base image + * @param image Name of the base-image, without path + * @param options Helper options + * @returns {string} + */ + _getBaseImagePath(image: any, options: any): string; + /** + * Returns the path to the actual screenshot image + * @param image Name of the image, without path + * @returns {string} + */ + _getActualImagePath(image: any): string; + /** + * Returns the path to the image that displays differences between base and actual image. + * @param image Name of the image, without path + * @returns {string} + */ + _getDiffImagePath(image: any): string; + /** + * Returns the final `prepareBaseImage` flag after evaluating options and config values + * @param options Helper options + * @returns {boolean} + */ + _getPrepareBaseImage(options: any): boolean; +} diff --git a/index.js b/index.js index 89da5dd..0592db0 100644 --- a/index.js +++ b/index.js @@ -286,7 +286,7 @@ class ResembleHelper extends Helper { /** * Check Visual Difference for Base and Screenshot Image * @param baseImage Name of the Base Image (Base Image path is taken from Configuration) - * @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js + * @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js * @returns {Promise} */ async seeVisualDiff(baseImage, options) { @@ -298,7 +298,7 @@ class ResembleHelper extends Helper { * * @param selector Selector which has to be compared expects these -> CSS|XPath|ID * @param baseImage Base Image for comparison - * @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js + * @param {any} [options] Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js * @returns {Promise} */ async seeVisualDiffForElement(selector, baseImage, options) { From 774ecd1b6b7c8bb52377db5e4fdd38d209da5f82 Mon Sep 17 00:00:00 2001 From: jpmschuler Date: Tue, 2 Nov 2021 05:58:23 +0100 Subject: [PATCH 2/4] [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 --- index.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 0592db0..04f0705 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ const getDirName = require('path').dirname; const AWS = require('aws-sdk'); const path = require('path'); const sizeOf = require('image-size'); +const Container = require('codeceptjs/lib/container'); /** * Resemble.js helper class for CodeceptJS, this allows screen comparison @@ -29,6 +30,23 @@ class ResembleHelper extends Helper { return folderPath; } + _resolveRelativePath(folderPath) { + let absolutePathOfImage = folderPath; + if (!path.isAbsolute(absolutePathOfImage)) { + absolutePathOfImage = path.resolve(global.codecept_dir, absolutePathOfImage) + "/"; + } + let absolutePathOfReportFolder = global.output_dir; + // support mocha + if (Container.mocha() && typeof Container.mocha().options.reporterOptions.reportDir !== 'undefined') { + absolutePathOfReportFolder = Container.mocha().options.reporterOptions.reportDir; + } + // support mocha-multi-reporters + if (Container.mocha() && typeof Container.mocha().options.reporterOptions.mochawesomeReporterOptions.reportDir !== 'undefined') { + absolutePathOfReportFolder = Container.mocha().options.reporterOptions.mochawesomeReporterOptions.reportDir; + } + return path.relative(absolutePathOfReportFolder, absolutePathOfImage); + } + /** * Compare Images * @@ -170,11 +188,11 @@ class ResembleHelper extends Helper { if (mocha !== undefined && misMatch >= options.tolerance) { await mocha.addMochawesomeContext("Base Image"); - await mocha.addMochawesomeContext(this._getBaseImagePath(baseImage, options)); + await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getBaseImagePath(baseImage, options))); await mocha.addMochawesomeContext("ScreenShot Image"); - await mocha.addMochawesomeContext(this._getActualImagePath(baseImage)); + await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getActualImagePath(baseImage))); await mocha.addMochawesomeContext("Diff Image"); - await mocha.addMochawesomeContext(this._getDiffImagePath(baseImage)); + await mocha.addMochawesomeContext(this.resolveImagePathRelativeFromReport(this._getDiffImagePath(baseImage))); } } From b8d7e2729e504235d29f33e1cfb29b7557dc9e27 Mon Sep 17 00:00:00 2001 From: jpmschuler Date: Tue, 2 Nov 2021 05:58:39 +0100 Subject: [PATCH 3/4] [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" --- README.md | 4 ++-- index.js | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 15b20e1..4aba0a9 100644 --- a/README.md +++ b/README.md @@ -44,13 +44,13 @@ These are the major functions that help in visual testing: First one is the `seeVisualDiff` which basically takes two parameters 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. -2) `options` options can be passed which include `prepaseBaseImage` and `tolerance`. +2) `options` options can be passed which include `prepaseBaseImage`, `tolerance` and `needsSameDimension`. ```js /** * Check Visual Difference for Base and Screenshot Image * @param baseImage Name of the Base Image (Base Image path is taken from Configuration) - * @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js + * @param options Options ex {prepareBaseImage: true, tolerance: 5, needsSameDimension: false} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js * @returns {Promise} */ async seeVisualDiff(baseImage, options) {} diff --git a/index.js b/index.js index 04f0705..a1bb286 100644 --- a/index.js +++ b/index.js @@ -78,9 +78,12 @@ class ResembleHelper extends Helper { return new Promise((resolve, reject) => { - if (!options.outputSettings) { + if (options.outputSettings) { options.outputSettings = {}; } + if (typeof options.needsSameDimension === 'undefined') { + options.needsSameDimension = true; + } resemble.outputSettings({ boundingBox: options.boundingBox, ignoredBox: options.ignoredBox, @@ -94,7 +97,7 @@ class ResembleHelper extends Helper { if (err) { reject(err); } else { - if (!data.isSameDimensions) { + if (options.needsSameDimension && !data.isSameDimensions) { let dimensions1 = sizeOf(baseImage); let dimensions2 = sizeOf(actualImage); 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.`)); From 31e91c3642345742103d198e551307ce3def0238 Mon Sep 17 00:00:00 2001 From: Puneet Kala Date: Tue, 2 Nov 2021 10:29:49 +0530 Subject: [PATCH 4/4] Update Version, Prepare for release. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 88249fd..e4bb398 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codeceptjs-resemblehelper", - "version": "1.9.4", + "version": "1.9.5", "description": "Resemble Js helper for CodeceptJS, with Support for Playwright, Webdriver, TestCafe, Puppeteer & Appium", "repository": { "type": "git",