Merge pull request #25 from Kartikeya99/ssElement

Added screenshotElement function

Author: puneet0191

Diff for: README.md

@@ -69,7 +69,12 @@ It is exactly same as `seeVisualDiff` function, only an additional `selector` CS
 > Note:
 `seeVisualDiffForElement` only works when the page for baseImage is open in the browser, so that webdriver 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.
+This method only works with puppeteer.
+```
+I.screenshotElement("selectorForElement", "nameForImage");
+```
 
 Finally to use the helper in your test, you can write something like this:
 
@@ -95,4 +100,5 @@ Scenario('Compare CPU Usage Images', async (I) => {
     adminPage.navigateToDashboard("OS", "System Overview");
     I.seeVisualDiffForElement("//div[@class='panel-container']", "Complete_Dashboard_Image.png", {prepareBaseImage: false, tolerance: 3});
 });
-```
+```
+

Diff for: index.js

@@ -68,6 +68,29 @@ class ResembleHelper extends Helper {
     return data.misMatchPercentage;
   }
 
+  /**
+   * Take screenshot of individual element.
+   * @param selector selector of the element to be screenshotted 
+   * @param name name of the image
+   * @returns {Promise<void>} 
+   */
+  async screenshotElement(selector, name) {
+    const helper = this._getHelper();
+    if(this.helpers['Puppeteer']){
+      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.screenshot({
+        path: configuration.screenshotFolder + name + '.png'
+      });
+    }
+    else throw new Error("Method only works with Puppeteer");
+  }
+
   /**
    * Check Visual Difference for Base and Screenshot Image
    * @param baseImage         Name of the Base Image (Base Image path is taken from Configuration)
@@ -172,8 +195,8 @@ class ResembleHelper extends Helper {
     }
 
     if (this.helpers['WebDriver'] || this.helpers['Appium']) {
-      location = await ele.getLocation();
-      size = await ele.getSize();
+      location = await el.getLocation();
+      size = await el.getSize();
     } 
 
     if (this.helpers['WebDriverIO']) {
@@ -213,5 +236,4 @@ class ResembleHelper extends Helper {
     throw new Error('No matching helper found. Supported helpers: WebDriver/Appium/Puppeteer');
   }
 }
-
-module.exports = ResembleHelper;
+module.exports = ResembleHelper;