Skip to content

Commit

Permalink
Release 1.9.5 (#100)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
Co-authored-by: jpmschuler <[email protected]>
  • Loading branch information
3 people authored Nov 6, 2021
1 parent 3d9974d commit 90595d3
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 10 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<void>}
*/
async seeVisualDiff(baseImage, options) {}
Expand Down
152 changes: 152 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -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<resolve | reject>}
*/
_compareImages(image: any, options: any): Promise<any | any>;
/**
*
* @param image
* @param options
* @returns {Promise<*>}
*/
_fetchMisMatchPercentage(image: any, options: any): Promise<any>;
/**
* Take screenshot of individual element.
* @param selector selector of the element to be screenshotted
* @param name name of the image
* @returns {Promise<void>}
*/
screenshotElement(selector: any, name: any): Promise<void>;
/**
* 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<void>}
*/
_addAttachment(baseImage: any, misMatch: any, options: any): Promise<void>;
/**
* This method attaches context, and images to Mochawesome reporter when the mismatch exceeds tolerance.
* @param baseImage
* @param misMatch
* @param options
* @returns {Promise<void>}
*/
_addMochaContext(baseImage: any, misMatch: any, options: any): Promise<void>;
/**
* 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<void>}
*/
_upload(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise<void>;
/**
* 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<void>}
*/
_download(accessKeyId: any, secretAccessKey: any, region: any, bucketName: any, baseImage: any, options: any): Promise<void>;
/**
* 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<void>}
*/
seeVisualDiff(baseImage: any, options?: any): Promise<void>;
/**
* 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<void>}
*/
seeVisualDiffForElement(selector: any, baseImage: any, options?: any): Promise<void>;
_assertVisualDiff(selector: any, baseImage: any, options: any): Promise<void>;
/**
* 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<void>;
/**
* Function to create Directory
* @param directory
* @returns {Promise<void>}
* @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;
}
35 changes: 28 additions & 7 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
*
Expand Down Expand Up @@ -60,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,
Expand All @@ -76,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.`));
Expand Down Expand Up @@ -170,11 +191,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)));
}
}

Expand Down Expand Up @@ -286,7 +307,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<void>}
*/
async seeVisualDiff(baseImage, options) {
Expand All @@ -298,7 +319,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<void>}
*/
async seeVisualDiffForElement(selector, baseImage, options) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down

0 comments on commit 90595d3

Please sign in to comment.