codeceptjs 2.1.3 → 2.2.1

package/lib/helper/Puppeteer.js

@@ -11,7 +11,6 @@ const {
   xpathLocator,
   ucfirst,
   fileExists,
-  clearString,
   chunkArray,
   convertCssPropertiesToCamelCase,
   screenshotOutputFolder,
@@ -25,11 +24,13 @@ 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');
 const axios = require('axios');
 const fs = require('fs');
-
+const fsExtra = require('fs-extra');
 
 let puppeteer;
+let perfTiming;
 const popupStore = new Popup();
 const consoleLogStore = new Console();
 
@@ -40,6 +41,8 @@ const consoleLogStore = new Console();
  *
  * Requires `puppeteer` package to be installed.
  *
+ * > Experiemental Firefox support [can be activated](https://codecept.io/helpers/Puppeteer-firefox).
+ *
  * ## Configuration
  *
  * This helper should be configured in codecept.json or codecept.conf.js
@@ -54,11 +57,13 @@ const consoleLogStore = new Console();
  * * `keepCookies`: (optional, default: false) - keep cookies between tests when `restart` is set to false.
  * * `waitForAction`: (optional) how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
  * * `waitForNavigation`: (optional, default: 'load'). When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `networkidle0`, `networkidle2`. See [Puppeteer API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions). Array values are accepted as well.
+ * * `pressKeyDelay`: (optional, default: '10'). Delay between key presses in ms. Used when calling Puppeteers page.type(...) in fillField/appendField
  * * `getPageTimeout` (optional, default: '0') config option to set maximum navigation time in milliseconds.
  * * `waitForTimeout`: (optional) default wait* timeout in ms. Default: 1000.
  * * `windowSize`: (optional) default window size. Set a dimension like `640x480`.
  * * `userAgent`: (optional) user-agent string.
  * * `manualStart`: (optional, default: false) - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
+ * * `browser`: (optional, default: chrome) - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
  * * `chrome`: (optional) pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
  *
  *
@@ -139,7 +144,8 @@ const consoleLogStore = new Console();
 class Puppeteer extends Helper {
   constructor(config) {
     super(config);
-    puppeteer = requireg('puppeteer');
+
+    puppeteer = requireg(config.browser === 'firefox' ? 'puppeteer-firefox' : 'puppeteer');
 
     // set defaults
     this.isRemoteBrowser = false;
@@ -151,8 +157,10 @@ class Puppeteer extends Helper {
 
   _validateConfig(config) {
     const defaults = {
+      browser: 'chrome',
       waitForAction: 100,
       waitForTimeout: 1000,
+      pressKeyDelay: 10,
       fullPageScreenshots: false,
       disableScreenshots: false,
       uniqueScreenshotNames: false,
@@ -169,9 +177,13 @@ class Puppeteer extends Helper {
     return Object.assign(defaults, config);
   }
 
+  _getOptions(config) {
+    return config.browser === 'firefox' ? this.options.firefox : this.options.chrome;
+  }
+
   _setConfig(config) {
     this.options = this._validateConfig(config);
-    this.puppeteerOptions = Object.assign({ headless: !this.options.show }, this.options.chrome);
+    this.puppeteerOptions = Object.assign({ headless: !this.options.show }, this._getOptions(config));
     this.isRemoteBrowser = !!this.puppeteerOptions.browserWSEndpoint;
     popupStore.defaultAction = this.options.defaultPopupAction;
   }
@@ -179,6 +191,9 @@ class Puppeteer extends Helper {
   static _config() {
     return [
       { name: 'url', message: 'Base url of site to be tested', default: 'http://localhost' },
+      {
+        name: 'show', message: 'Show browser window', default: true, type: 'confirm',
+      },
     ];
   }
 
@@ -339,7 +354,9 @@ class Puppeteer extends Helper {
     if (!page) return;
     page.setDefaultNavigationTimeout(this.options.getPageTimeout);
     this.context = await this.page.$('body');
-    await page.bringToFront();
+    if (this.config.browser === 'chrome') {
+      await page.bringToFront();
+    }
   }
 
   /**
@@ -488,19 +505,41 @@ class Puppeteer extends Helper {
     this.context = await this.page.mainFrame().$('body');
   }
 
+  _extractDataFromPerformanceTiming(timing, ...dataNames) {
+    const navigationStart = timing.navigationStart;
+
+    const extractedData = {};
+    dataNames.forEach((name) => {
+      extractedData[name] = timing[name] - navigationStart;
+    });
+
+    return extractedData;
+  }
+
   /**
-   * {{> ../webapi/amOnPage }}
+   * {{> amOnPage }}
    */
   async amOnPage(url) {
     if (!(/^\w+\:\/\//.test(url))) {
       url = this.options.url + url;
     }
     await this.page.goto(url, { waitUntil: this.options.waitForNavigation });
+
+    const performanceTiming = JSON.parse(await this.page.evaluate(() => JSON.stringify(window.performance.timing)));
+
+    perfTiming = this._extractDataFromPerformanceTiming(
+      performanceTiming,
+      'responseEnd',
+      'domInteractive',
+      'domContentLoadedEventEnd',
+      'loadEventEnd',
+    );
+
     return this._waitForAction();
   }
 
   /**
-   * {{> ../webapi/resizeWindow }}
+   * {{> resizeWindow }}
    *
    * Unlike other drivers Puppeteer changes the size of a viewport, not the window!
    * Puppeteer does not control the window of a browser so it can't adjust its real size.
@@ -523,6 +562,8 @@ class Puppeteer extends Helper {
    *    'X-Sent-By': 'CodeceptJS',
    * });
    * ```
+   *
+   * @param {object} customHeaders headers to set
    */
   async haveRequestHeaders(customHeaders) {
     if (!customHeaders) {
@@ -532,7 +573,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/moveCursorTo}}
+   * {{> moveCursorTo }}
+   * {{ react }}
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
     const els = await this._locate(locator);
@@ -545,33 +587,33 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dragAndDrop }}
+   * {{> dragAndDrop }}
    */
   async dragAndDrop(srcElement, destElement) {
     return proceedDragAndDrop.call(this, srcElement, destElement);
   }
 
   /**
-   * {{> ../webapi/refreshPage }}
+   * {{> refreshPage }}
    */
   async refreshPage() {
     return this.page.reload({ timeout: this.options.getPageTimeout, waitUntil: this.options.waitForNavigation });
   }
 
   /**
-   * {{> ../webapi/scrollPageToTop }}
+   * {{> scrollPageToTop }}
    */
   scrollPageToTop() {
-    return this.page.evaluate(() => {
+    return this.executeScript(() => {
       window.scrollTo(0, 0);
     });
   }
 
   /**
-   * {{> ../webapi/scrollPageToBottom }}
+   * {{> scrollPageToBottom }}
    */
   scrollPageToBottom() {
-    return this.page.evaluate(() => {
+    return this.executeScript(() => {
       const body = document.body;
       const html = document.documentElement;
       window.scrollTo(0, Math.max(
@@ -582,7 +624,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/scrollTo }}
+   * {{> scrollTo }}
    */
   async scrollTo(locator, offsetX = 0, offsetY = 0) {
     if (typeof locator === 'number' && typeof offsetX === 'number') {
@@ -590,25 +632,21 @@ class Puppeteer extends Helper {
       offsetX = locator;
       locator = null;
     }
-    let x = 0;
-    let y = 0;
+
     if (locator) {
       const els = await this._locate(locator);
       assertElementExists(els, locator, 'Element');
       await els[0]._scrollIntoViewIfNeeded();
       const elementCoordinates = await els[0]._clickablePoint();
-      x = elementCoordinates.x;
-      y = elementCoordinates.y;
+      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);
     }
-
-    await this.page.evaluate((x, y) => {
-      window.scrollTo(x, y);
-    }, x + offsetX, y + offsetY);
     return this._waitForAction();
   }
 
   /**
-   * {{> ../webapi/seeInTitle }}
+   * {{> seeInTitle }}
    */
   async seeInTitle(text) {
     const title = await this.page.title();
@@ -616,7 +654,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabPageScrollPosition}}
+   * {{> grabPageScrollPosition }}
    */
   async grabPageScrollPosition() {
     /* eslint-disable comma-dangle */
@@ -643,7 +681,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSeeInTitle }}
+   * {{> dontSeeInTitle }}
    */
   async dontSeeInTitle(text) {
     const title = await this.page.title();
@@ -651,7 +689,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabTitle }}
+   * {{> grabTitle }}
    */
   async grabTitle() {
     return this.page.title();
@@ -664,6 +702,8 @@ class Puppeteer extends Helper {
    * ```js
    * const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
    * ```
+   *
+   * {{ react }}
    */
   async _locate(locator) {
     return findElements(await this.context, locator);
@@ -714,6 +754,8 @@ class Puppeteer extends Helper {
    * I.switchToNextTab();
    * I.switchToNextTab(2);
    * ```
+   *
+   * @param {number} [num=1]
    */
   async switchToNextTab(num = 1) {
     const pages = await this.browser.pages();
@@ -736,6 +778,7 @@ class Puppeteer extends Helper {
    * I.switchToPreviousTab();
    * I.switchToPreviousTab(2);
    * ```
+   * @param {number} [num=1]
    */
   async switchToPreviousTab(num = 1) {
     const pages = await this.browser.pages();
@@ -797,7 +840,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabNumberOfOpenTabs }}
+   * {{> grabNumberOfOpenTabs }}
    */
   async grabNumberOfOpenTabs() {
     const pages = await this.browser.pages();
@@ -805,9 +848,9 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeElement }}
+   * {{> seeElement }}
+   * {{ react }}
    */
-
   async seeElement(locator) {
     let els = await this._locate(locator);
     els = await Promise.all(els.map(el => el.boundingBox()));
@@ -815,7 +858,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSeeElement }}
+   * {{> dontSeeElement }}
+   * {{ react }}
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator);
@@ -824,7 +868,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeElementInDOM }}
+   * {{> seeElementInDOM }}
    */
   async seeElementInDOM(locator) {
     const els = await this._locate(locator);
@@ -832,7 +876,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSeeElementInDOM }}
+   * {{> dontSeeElementInDOM }}
    */
   async dontSeeElementInDOM(locator) {
     const els = await this._locate(locator);
@@ -840,37 +884,77 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/click }}
+   * {{> click }}
+   *
+   * {{ react }}
    */
   async click(locator, context = null) {
     return proceedClick.call(this, locator, context);
   }
 
   /**
-   * {{> ../webapi/clickLink }}
+   * {{> clickLink }}
+   *
+   * {{ react }}
    */
   async clickLink(locator, context = null) {
     return proceedClick.call(this, locator, context, { waitForNavigation: true });
   }
 
   /**
-   * {{> ../webapi/downloadFile }}
+   * Sets a directory to where save files. Allows to test file downloads.
+   * Should be used with [FileSystem helper](https://codecept.io/helpers/FileSystem) to check that file were downloaded correctly.
+   *
+   * By default files are saved to `output/downloads`.
+   * This directory is cleaned on every `handleDownloads` call, to ensure no old files are kept.
+   *
+   * ```js
+   * I.handleDownloads();
+   * I.click('Download Avatar');
+   * I.amInPath('output/downloads');
+   * I.seeFile('avatar.jpg');
+   *
+   * ```
+   *
+   * @param {string} [downloadPath='downloads'] change this parameter to set another directory for saving
+   */
+  async handleDownloads(downloadPath = 'downloads') {
+    downloadPath = path.join(global.output_dir, downloadPath);
+    if (!fs.existsSync(downloadPath)) {
+      fs.mkdirSync(downloadPath, '0777');
+    }
+    fsExtra.emptyDirSync(downloadPath);
+    return this.page._client.send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath });
+  }
+
+  /**
+   * This method is **depreacted**.
+   *
+   * Please use `handleDownloads()` instead.
    */
   async downloadFile(locator, customName) {
     let fileName;
     await this.page.setRequestInterception(true);
-    this.click(locator);
 
     const xRequest = await new Promise((resolve) => {
       this.page.on('request', (request) => {
+        console.log('rq', request, customName);
         const grabbedFileName = request.url().split('/')[request.url().split('/').length - 1];
         const fileExtension = request.url().split('/')[request.url().split('/').length - 1].split('.')[1];
+        console.log('nm', customName, fileExtension);
+        if (customName && path.extname(customName) !== fileExtension) {
+          console.log('bypassing a request');
+          request.continue();
+          return;
+        }
         customName ? fileName = `${customName}.${fileExtension}` : fileName = grabbedFileName;
         request.abort();
         resolve(request);
       });
     });
 
+    await this.click(locator);
+
     const options = {
       encoding: null,
       method: xRequest._method,
@@ -883,14 +967,21 @@ class Puppeteer extends Helper {
     options.headers.Cookie = cookies.map(ck => `${ck.name}=${ck.value}`).join(';');
 
     const response = await axios({
-      method: options.method, url: options.uri, headers: options.headers, responseType: 'arraybuffer',
+      method: options.method,
+      url: options.uri,
+      headers: options.headers,
+      responseType: 'arraybuffer',
+      onDownloadProgress(e) {
+        console.log('+', e);
+      },
     });
 
     const outputFile = path.join(`${global.output_dir}/${fileName}`);
 
     try {
-      return new Promise((resolve, reject) => {
+      await new Promise((resolve, reject) => {
         const wstream = fs.createWriteStream(outputFile);
+        console.log(response);
         wstream.write(response.data);
         wstream.end();
         this.debug(`File is downloaded in ${outputFile}`);
@@ -903,21 +994,25 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/doubleClick }}
+   * {{> doubleClick }}
+   *
+   * {{ react }}
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
   }
 
   /**
-   * {{> ../webapi/rightClick }}
+   * {{> rightClick }}
+   *
+   * {{ react }}
    */
   async rightClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { button: 'right' });
   }
 
   /**
-   * {{> ../webapi/checkOption }}
+   * {{> checkOption }}
    */
   async checkOption(field, context = null) {
     const elm = await this._locateCheckable(field, context);
@@ -931,7 +1026,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/uncheckOption }}
+   * {{> uncheckOption }}
    */
   async uncheckOption(field, context = null) {
     const elm = await this._locateCheckable(field, context);
@@ -945,21 +1040,23 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeCheckboxIsChecked }}
+   * {{> seeCheckboxIsChecked }}
    */
   async seeCheckboxIsChecked(field) {
     return proceedIsChecked.call(this, 'assert', field);
   }
 
   /**
-   * {{> ../webapi/dontSeeCheckboxIsChecked }}
+   * {{> dontSeeCheckboxIsChecked }}
    */
   async dontSeeCheckboxIsChecked(field) {
     return proceedIsChecked.call(this, 'negate', field);
   }
 
   /**
-   * {{> ../webapi/pressKey }}
+   * {{> pressKey }}
+   *
+   * {{ keys }}
    */
   async pressKey(key) {
     let modifier;
@@ -975,7 +1072,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/fillField }}
+   * {{> fillField }}
+   * {{ react }}
    */
   async fillField(field, value) {
     const els = await findFields.call(this, field);
@@ -989,38 +1087,40 @@ class Puppeteer extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
-    await el.type(value.toString(), { delay: 10 });
+    await el.type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
   }
 
 
   /**
-   * {{> ../webapi/clearField }}
+   * {{> clearField }}
    */
   async clearField(field) {
     return this.fillField(field, '');
   }
 
   /**
-   * {{> ../webapi/appendField }}
+   * {{> appendField }}
+   *
+   * {{ react }}
    */
   async appendField(field, value) {
     const els = await findFields.call(this, field);
     assertElementExists(els, field, 'Field');
     await els[0].press('End');
-    await els[0].type(value, { delay: 10 });
+    await els[0].type(value, { delay: this.options.pressKeyDelay });
     return this._waitForAction();
   }
 
   /**
-   * {{> ../webapi/seeInField }}
+   * {{> seeInField }}
    */
   async seeInField(field, value) {
     return proceedSeeInField.call(this, 'assert', field, value);
   }
 
   /**
-   * {{> ../webapi/dontSeeInField }}
+   * {{> dontSeeInField }}
    */
   async dontSeeInField(field, value) {
     return proceedSeeInField.call(this, 'negate', field, value);
@@ -1028,8 +1128,7 @@ class Puppeteer extends Helper {
 
 
   /**
-   * {{> ../webapi/attachFile }}
-   *
+   * {{> attachFile }}
    */
   async attachFile(locator, pathToFile) {
     const file = path.join(global.codecept_dir, pathToFile);
@@ -1044,7 +1143,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/selectOption }}
+   * {{> selectOption }}
    */
   async selectOption(select, option) {
     const els = await findFields.call(this, select);
@@ -1076,7 +1175,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabNumberOfVisibleElements }}
+   * {{> grabNumberOfVisibleElements }}
+   * {{ react }}
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator);
@@ -1085,35 +1185,37 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeInCurrentUrl }}
+   * {{> seeInCurrentUrl }}
    */
   async seeInCurrentUrl(url) {
     stringIncludes('url').assert(url, await this._getPageUrl());
   }
 
   /**
-   * {{> ../webapi/dontSeeInCurrentUrl }}
+   * {{> dontSeeInCurrentUrl }}
    */
   async dontSeeInCurrentUrl(url) {
     stringIncludes('url').negate(url, await this._getPageUrl());
   }
 
   /**
-   * {{> ../webapi/seeCurrentUrlEquals }}
+   * {{> seeCurrentUrlEquals }}
    */
   async seeCurrentUrlEquals(url) {
     urlEquals(this.options.url).assert(url, await this._getPageUrl());
   }
 
   /**
-   * {{> ../webapi/dontSeeCurrentUrlEquals }}
+   * {{> dontSeeCurrentUrlEquals }}
    */
   async dontSeeCurrentUrlEquals(url) {
     urlEquals(this.options.url).negate(url, await this._getPageUrl());
   }
 
   /**
-   * {{> ../webapi/see }}
+   * {{> see }}
+   *
+   * {{ react }}
    */
   async see(text, context = null) {
     return proceedSee.call(this, 'assert', text, context);
@@ -1131,14 +1233,16 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSee }}
+   * {{> dontSee }}
+   *
+   * {{ react }}
    */
   async dontSee(text, context = null) {
     return proceedSee.call(this, 'negate', text, context);
   }
 
   /**
-   * {{> ../webapi/grabSource }}
+   * {{> grabSource }}
    */
   async grabSource() {
     return this.page.content();
@@ -1159,14 +1263,14 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabCurrentUrl }}
+   * {{> grabCurrentUrl }}
    */
   async grabCurrentUrl() {
     return this._getPageUrl();
   }
 
   /**
-   * {{> ../webapi/seeInSource }}
+   * {{> seeInSource }}
    */
   async seeInSource(text) {
     const source = await this.page.content();
@@ -1174,7 +1278,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSeeInSource }}
+   * {{> dontSeeInSource }}
    */
   async dontSeeInSource(text) {
     const source = await this.page.content();
@@ -1183,20 +1287,19 @@ class Puppeteer extends Helper {
 
 
   /**
-   * asserts that an element appears a given number of times in the DOM
-   * Element is located by label or name or CSS or XPath.
+   * {{> seeNumberOfElements }}
    *
-   * ```js
-   * I.seeNumberOfElements('#submitBtn', 1);
-   * ```
+   * {{ react }}
    */
-  async seeNumberOfElements(selector, num) {
-    const elements = await this._locate(selector);
-    return equals(`expected number of elements (${selector}) is ${num}, but found ${elements.length}`).assert(elements.length, num);
+  async seeNumberOfElements(locator, num) {
+    const elements = await this._locate(locator);
+    return equals(`expected number of elements (${locator}) is ${num}, but found ${elements.length}`).assert(elements.length, num);
   }
 
   /**
-   * {{> ../webapi/seeNumberOfVisibleElements }}
+   * {{> seeNumberOfVisibleElements }}
+   *
+   * {{ react }}
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator);
@@ -1204,7 +1307,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/setCookie }}
+   * {{> setCookie }}
    */
   async setCookie(cookie) {
     if (Array.isArray(cookie)) {
@@ -1214,7 +1317,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeCookie}}
+   * {{> seeCookie }}
    *
    */
   async seeCookie(name) {
@@ -1223,7 +1326,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dontSeeCookie}}
+   * {{> dontSeeCookie }}
    */
   async dontSeeCookie(name) {
     const cookies = await this.page.cookies();
@@ -1231,7 +1334,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabCookie}}
+   * {{> grabCookie }}
    *
    * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
    */
@@ -1243,7 +1346,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/clearCookie}}
+   * {{> clearCookie }}
    */
   async clearCookie(name) {
     const cookies = await this.page.cookies();
@@ -1256,7 +1359,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/executeScript }}
+   * {{> executeScript }}
    *
    * If a function returns a Promise It will wait for it resolution.
    */
