Merge branch 'master' into screenshotFolder

Author: Kartikeya99

README.md

@@ -1,13 +1,13 @@
 # codeceptjs-resemblehelper
-Helper for resemble.js, used for Image comparison in Tests with WebdriverIO
+Helper for resemble.js, used for image comparison in tests with WebdriverIO.
 
-codeceptjs-resemblehelper is [CodeceptJS](https://codecept.io/) helper which can be used to compare screenshots and make the tests fail/pass based on the tolerance allowed
+codeceptjs-resemblehelper is a [CodeceptJS](https://codecept.io/) helper which can be used to compare screenshots and make the tests fail/pass based on the tolerance allowed.
 
 If two screenshot comparisons have difference greater then the tolerance provided, the test will fail.
 
 NPM package: https://www.npmjs.com/package/codeceptjs-resemblehelper
 
-To install the package, just run `npm install codeceptjs-resemblehelper`
+To install the package, just run `npm install codeceptjs-resemblehelper`.
 
 ### Configuration
 
@@ -26,18 +26,18 @@ Example:
    }
 }
 ```
+
 To use the Helper, users must provide the two parameters:
 
-`baseFolder`: This is the folder for base images, which will be used with screenshot for comparison
+`baseFolder`: This is the folder for base images, which will be used with screenshot for comparison.
 
 `diffFolder`: This will the folder where resemble would try to store the difference image, which can be viewed later.
 
 Usage, these are 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`
+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`.
 
 ```js
     /**
@@ -48,7 +48,7 @@ it is mandatory to have the same image file names for base and screenshot image
      */
     async seeVisualDiff(baseImage, options) {}
 ```
-Second one is the `seeVisualDiffForElement` which basically compares elements on the screenshot, Selector for element must be provided
+Second one is the `seeVisualDiffForElement` which basically compares elements on the screenshot, selector for element must be provided.
 
 It is exactly same as `seeVisualDiff` function, only an additional `selector` CSS|XPath|ID locators is provided
 ```js
@@ -63,14 +63,14 @@ It is exactly same as `seeVisualDiff` function, only an additional `selector` CS
     async seeVisualDiffForElement(selector, baseImage, options){}
 ```
 > Note:
-`seeVisualDiffForElement` only works when the page for baseImage is open in the browser, so that webdriver can fetch coordinates of the provided selector
+`seeVisualDiffForElement` only works when the page for baseImage is open in the browser, so that WebdriverIO can fetch coordinates of the provided selector.
+
+Third one is the `screenshotElement` which basically takes screenshot of the element. Selector for the element must be provided. It saves the image in the output directory as mentioned in the config folder.
 
-Third one is the `screenshotElement` which basically takes screenshot of the element. Selector for the element must be provided.
-It saves the image in the output directory as mentioned in the config folder.
 ```js
 I.screenshotElement("selectorForElement", "nameForImage");
 ```
->Note: This method only works with puppeteer.
+> Note: This method only works with puppeteer.
 
 Finally to use the helper in your test, you can write something like this:
 
@@ -97,7 +97,7 @@ Scenario('Compare CPU Usage Images', async (I) => {
     I.seeVisualDiffForElement("//div[@class='panel-container']", "Complete_Dashboard_Image.png", {prepareBaseImage: false, tolerance: 3});
 });
 ```
->Note: `seeVisualDiff` and `seeVisualDiffElement` work only when the dimensions of the screenshot as well as the base image are same so as to avoid unexpected results.
+> Note: `seeVisualDiff` and `seeVisualDiffElement` work only when the dimensions of the screenshot as well as the base image are same so as to avoid unexpected results.
 
 ### Ignored Box
 You can also exclude part of the image from comparison, by specifying the excluded area in pixels from the top left.
