Release 1.9.5

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<void>}
      */
     async seeVisualDiff(baseImage, options) {}

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<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;
+}

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
    *
@@ -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,
@@ -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.`));
@@ -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)));
     }
   }
 
@@ -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) {
@@ -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) {

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",