@@ -1269,7 +1372,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/executeAsyncScript }}
+   * {{> executeAsyncScript }}
    *
    * Asynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
    */
@@ -1290,7 +1393,8 @@ class Puppeteer extends Helper {
 
 
   /**
-   * {{> ../webapi/grabTextFrom }}
+   * {{> grabTextFrom }}
+   * {{ react }}
    */
   async grabTextFrom(locator) {
     const els = await this._locate(locator);
@@ -1304,7 +1408,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabValueFrom }}
+   * {{> grabValueFrom }}
    */
   async grabValueFrom(locator) {
     const els = await findFields.call(this, locator);
@@ -1313,7 +1417,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabHTMLFrom }}
+   * {{> grabHTMLFrom }}
    */
   async grabHTMLFrom(locator) {
     const els = await this._locate(locator);
@@ -1326,7 +1430,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabCssPropertyFrom }}
+   * {{> grabCssPropertyFrom }}
+   * {{ react }}
    */
   async grabCssPropertyFrom(locator, cssProperty) {
     const els = await this._locate(locator);
@@ -1340,7 +1445,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeCssPropertiesOnElements }}
+   * {{> seeCssPropertiesOnElements }}
+   * {{ react }}
    */
   async seeCssPropertiesOnElements(locator, cssProperties) {
     const res = await this._locate(locator);
@@ -1378,7 +1484,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/seeAttributesOnElements }}
+   * {{> seeAttributesOnElements }}
+   * {{ react }}
    */
   async seeAttributesOnElements(locator, attributes) {
     const res = await this._locate(locator);
@@ -1408,7 +1515,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/dragSlider }}
+   * {{> dragSlider }}
+   * {{ react }}
    */
   async dragSlider(locator, offsetX = 0) {
     const src = await this._locate(locator);
@@ -1429,7 +1537,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/grabAttributeFrom }}
+   * {{> grabAttributeFrom }}
+   * {{ react }}
    */
   async grabAttributeFrom(locator, attr) {
     const els = await this._locate(locator);
@@ -1445,7 +1554,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/saveScreenshot }}
+   * {{> saveScreenshot }}
    */
   async saveScreenshot(fileName, fullPage) {
     const fullPageOption = fullPage || this.options.fullPageScreenshots;
@@ -1464,7 +1573,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/wait }}
+   * {{> wait }}
    */
   async wait(sec) {
     return new Promise(((done) => {
@@ -1473,7 +1582,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForEnabled }}
+   * {{> waitForEnabled }}
    */
   async waitForEnabled(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1503,7 +1612,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForValue }}
+   * {{> waitForValue }}
    */
   async waitForValue(field, value, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1534,7 +1643,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitNumberOfVisibleElements }}
+   * {{> waitNumberOfVisibleElements }}
+   * {{ react }}
    */
   async waitNumberOfVisibleElements(locator, num, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1564,7 +1674,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForElement }}
+   * {{> waitForElement }}
+   * {{ react }}
    */
   async waitForElement(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1583,7 +1694,9 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForVisible }}
+   * {{> waitForVisible }}
+   *
+   * This method accepts [React selectors](https://codecept.io/react).
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1606,7 +1719,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForInvisible }}
+   * {{> waitForInvisible }}
    */
   async waitForInvisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1630,7 +1743,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitToHide }}
+   * {{> waitToHide }}
    */
   async waitToHide(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1659,7 +1772,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitInUrl }}
+   * {{> waitInUrl }}
    */
   async waitInUrl(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1678,7 +1791,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitUrlEquals }}
+   * {{> waitUrlEquals }}
    */
   async waitUrlEquals(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1702,7 +1815,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForText }}
+   * {{> waitForText }}
    */
   async waitForText(text, sec = null, context = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1744,8 +1857,8 @@ class Puppeteer extends Helper {
    * I.waitForRequest(request => request.url() === 'http://example.com' && request.method() === 'GET');
    * ```
    *
-   * @param {*} urlOrPredicate
-   * @param {*} sec
+   * @param {string|function} urlOrPredicate
+   * @param {number?} [sec=null] seconds to wait
    */
   async waitForRequest(urlOrPredicate, sec = null) {
     const timeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1760,8 +1873,8 @@ class Puppeteer extends Helper {
    * I.waitForResponse(request => request.url() === 'http://example.com' && request.method() === 'GET');
    * ```
    *
-   * @param {*} urlOrPredicate
-   * @param {*} sec
+   * @param {string|function} urlOrPredicate
+   * @param {number?} [sec=null] number of seconds to wait
    */
   async waitForResponse(urlOrPredicate, sec = null) {
     const timeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1769,7 +1882,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/switchTo }}
+   * {{> switchTo }}
    */
   async switchTo(locator) {
     if (Number.isInteger(locator)) {
@@ -1813,7 +1926,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForFunction }}
+   * {{> waitForFunction }}
    */
   async waitForFunction(fn, argsOrSec = null, sec = null) {
     let args = [];
@@ -1842,7 +1955,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitUntil }}
+   * {{> waitUntil }}
    */
   async waitUntil(fn, sec = null) {
     console.log('This method will remove in CodeceptJS 1.4; use `waitForFunction` instead!');
@@ -1859,7 +1972,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> ../webapi/waitForDetached }}
+   * {{> waitForDetached }}
    */
   async waitForDetached(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1887,6 +2000,13 @@ class Puppeteer extends Helper {
   async _waitForAction() {
     return this.wait(this.options.waitForAction / 1000);
   }
+
+  /**
+   * {{> grabDataFromPerformanceTiming }}
+   */
+  async grabDataFromPerformanceTiming() {
+    return perfTiming;
+  }
 }
 
 module.exports = Puppeteer;
@@ -1911,9 +2031,9 @@ async function findFrame(context, name, url) {
 }
 
 async function findElements(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
   locator = new Locator(locator, 'css');
   if (!locator.isXPath()) return matcher.$$(locator.simplify());
-
   return matcher.$x(locator.value);
 }
 
@@ -1940,6 +2060,7 @@ 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);
 
@@ -2181,7 +2302,11 @@ function $XPath(element, selector) {
 function targetCreatedHandler(page) {
   if (!page) return;
   this.withinLocator = null;
-  page.on('load', frame => this.context = page.$('body'));
+  page.on('load', (frame) => {
+    page.$('body')
+      .catch(() => null)
+      .then(context => this.context = context);
+  });
   page.on('console', (msg) => {
     this.debugSection(`Browser:${ucfirst(msg.type())}`, (msg._text || '') + msg.args().join(' '));
     consoleLogStore.add(msg);