@@ -113,15 +113,17 @@ const box = {
 I.seeVisualDiff("image.png", {prepareBaseImage: true, tolerance: 1, ignoredBox: box});
 ```
 After this, that specific mentioned part will be ignored while comparison.
-This works with both `seeVisualDiff` and `seeVisualDiffForElement`.
+This works for `seeVisualDiff` and `seeVisualDiffForElement`.
 
 ### Allure Reporter
 Allure reports may also be generated directly from the tool. To do so, add
+
 ```
 "plugins": {
 	  "allure": {}
 }
 ```
+
 in the config file.
 The attachments will be added to the report only when the calulated mismatch is greater than the given tolerance. 
 Set `output` to where the generated report is to be stored. Default is the output directory of the project.
@@ -150,8 +152,8 @@ When this option has been provided, the helper will download the base image from
 This base image has to be located inside a folder named "*base*".
 The resultant output image will be uploaded in a folder named "*output*" and diff image will be uploaded to a folder named "*diff*" in the S3 bucket.
 If the `prepareBaseImage` option is marked `true`, then the generated base image will be uploaded to a folder named "*base*" in the S3 bucket.
->Note: The tests may take a bit longer to run when the AWS configuration is provided as determined by the internet speed to upload/download images.
+> Note: The tests may take a bit longer to run when the AWS configuration is provided as determined by the internet speed to upload/download images.
 
 ### Known Issues:
 
-> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js
+> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js

index.js

@@ -16,15 +16,29 @@ class ResembleHelper extends Helper {
   /**
    * Compare Images
    * 
-   * @param image1
-   * @param image2
+   * @param image
    * @param diffImage
    * @param options
    * @returns {Promise<any | never>}
    */
-  async _compareImages(image1, image2, diffImage, options) {
-    image1 = this.config.baseFolder + image1;
-    image2 = this.config.screenshotFolder + image2;
+  async _compareImages(image, diffImage, options) {
+    const image1 = this.config.baseFolder + image;
+    const image2 = this.config.screenshotFolder + image;
+
+    // check whether the base and the screenshot images are present.
+    fs.access(image1, fs.constants.F_OK | fs.constants.W_OK, (err) => {
+      if (err) {
+        throw new Error(
+          `${image1} ${err.code === 'ENOENT' ? 'base image does not exist' : 'is read-only'}`);
+      }
+    });
+
+    fs.access(image2, fs.constants.F_OK | fs.constants.W_OK, (err) => {
+      if (err) {
+        throw new Error(
+          `${image2} ${err.code === 'ENOENT' ? 'screenshot image does not exist' : 'is read-only'}`);
+      }
+    });
 
     return new Promise((resolve, reject) => {
 
@@ -40,7 +54,7 @@ class ResembleHelper extends Helper {
         if (err) {
           reject(err);
         } else {
-          if(!data.isSameDimensions) throw new Error("The images are not of same dimensions. Please use images of same dimensions so as to avoid any unexpected results.")
+          if(!data.isSameDimensions) reject(new Error("The images are not of same dimensions. Please use images of same dimensions so as to avoid any unexpected results."));
           resolve(data);
           if (data.misMatchPercentage >= tolerance) {
             mkdirp(getDirName(this.config.diffFolder + diffImage), function (err) {
@@ -63,14 +77,13 @@ class ResembleHelper extends Helper {
 
   /**
    *
-   * @param image1
+   * @param image
    * @param options
    * @returns {Promise<*>}
    */
-  async _fetchMisMatchPercentage(image1, options) {
-    const image2 = image1;
-    const diffImage = "Diff_" + image1.split(".")[0];
-    const result = this._compareImages(image1, image2, diffImage, options);
+  async _fetchMisMatchPercentage(image, options) {
+    const diffImage = "Diff_" + image.split(".")[0];
+    const result = this._compareImages(image, diffImage, options);
     const data = await Promise.resolve(result);
     return data.misMatchPercentage;
   }
@@ -92,8 +105,17 @@ class ResembleHelper extends Helper {
       await el.screenshot({
         path: global.output_dir + "/" + name + '.png'
       });
-    }
-    else throw new Error("Method only works with Puppeteer");
+    } else if (this.helpers['WebDriver']) {
+      const configuration = this.config;
+
+      await helper.waitForVisible(selector);
+      const els = await helper._locate(selector);
+      if (!els.length) throw new Error(`Element ${selector} couldn't be located`);
+      const el = els[0];
+
+      await el.saveScreenshot(configuration.screenshotFolder + name + '.png');
+  }
+    else throw new Error("Method only works with Puppeteer and WebDriver helpers.");
   }
 
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeceptjs-resemblehelper",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Resemble Js helper for CodeceptJS, with Support for Webdriver, Puppeteer & Appium",
   "repository": {
     "type": "git",