feat: wait for an element in an iframe. (#174)

* feat: wait for an element in an iframe.

* test: add wait for iframe element tests, and refactored.

* fix: e2e tests.

* refactor: iframe tests.

README.md

@@ -84,6 +84,10 @@ Example config to run Aye Spy:
           }
         ],
         "waitForElement": "#section-news", // explicitly wait for a selector to be visible before snap
+        "waitForIFrameElement": {
+          "frame": ".iframe", // the id of the iframe that you would like to change to.
+          "element": ".element-in-iframe" // the element in the iframe that you would like to wait for.
+        }
         "onReadyScript": "./scripts/clickSelector.js", // run a script before snap
         "wait": 2000 // implicitly wait before taking a snap
       }

e2eTests/generic/onBeforeSuiteScript/onBeforeSuiteScript.js

@@ -0,0 +1,3 @@
+module.exports = function() {
+  console.log('Script has Run!');
+};

e2eTests/generic/onBeforeSuiteScript/onBeforeSuiteScript.test.js

@@ -34,5 +34,4 @@ describe('e2e Tests running onBeforeSuiteScript', () => {
     expect(stdout).toEqual(expect.stringContaining('Script has Run!'));
     expect(exitCode).toEqual(0);
   });
-
 });

e2eTests/generic/onBeforeSuiteScript/onBeforeSuiteScriptConfig.json

@@ -6,7 +6,7 @@
   "report": "./e2eTests/generic/onBeforeSuiteScript/reports",
   "remoteBucketName": "aye-spy",
   "remoteRegion": "eu-west-1",
-  "onBeforeSuiteScript": "./e2eTests/generic/onBeforeSuiteScript/script.js",
+  "onBeforeSuiteScript": "./e2eTests/generic/onBeforeSuiteScript/onBeforeSuiteScript.js",
   "scenarios": [
     {
       "url": "http://ayespy_report:4000",

src/__mocks__/selenium-webdriver.js

@@ -37,6 +37,7 @@ class Builder {
         return wrap;
       },
       findElement: element => new Element(element),
+      switchTo: jest.fn().mockReturnValue({ defaultContent: jest.fn() }),
       setRect: jest.fn(),
       getRect: jest.fn(),
       get: jest.fn(),
@@ -55,7 +56,9 @@ const By = {
 };
 
 const until = {
-  elementIsVisible: selector => selector
+  elementIsVisible: selector => selector,
+  elementLocated: jest.fn(),
+  ableToSwitchToFrame: () => true
 };
 
 export default {

src/getScreenshots.js

@@ -27,6 +27,7 @@ const generateSnapShotPromises = (SnapShotter, config) => {
             removeElements: scenario.removeElements,
             hideElements: scenario.hideElements,
             waitForElement: scenario.waitForElement,
+            waitForIFrameElement: scenario.waitForIFrameElement,
             url: scenario.url,
             onBeforeScript: scenario.onBeforeScript,
             onReadyScript: scenario.onReadyScript,

src/snapshotter.js

@@ -20,6 +20,7 @@ export default class SnapShotter {
       removeElements,
       hideElements,
       waitForElement,
+      waitForIFrameElement,
       wait,
       url = 'http://localhost:80',
       viewportLabel = 'viewportLabel',
@@ -42,6 +43,7 @@ export default class SnapShotter {
     this._removeElements = removeElements;
     this._hideElements = hideElements;
     this._waitForElement = waitForElement;
+    this._waitForIFrameElement = waitForIFrameElement;
     this._url = url;
     this.wait = wait;
     this._onBeforeScript = onBeforeScript;
@@ -133,6 +135,39 @@ export default class SnapShotter {
     }
   }
 
+  switchToIFrame(selector, timeout) {
+    return this.driver.wait(
+      this._until.ableToSwitchToFrame(this._By.css(selector)),
+      timeout
+    );
+  }
+
+  waitToLocateElement(selector, timeout) {
+    return this.driver.wait(
+      this._until.elementLocated(this._By.css(selector)),
+      timeout
+    );
+  }
+
+  async waitForIFrameElement() {
+    const timeout = 10000;
+
+    const { frame, element } = this._waitForIFrameElement;
+
+    try {
+      await this.switchToIFrame(frame, timeout);
+      await this.waitToLocateElement(element, timeout);
+    } catch (error) {
+      console.log(''); // eslint-disable-line no-console // space for progress bar
+      logger.error(
+        'snapshotter',
+        `❌  Unable to find the specified waitForIFrameElement element on the page! ❌ ${error}`
+      );
+    } finally {
+      await this.driver.switchTo().defaultContent();
+    }
+  }
+
   getElementDimensions(selector) {
     return this._driver
       .findElement(this._By.css(selector))
@@ -210,6 +245,8 @@ export default class SnapShotter {
 
       if (this._waitForElement) await this.waitForElement();
 
+      if (this._waitForIFrameElement) await this.waitForIFrameElement();
+
       if (this._onReadyScript)
         await executeScriptWithDriver(this._driver, this._onReadyScript).catch(
           this.handleScriptError