codeceptjs 3.0.7 → 3.1.3

package/docs/build/Playwright.js

@@ -19,6 +19,7 @@ const {
   screenshotOutputFolder,
   getNormalizedKeyAttributeValue,
   isModifierKey,
+  clearString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -28,6 +29,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
+const findReact = require('./extras/React');
 
 let playwright;
 let perfTiming;
@@ -64,6 +66,8 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  * * `restart`: (optional, default: true) - restart browser between tests.
  * * `disableScreenshots`: (optional, default: false)  - don't save screenshot on failure.
  * * `emulate`: (optional, default: {}) launch browser in device emulation mode.
+ * * `video`: (optional, default: false) enables video recording for failed tests; videos are saved into `output/videos` folder
+ * * `trace`: (optional, default: false) record [tracing information](https://playwright.dev/docs/trace-viewer) with screenshots and snapshots.
  * * `fullPageScreenshots` (optional, default: false) - make full page screenshots on failure.
  * * `uniqueScreenshotNames`: (optional, default: false)  - option to prevent screenshot override if you have scenarios with the same name in different suites.
  * * `keepBrowserState`: (optional, default: false) - keep browser state between tests when `restart` is set to false.
@@ -80,6 +84,22 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  * * `chromium`: (optional) pass additional chromium options
  * * `electron`: (optional) pass additional electron options
  *
+ * #### Video Recording Customization
+ *
+ * By default, video is saved to `output/video` dir. You can customize this path by passing `dir` option to `recordVideo` option.
+ *
+ * * `video`: enables video recording for failed tests; videos are saved into `output/videos` folder
+ * * `keepVideoForPassedTests`: - save videos for passed tests
+ * * `recordVideo`: [additional options for videos customization](https://playwright.dev/docs/next/api/class-browser#browser-new-context)
+ *
+ * #### Trace Recording Customization
+ *
+ * Trace recording provides a complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
+ * Traces will be saved to `output/trace`
+ *
+ * * `trace`: enables trace recording for failed tests; trace are saved into `output/trace` folder
+ * * `keepTraceForPassedTests`: - save trace for passed tests
+ *
  * #### Example #1: Wait for 0 network connections.
  *
  * ```js
@@ -131,7 +151,7 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  *      Playwright: {
  *        url: "http://localhost",
  *        chromium: {
- *          browserWSEndpoint: { wsEndpoint: 'ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a' }
+ *          browserWSEndpoint: 'ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a'
  *        }
  *      }
  *    }
@@ -211,6 +231,7 @@ class Playwright extends Helper {
     this.activeSessionName = '';
     this.isElectron = false;
     this.electronSessions = [];
+    this.storageState = null;
 
     // override defaults with config
     this._setConfig(config);
@@ -220,7 +241,6 @@ class Playwright extends Helper {
     const defaults = {
       // options to emulate context
       emulate: {},
-
       browser: 'chromium',
       waitForAction: 100,
       waitForTimeout: 1000,
@@ -249,10 +269,16 @@ class Playwright extends Helper {
   }
 
   _getOptionsForBrowser(config) {
-    return config[config.browser] ? {
-      ...config[config.browser],
-      wsEndpoint: config[config.browser].browserWSEndpoint,
-    } : {};
+    if (config[config.browser]) {
+      if (config[config.browser].browserWSEndpoint && config[config.browser].browserWSEndpoint.wsEndpoint) {
+        config[config.browser].browserWSEndpoint = config[config.browser].browserWSEndpoint.wsEndpoint;
+      }
+      return {
+        ...config[config.browser],
+        wsEndpoint: config[config.browser].browserWSEndpoint,
+      };
+    }
+    return {};
   }
 
   _setConfig(config) {
@@ -261,6 +287,12 @@ class Playwright extends Helper {
       headless: !this.options.show,
       ...this._getOptionsForBrowser(config),
     };
+    if (this.options.video) {
+      this.options.recordVideo = { size: parseWindowSize(this.options.windowSize) };
+    }
+    if (this.options.recordVideo && !this.options.recordVideo.dir) {
+      this.options.recordVideo.dir = `${global.output_dir}/videos/`;
+    }
     this.isRemoteBrowser = !!this.playwrightOptions.browserWSEndpoint;
     this.isElectron = this.options.browser === 'electron';
     this.userDataDir = this.playwrightOptions.userDataDir;
@@ -319,8 +351,42 @@ class Playwright extends Helper {
         return err.message.includes('context');
       },
     });
-    if (this.options.restart && !this.options.manualStart) return this._startBrowser();
-    if (!this.isRunning && !this.options.manualStart) return this._startBrowser();
+    if (this.options.restart && !this.options.manualStart) await this._startBrowser();
+    if (!this.isRunning && !this.options.manualStart) await this._startBrowser();
+
+    this.isAuthenticated = false;
+    if (this.isElectron) {
+      this.browserContext = this.browser.context();
+    } else if (this.userDataDir) {
+      this.browserContext = this.browser;
+    } else {
+      const contextOptions = {
+        ignoreHTTPSErrors: this.options.ignoreHTTPSErrors,
+        acceptDownloads: true,
+        ...this.options.emulate,
+      };
+      if (this.options.basicAuth) {
+        contextOptions.httpCredentials = this.options.basicAuth;
+        this.isAuthenticated = true;
+      }
+      if (this.options.recordVideo) contextOptions.recordVideo = this.options.recordVideo;
+      if (this.storageState) contextOptions.storageState = this.storageState;
+      this.browserContext = await this.browser.newContext(contextOptions); // Adding the HTTPSError ignore in the context so that we can ignore those errors
+    }
+
+    let mainPage;
+    if (this.isElectron) {
+      mainPage = await this.browser.firstWindow();
+    } else {
+      const existingPages = await this.browserContext.pages();
+      mainPage = existingPages[0] || await this.browserContext.newPage();
+    }
+    targetCreatedHandler.call(this, mainPage);
+
+    await this._setPage(mainPage);
+
+    if (this.options.trace) await this.browserContext.tracing.start({ screenshots: true, snapshots: true });
+
     return this.browser;
   }
 
@@ -333,43 +399,24 @@ class Playwright extends Helper {
       return;
     }
 
+    if (this.options.restart) {
+      this.isRunning = false;
+      return this._stopBrowser();
+    }
+
     // close other sessions
     try {
       const contexts = await this.browser.contexts();
-      contexts.shift();
+      const currentContext = contexts[0];
+      if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
+        this.storageState = await currentContext.storageState();
+      }
 
       await Promise.all(contexts.map(c => c.close()));
     } catch (e) {
       console.log(e);
     }
 
-    if (this.options.restart) {
-      this.isRunning = false;
-      return this._stopBrowser();
-    }
-
-    // ensure current page is in default context
-    if (this.page) {
-      const existingPages = await this.browserContext.pages();
-      await this._setPage(existingPages[0]);
-    }
-
-    if (this.options.keepBrowserState) return;
-
-    if (!this.options.keepCookies) {
-      this.debugSection('Session', 'cleaning cookies and localStorage');
-      await this.clearCookie();
-    }
-    const currentUrl = await this.grabCurrentUrl();
-
-    if (currentUrl.startsWith('http')) {
-      await this.executeScript('localStorage.clear();').catch((err) => {
-        if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-      });
-      await this.executeScript('sessionStorage.clear();').catch((err) => {
-        if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-      });
-    }
     // await this.closeOtherTabs();
     return this.browser;
   }
@@ -524,7 +571,7 @@ class Playwright extends Helper {
     page.setDefaultNavigationTimeout(this.options.getPageTimeout);
     this.context = await this.page;
     this.contextLocator = null;
-    if (this.config.browser === 'chrome') {
+    if (this.options.browser === 'chrome') {
       await page.bringToFront();
     }
   }
@@ -540,6 +587,7 @@ class Playwright extends Helper {
     if (!page) {
       return;
     }
+    page.removeAllListeners('dialog');
     page.on('dialog', async (dialog) => {
       popupStore.popup = dialog;
       const action = popupStore.actionType || this.options.defaultPopupAction;
@@ -586,7 +634,7 @@ class Playwright extends Helper {
       this.browser = await playwright._electron.launch(this.playwrightOptions);
     } else if (this.isRemoteBrowser) {
       try {
-        this.browser = await playwright[this.options.browser].connect(this.playwrightOptions.browserWSEndpoint);
+        this.browser = await playwright[this.options.browser].connect(this.playwrightOptions);
       } catch (err) {
         if (err.toString().indexOf('ECONNREFUSED')) {
           throw new RemoteBrowserConnectionRefused(err);
@@ -604,26 +652,6 @@ class Playwright extends Helper {
       this.debugSection('Url', target.url());
     });
 
-    if (this.isElectron) {
-      this.browserContext = this.browser.context();
-    } else if (this.userDataDir) {
-      this.browserContext = this.browser;
-    } else {
-      this.browserContext = await this.browser.newContext({ ignoreHTTPSErrors: this.options.ignoreHTTPSErrors, acceptDownloads: true, ...this.options.emulate });// Adding the HTTPSError ignore in the context so that we can ignore those errors
-    }
-
-    let mainPage;
-    if (this.isElectron) {
-      mainPage = await this.browser.firstWindow();
-    } else {
-      const existingPages = await this.browserContext.pages();
-      mainPage = existingPages[0] || await this.browserContext.newPage();
-    }
-    targetCreatedHandler.call(this, mainPage);
-
-    await this._setPage(mainPage);
-    await this.closeOtherTabs();
-
     this.isRunning = true;
   }
 
@@ -707,9 +735,9 @@ class Playwright extends Helper {
       url = this.options.url + url;
     }
 
-    if (this.config.basicAuth && (this.isAuthenticated !== true)) {
+    if (this.options.basicAuth && (this.isAuthenticated !== true)) {
       if (url.includes(this.options.url)) {
-        await this.browserContext.setHTTPCredentials(this.config.basicAuth);
+        await this.browserContext.setHTTPCredentials(this.options.basicAuth);
         this.isAuthenticated = true;
       }
     }
@@ -772,7 +800,7 @@ class Playwright extends Helper {
     if (!customHeaders) {
       throw new Error('Cannot send empty headers.');
     }
-    return this.page.setExtraHTTPHeaders(customHeaders);
+    return this.browserContext.setExtraHTTPHeaders(customHeaders);
   }
 
   /**
@@ -1162,7 +1190,7 @@ class Playwright extends Helper {
    */
   async seeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1178,7 +1206,7 @@ class Playwright extends Helper {
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1797,7 +1825,7 @@ class Playwright extends Helper {
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = await Promise.all(els.map(el => el.isVisible()));
     return els.filter(v => v).length;
   }
 
@@ -2108,6 +2136,7 @@ class Playwright extends Helper {
   async clearCookie() {
     // Playwright currently doesn't support to delete a certain cookie
     // https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext
+    if (!this.browserContext) return;
     return this.browserContext.clearCookies();
   }
 
@@ -2539,8 +2568,42 @@ class Playwright extends Helper {
     return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
   }
 
-  async _failed() {
+  async _failed(test) {
     await this._withinEnd();
+
+    if (!test.artifacts) {
+      test.artifacts = {};
+    }
+
+    if (this.options.recordVideo && this.page.video()) {
+      test.artifacts.video = await this.page.video().path();
+    }
+
+    if (this.options.trace) {
+      const path = `${global.output_dir}/trace/${clearString(test.title).slice(0, 255)}.zip`;
+      await this.browserContext.tracing.stop({ path });
+      test.artifacts.trace = path;
+    }
+  }
+
+  async _passed(test) {
+    if (this.options.recordVideo && this.page.video()) {
+      if (this.options.keepVideoForPassedTests) {
+        test.artifacts.video = await this.page.video().path();
+      } else {
+        this.page.video().delete().catch(e => {});
+      }
+    }
+
+    if (this.options.trace) {
+      if (this.options.keepTraceForPassedTests) {
+        const path = `${global.output_dir}/trace/${clearString(test.title)}.zip`;
+        await this.browserContext.tracing.stop({ path });
+        test.artifacts.trace = path;
+      } else {
+        await this.browserContext.tracing.stop();
+      }
+    }
   }
 
   /**
@@ -3123,6 +3186,39 @@ class Playwright extends Helper {
     if (prop) return rect[prop];
     return rect;
   }
+
+  /**
+  * Mocks network request using [`browserContext.route`](https://playwright.dev/docs/api/class-browsercontext#browser-context-route) of Playwright
+  *
+  * ```js
+  * I.mockRoute(/(\.png$)|(\.jpg$)/, route => route.abort());
+  * ```
+  * This method allows intercepting and mocking requests & responses. [Learn more about it](https://playwright.dev/docs/network#handle-requests)
+  *
+  * @param {string} [url] URL, regex or pattern for to match URL
+  * @param {function} [handler] a function to process request
+  *
+  */
+  async mockRoute(url, handler) {
+    return this.browserContext.route(...arguments);
+  }
+
+  /**
+  * Stops network mocking created by `mockRoute`.
+  *
+  * ```js
+  * I.stopMockingRoute(/(\.png$)|(\.jpg$)/);
+  * I.stopMockingRoute(/(\.png$)|(\.jpg$)/, previouslySetHandler);
+  * ```
+  * If no handler is passed, all mock requests for the rote are disabled.
+  *
+  * @param {string} [url] URL, regex or pattern for to match URL
+  * @param {function} [handler] a function to process request
+  *
+  */
+  async stopMockingRoute(url, handler) {
+    return this.browserContext.unroute(...arguments);
+  }
 }
 
 module.exports = Playwright;
@@ -3138,6 +3234,7 @@ function buildLocatorString(locator) {
 }
 
 async function findElements(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
   locator = new Locator(locator, 'css');
   return matcher.$$(buildLocatorString(locator));
 }
@@ -3186,6 +3283,8 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
+
   locator = new Locator(locator);
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
 
@@ -3292,6 +3391,15 @@ async function findFields(locator) {
 }
 
 async function proceedDragAndDrop(sourceLocator, destinationLocator) {
+  // modern drag and drop in Playwright
+  if (this.page.dragAndDrop) {
+    const source = new Locator(sourceLocator);
+    const dest = new Locator(destinationLocator);
+    if (source.isBasic() && dest.isBasic()) {
+      return this.page.dragAndDrop(source.simplify(), dest.simplify());
+    }
+  }
+
   const src = await this._locate(sourceLocator);
   assertElementExists(src, sourceLocator, 'Source Element');
 
@@ -3451,11 +3559,20 @@ async function targetCreatedHandler(page) {
     await page.setUserAgent(this.options.userAgent);
   }
   if (this.options.windowSize && this.options.windowSize.indexOf('x') > 0 && this._getType() === 'Browser') {
-    const dimensions = this.options.windowSize.split('x');
-    const width = parseInt(dimensions[0], 10);
-    const height = parseInt(dimensions[1], 10);
-    await page.setViewportSize({ width, height });
+    await page.setViewportSize(parseWindowSize(this.options.windowSize));
+  }
+}
+
+function parseWindowSize(windowSize) {
+  if (!windowSize) return { width: 800, height: 600 };
+  const dimensions = windowSize.split('x');
+  if (dimensions.length < 2 || windowSize === 'maximize') {
+    console.log('Invalid window size, setting window to default values');
+    return { width: 800, height: 600 }; // invalid size
   }
+  const width = parseInt(dimensions[0], 10);
+  const height = parseInt(dimensions[1], 10);
+  return { width, height };
 }
 
 // List of key values to key definitions

package/docs/build/Protractor.js

@@ -124,6 +124,8 @@ class Protractor extends Helper {
 
     this.isRunning = false;
     this._setConfig(config);
+
+    console.log('Protractor helper is deprecated as well as Protractor itself.\nThis helper will be removed in next major release');
   }
 
   _validateConfig(config) {

package/docs/build/Puppeteer.js

@@ -129,8 +129,9 @@ const consoleLogStore = new Console();
  *    }
  * }
  * ```
+ * > Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
  *
-* #### Example #5: Target URL with provided basic authentication
+ * #### Example #5: Target URL with provided basic authentication
  *
  * ```js
  * {
@@ -143,10 +144,25 @@ const consoleLogStore = new Console();
  *    }
  * }
  * ```
+ * #### Troubleshooting
  *
+ * Error Message:  `No usable sandbox!`
+ *
+ * When running Puppeteer on CI try to disable sandbox if you see that message
+ *
+ * ```
+ * helpers: {
+ *  Puppeteer: {
+ *     url: 'http://localhost',
+ *     show: false,
+ *     chrome: {
+ *       args: ['--no-sandbox', '--disable-setuid-sandbox']
+ *     }
+ *   },
+ * }
+ * ```
  *
  *
- * Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
  *
  * ## Access From Helpers
  *
@@ -701,7 +717,7 @@ class Puppeteer extends Helper {
     assertElementExists(els);
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-    const { x, y } = await els[0]._clickablePoint();
+    const { x, y } = await getClickablePoint(els[0]);
     await this.page.mouse.move(x + offsetX, y + offsetY);
     return this._waitForAction();
   }
@@ -790,7 +806,7 @@ class Puppeteer extends Helper {
       const els = await this._locate(locator);
       assertElementExists(els, locator, 'Element');
       await els[0]._scrollIntoViewIfNeeded();
-      const elementCoordinates = await els[0]._clickablePoint();
+      const elementCoordinates = await getClickablePoint(els[0]);
       await this.executeScript((x, y) => window.scrollBy(x, y), elementCoordinates.x + offsetX, elementCoordinates.y + offsetY);
     } else {
       await this.executeScript((x, y) => window.scrollTo(x, y), offsetX, offsetY);
@@ -1047,7 +1063,10 @@ class Puppeteer extends Helper {
    */
   async seeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+    // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
     return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1063,7 +1082,10 @@ class Puppeteer extends Helper {
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+    // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
     return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'));
   }
 
@@ -1598,7 +1620,7 @@ class Puppeteer extends Helper {
    * {{ react }}
    */
   async fillField(field, value) {
-    const els = await findFields.call(this, field);
+    const els = await findVisibleFields.call(this, field);
     assertElementExists(els, field, 'Field');
     const el = els[0];
     const tag = await el.getProperty('tagName').then(el => el.jsonValue());
@@ -1640,7 +1662,7 @@ class Puppeteer extends Helper {
    * {{ react }}
    */
   async appendField(field, value) {
-    const els = await findFields.call(this, field);
+    const els = await findVisibleFields.call(this, field);
     assertElementExists(els, field, 'Field');
     await els[0].press('End');
     await els[0].type(value, { delay: this.options.pressKeyDelay });
@@ -1732,7 +1754,7 @@ class Puppeteer extends Helper {
    * 
    */
   async selectOption(select, option) {
-    const els = await findFields.call(this, select);
+    const els = await findVisibleFields.call(this, select);
     assertElementExists(els, select, 'Selectable field');
     const el = els[0];
     if (await el.getProperty('tagName').then(t => t.jsonValue()) !== 'SELECT') {
@@ -1774,7 +1796,10 @@ class Puppeteer extends Helper {
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator);
-    els = await Promise.all(els.map(el => el.boundingBox()));
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+    // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
     return els.filter(v => v).length;
   }
 
@@ -2452,8 +2477,8 @@ class Puppeteer extends Helper {
     const src = await this._locate(locator);
     assertElementExists(src, locator, 'Slider Element');
 
-    // Note: Using private api ._clickablePoint because the .BoundingBox does not take into account iframe offsets!
-    const sliderSource = await src[0]._clickablePoint();
+    // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
+    const sliderSource = await getClickablePoint(src[0]);
 
     // Drag start point
     await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
@@ -3202,7 +3227,7 @@ class Puppeteer extends Helper {
 module.exports = Puppeteer;
 
 async function findElements(matcher, locator) {
-  if (locator.react) return findReact(matcher, locator);
+  if (locator.react) return findReact(matcher.executionContext(), locator);
   locator = new Locator(locator, 'css');
   if (!locator.isXPath()) return matcher.$$(locator.simplify());
   return matcher.$x(locator.value);
@@ -3231,7 +3256,7 @@ async function proceedClick(locator, context = null, options = {}) {
 }
 
 async function findClickable(matcher, locator) {
-  if (locator.react) return findReact(matcher, locator);
+  if (locator.react) return findReact(matcher.executionContext(), locator);
   locator = new Locator(locator);
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
 
@@ -3314,6 +3339,12 @@ async function proceedIsChecked(assertType, option) {
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected);
 }
 
+async function findVisibleFields(locator) {
+  const els = await findFields.call(this, locator);
+  const visible = await Promise.all(els.map(el => el.boundingBox()));
+  return els.filter((el, index) => visible[index]);
+}
+
 async function findFields(locator) {
   const matchedLocator = new Locator(locator);
   if (!matchedLocator.isFuzzy()) {
@@ -3344,9 +3375,9 @@ async function proceedDragAndDrop(sourceLocator, destinationLocator) {
   const dst = await this._locate(destinationLocator);
   assertElementExists(dst, destinationLocator, 'Destination Element');
 
-  // Note: Using private api ._clickablePoint becaues the .BoundingBox does not take into account iframe offsets!
-  const dragSource = await src[0]._clickablePoint();
-  const dragDestination = await dst[0]._clickablePoint();
+  // Note: Using public api .getClickablePoint becaues the .BoundingBox does not take into account iframe offsets
+  const dragSource = await getClickablePoint(src[0]);
+  const dragDestination = await getClickablePoint(dst[0]);
 
   // Drag start point
   await this.page.mouse.move(dragSource.x, dragSource.y, { steps: 5 });
@@ -3360,7 +3391,7 @@ async function proceedDragAndDrop(sourceLocator, destinationLocator) {
 }
 
 async function proceedSeeInField(assertType, field, value) {
-  const els = await findFields.call(this, field);
+  const els = await findVisibleFields.call(this, field);
   assertElementExists(els, field, 'Field');
   const el = els[0];
   const tag = await el.getProperty('tagName').then(el => el.jsonValue());
@@ -3493,6 +3524,13 @@ async function targetCreatedHandler(page) {
   }
 }
 
+// BC compatibility for Puppeteer < 10
+async function getClickablePoint(el) {
+  if (el.clickablePoint) return el.clickablePoint();
+  if (el._clickablePoint) return el._clickablePoint();
+  return null;
+}
+
 // List of key values to key definitions
 // https://github.com/GoogleChrome/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js
 const keyDefinitionMap = {