codeceptjs 2.1.3 → 2.2.1

package/docs/build/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,32 +505,56 @@ class Puppeteer extends Helper {
     this.context = await this.page.mainFrame().$('body');
   }
 
-  /**
-   * Opens a web page in a browser. Requires relative or absolute url.
-If url starts with `/`, opens a web page of a site defined in `url` config parameter.
+  _extractDataFromPerformanceTiming(timing, ...dataNames) {
+    const navigationStart = timing.navigationStart;
+
+    const extractedData = {};
+    dataNames.forEach((name) => {
+      extractedData[name] = timing[name] - navigationStart;
+    });
 
-```js
-I.amOnPage('/'); // opens main page of website
-I.amOnPage('https://github.com'); // opens github
-I.amOnPage('/login'); // opens a login page
-```
+    return extractedData;
+  }
 
-@param url url path or global url.
+  /**
+   * Opens a web page in a browser. Requires relative or absolute url.
+   * If url starts with `/`, opens a web page of a site defined in `url` config parameter.
+   * 
+   * ```js
+   * I.amOnPage('/'); // opens main page of website
+   * I.amOnPage('https://github.com'); // opens github
+   * I.amOnPage('/login'); // opens a login page
+   * ```
+   * 
+   * @param {string} url url path or global url.
+   * {--end--}
    */
   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();
   }
 
   /**
    * Resize the current window to provided width and height.
-First parameter can be set to `maximize`.
-
-@param width width in pixels or `maximize`.
-@param height height in pixels.
+   * First parameter can be set to `maximize`.
+   * 
+   * @param {number} width width in pixels or `maximize`.
+   * @param {number} height height in pixels.
+   * {--end--}
    *
    * 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.
@@ -536,6 +577,8 @@ First parameter can be set to `maximize`.
    *    'X-Sent-By': 'CodeceptJS',
    * });
    * ```
+   *
+   * @param {object} customHeaders headers to set
    */
   async haveRequestHeaders(customHeaders) {
     if (!customHeaders) {
@@ -546,16 +589,18 @@ First parameter can be set to `maximize`.
 
   /**
    * Moves cursor to element matched by locator.
-Extra shift can be set with offsetX and offsetY options.
-
-```js
-I.moveCursorTo('.tooltip');
-I.moveCursorTo('#submit', 5,5);
-```
-
-@param locator located by CSS|XPath|strict locator.
-@param offsetX (optional) X-axis offset.
-@param offsetY (optional) Y-axis offset.
+   * Extra shift can be set with offsetX and offsetY options.
+   * 
+   * ```js
+   * I.moveCursorTo('.tooltip');
+   * I.moveCursorTo('#submit', 5,5);
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * @param {number} offsetX (optional, `0` by default) X-axis offset.
+   * @param {number} offsetY (optional, `0` by default) Y-axis offset.
+   * {--end--}
+   * {{ react }}
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
     const els = await this._locate(locator);
@@ -569,13 +614,14 @@ I.moveCursorTo('#submit', 5,5);
 
   /**
    * Drag an item to a destination element.
-
-```js
-I.dragAndDrop('#dragHandle', '#container');
-```
-
-@param srcElement located by CSS|XPath|strict locator.
-@param destElement located by CSS|XPath|strict locator.
+   * 
+   * ```js
+   * I.dragAndDrop('#dragHandle', '#container');
+   * ```
+   * 
+   * @param {string|object} srcElement located by CSS|XPath|strict locator.
+   * @param {string|object} destElement located by CSS|XPath|strict locator.
+   * {--end--}
    */
   async dragAndDrop(srcElement, destElement) {
     return proceedDragAndDrop.call(this, srcElement, destElement);
@@ -583,11 +629,11 @@ I.dragAndDrop('#dragHandle', '#container');
 
   /**
    * Reload the current page.
-
-```js
-I.refreshPage();
-```
-
+   * 
+   * ```js
+   * I.refreshPage();
+   * ```
+   * {--end--}
    */
   async refreshPage() {
     return this.page.reload({ timeout: this.options.getPageTimeout, waitUntil: this.options.waitForNavigation });
@@ -595,26 +641,28 @@ I.refreshPage();
 
   /**
    * Scroll page to the top.
-
-```js
-I.scrollPageToTop();
-```
+   * 
+   * ```js
+   * I.scrollPageToTop();
+   * ```
+   * {--end--}
    */
   scrollPageToTop() {
-    return this.page.evaluate(() => {
+    return this.executeScript(() => {
       window.scrollTo(0, 0);
     });
   }
 
   /**
    * Scroll page to the bottom.
-
-```js
-I.scrollPageToBottom();
-```
+   * 
+   * ```js
+   * I.scrollPageToBottom();
+   * ```
+   * {--end--}
    */
   scrollPageToBottom() {
-    return this.page.evaluate(() => {
+    return this.executeScript(() => {
       const body = document.body;
       const html = document.documentElement;
       window.scrollTo(0, Math.max(
@@ -626,16 +674,17 @@ I.scrollPageToBottom();
 
   /**
    * Scrolls to element matched by locator.
-Extra shift can be set with offsetX and offsetY options.
-
-```js
-I.scrollTo('footer');
-I.scrollTo('#submit', 5, 5);
-```
-
-@param locator located by CSS|XPath|strict locator.
-@param offsetX (optional) X-axis offset.
-@param offsetY (optional) Y-axis offset.
+   * Extra shift can be set with offsetX and offsetY options.
+   * 
+   * ```js
+   * I.scrollTo('footer');
+   * I.scrollTo('#submit', 5, 5);
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * @param {number} offsetX (optional, `0` by default) X-axis offset.
+   * @param {number} offsetY (optional, `0` by default) Y-axis offset.
+   * {--end--}
    */
   async scrollTo(locator, offsetX = 0, offsetY = 0) {
     if (typeof locator === 'number' && typeof offsetX === 'number') {
@@ -643,27 +692,28 @@ I.scrollTo('#submit', 5, 5);
       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();
   }
 
   /**
    * Checks that title contains text.
-
-@param text text value to check.
+   * 
+   * ```js
+   * I.seeInTitle('Home Page');
+   * ```
+   * 
+   * @param {string} text text value to check.
+   * {--end--}
    */
   async seeInTitle(text) {
     const title = await this.page.title();
@@ -672,11 +722,14 @@ I.scrollTo('#submit', 5, 5);
 
   /**
    * Retrieves a page scroll position and returns it to test.
-Resumes test execution, so **should be used inside an async function with `await`** operator.
-
-```js
-let { x, y } = await I.grabPageScrollPosition();
-```
+   * Resumes test execution, so **should be used inside an async function with `await`** operator.
+   * 
+   * ```js
+   * let { x, y } = await I.grabPageScrollPosition();
+   * ```
+   * 
+   * @returns {Promise<object>} scroll position
+   * {--end--}
    */
   async grabPageScrollPosition() {
     /* eslint-disable comma-dangle */
@@ -704,8 +757,13 @@ let { x, y } = await I.grabPageScrollPosition();
 
   /**
    * Checks that title does not contain text.
-
-@param text text value to check.
+   * 
+   * ```js
+   * I.dontSeeInTitle('Error');
+   * ```
+   * 
+   * @param {string} text value to check.
+   * {--end--}
    */
   async dontSeeInTitle(text) {
     const title = await this.page.title();
@@ -714,11 +772,14 @@ let { x, y } = await I.grabPageScrollPosition();
 
   /**
    * Retrieves a page title and returns it to test.
-Resumes test execution, so **should be used inside async with `await`** operator.
-
-```js
-let title = await I.grabTitle();
-```
+   * Resumes test execution, so **should be used inside async with `await`** operator.
+   * 
+   * ```js
+   * let title = await I.grabTitle();
+   * ```
+   * 
+   * @returns {Promise<string>} title
+   * {--end--}
    */
   async grabTitle() {
     return this.page.title();
@@ -731,6 +792,8 @@ let title = await I.grabTitle();
    * ```js
    * const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
    * ```
+   *
+   * {{ react }}
    */
   async _locate(locator) {
     return findElements(await this.context, locator);
@@ -781,6 +844,8 @@ let title = await I.grabTitle();
    * I.switchToNextTab();
    * I.switchToNextTab(2);
    * ```
+   *
+   * @param {number} [num=1]
    */
   async switchToNextTab(num = 1) {
     const pages = await this.browser.pages();
@@ -803,6 +868,7 @@ let title = await I.grabTitle();
    * I.switchToPreviousTab();
    * I.switchToPreviousTab(2);
    * ```
+   * @param {number} [num=1]
    */
   async switchToPreviousTab(num = 1) {
     const pages = await this.browser.pages();
@@ -865,10 +931,13 @@ let title = await I.grabTitle();
 
   /**
    * Grab number of open tabs.
-
-```js
-I.grabNumberOfOpenTabs();
-```
+   * 
+   * ```js
+   * let tabs = await I.grabNumberOfOpenTabs();
+   * ```
+   * 
+   * @returns {Promise<number>} number of open tabs
+   * {--end--}
    */
   async grabNumberOfOpenTabs() {
     const pages = await this.browser.pages();
@@ -877,14 +946,15 @@ I.grabNumberOfOpenTabs();
 
   /**
    * Checks that a given Element is visible
-Element is located by CSS or XPath.
-
-```js
-I.seeElement('#modal');
-```
-@param locator located by CSS|XPath|strict locator.
+   * Element is located by CSS or XPath.
+   * 
+   * ```js
+   * I.seeElement('#modal');
+   * ```
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * {--end--}
+   * {{ react }}
    */
-
   async seeElement(locator) {
     let els = await this._locate(locator);
     els = await Promise.all(els.map(el => el.boundingBox()));
@@ -893,8 +963,14 @@ I.seeElement('#modal');
 
   /**
    * Opposite to `seeElement`. Checks that element is not visible (or in DOM)
-
-@param locator located by CSS|XPath|Strict locator.
+   * 
+   * ```js
+   * I.dontSeeElement('.modal'); // modal is not shown
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|Strict locator.
+   * {--end--}
+   * {{ react }}
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator);
@@ -904,12 +980,13 @@ I.seeElement('#modal');
 
   /**
    * Checks that a given Element is present in the DOM
-Element is located by CSS or XPath.
-
-```js
-I.seeElementInDOM('#modal');
-```
-@param locator located by CSS|XPath|strict locator.
+   * Element is located by CSS or XPath.
+   * 
+   * ```js
+   * I.seeElementInDOM('#modal');
+   * ```
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * {--end--}
    */
   async seeElementInDOM(locator) {
     const els = await this._locate(locator);
@@ -918,8 +995,13 @@ I.seeElementInDOM('#modal');
 
   /**
    * Opposite to `seeElementInDOM`. Checks that element is not on page.
-
-@param locator located by CSS|XPath|Strict locator.
+   * 
+   * ```js
+   * I.dontSeeElementInDOM('.nav'); // checks that element is not on page visible or not
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|Strict locator.
+   * {--end--}
    */
   async dontSeeElementInDOM(locator) {
     const els = await this._locate(locator);
@@ -928,29 +1010,32 @@ I.seeElementInDOM('#modal');
 
   /**
    * Perform a click on a link or a button, given by a locator.
-If a fuzzy locator is given, the page will be searched for a button, link, or image matching the locator string.
-For buttons, the "value" attribute, "name" attribute, and inner text are searched. For links, the link text is searched.
-For images, the "alt" attribute and inner text of any parent links are searched.
-
-The second parameter is a context (CSS or XPath locator) to narrow the search.
-
-```js
-// simple link
-I.click('Logout');
-// button of form
-I.click('Submit');
-// CSS button
-I.click('#form input[type=submit]');
-// XPath
-I.click('//form/*[@type=submit]');
-// link in context
-I.click('Logout', '#nav');
-// using strict locator
-I.click({css: 'nav a.login'});
-```
-
-@param locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
-@param context (optional) element to search in CSS|XPath|Strict locator.
+   * If a fuzzy locator is given, the page will be searched for a button, link, or image matching the locator string.
+   * For buttons, the "value" attribute, "name" attribute, and inner text are searched. For links, the link text is searched.
+   * For images, the "alt" attribute and inner text of any parent links are searched.
+   * 
+   * The second parameter is a context (CSS or XPath locator) to narrow the search.
+   * 
+   * ```js
+   * // simple link
+   * I.click('Logout');
+   * // button of form
+   * I.click('Submit');
+   * // CSS button
+   * I.click('#form input[type=submit]');
+   * // XPath
+   * I.click('//form/*[@type=submit]');
+   * // link in context
+   * I.click('Logout', '#nav');
+   * // using strict locator
+   * I.click({css: 'nav a.login'});
+   * ```
+   * 
+   * @param {string|object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+   * @param {string|object} context (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+   * {--end--}
+   *
+   * {{ react }}
    */
   async click(locator, context = null) {
     return proceedClick.call(this, locator, context);
@@ -958,45 +1043,74 @@ I.click({css: 'nav a.login'});
 
   /**
    * Performs a click on a link and waits for navigation before moving on.
-
-```js
-I.click('Logout', '#nav');
-```
-@param locator clickable link or button located by text, or any element located by CSS|XPath|strict locator
-@param context (optional) element to search in CSS|XPath|Strict locator
+   * 
+   * ```js
+   * I.clickLink('Logout', '#nav');
+   * ```
+   * @param {string|object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator
+   * @param {string|object} context (optional, `null` by default) element to search in CSS|XPath|Strict locator
+   * {--end--}
+   *
+   * {{ react }}
    */
   async clickLink(locator, context = null) {
     return proceedClick.call(this, locator, context, { waitForNavigation: true });
   }
 
   /**
-   * Performs a download file on an element matched by link|button|CSS or XPath.
-File is downloaded by default to output folder.
-If no custom file name is provided, the default name will be used
-
-
-```js
-I.downloadFile('td[class="text-right file-link"] a', 'thisIsCustomName');
-```
+   * 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 });
+  }
 
-@param locator clickable link or button located by CSS|XPath locator.
-@param string custom file name.
+  /**
+   * 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,
@@ -1009,14 +1123,21 @@ I.downloadFile('td[class="text-right file-link"] a', 'thisIsCustomName');
     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}`);
@@ -1030,17 +1151,20 @@ I.downloadFile('td[class="text-right file-link"] a', 'thisIsCustomName');
 
   /**
    * Performs a double-click on an element matched by link|button|label|CSS or XPath.
-Context can be specified as second parameter to narrow search.
-
-```js
-I.doubleClick('Edit');
-I.doubleClick('Edit', '.actions');
-I.doubleClick({css: 'button.accept'});
-I.doubleClick('.btn.edit');
-```
-
-@param locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
-@param context (optional) element to search in CSS|XPath|Strict locator.
+   * Context can be specified as second parameter to narrow search.
+   * 
+   * ```js
+   * I.doubleClick('Edit');
+   * I.doubleClick('Edit', '.actions');
+   * I.doubleClick({css: 'button.accept'});
+   * I.doubleClick('.btn.edit');
+   * ```
+   * 
+   * @param {string|object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+   * @param {string|object} context (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+   * {--end--}
+   *
+   * {{ react }}
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
@@ -1048,19 +1172,21 @@ I.doubleClick('.btn.edit');
 
   /**
    * Performs right click on a clickable element matched by semantic locator, CSS or XPath.
-
-```js
-// right click element with id el
-I.rightClick('#el');
-// right click link or button with text "Click me"
-I.rightClick('Click me');
-// right click button with text "Click me" inside .context
-I.rightClick('Click me', '.context');
-```
-
-@param locator clickable element located by CSS|XPath|strict locator.
-@param context (optional) element located by CSS|XPath|strict locator.
-
+   * 
+   * ```js
+   * // right click element with id el
+   * I.rightClick('#el');
+   * // right click link or button with text "Click me"
+   * I.rightClick('Click me');
+   * // right click button with text "Click me" inside .context
+   * I.rightClick('Click me', '.context');
+   * ```
+   * 
+   * @param {string|object} locator clickable element located by CSS|XPath|strict locator.
+   * @param {string|object} context (optional, `null` by default) element located by CSS|XPath|strict locator.
+   * {--end--}
+   *
+   * {{ react }}
    */
   async rightClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { button: 'right' });
@@ -1068,17 +1194,18 @@ I.rightClick('Click me', '.context');
 
   /**
    * Selects a checkbox or radio button.
-Element is located by label or name or CSS or XPath.
-
-The second parameter is a context (CSS or XPath locator) to narrow the search.
-
-```js
-I.checkOption('#agree');
-I.checkOption('I Agree to Terms and Conditions');
-I.checkOption('agree', '//form');
-```
-@param field checkbox located by label | name | CSS | XPath | strict locator.
-@param context (optional) element located by CSS | XPath | strict locator.
+   * Element is located by label or name or CSS or XPath.
+   * 
+   * The second parameter is a context (CSS or XPath locator) to narrow the search.
+   * 
+   * ```js
+   * I.checkOption('#agree');
+   * I.checkOption('I Agree to Terms and Conditions');
+   * I.checkOption('agree', '//form');
+   * ```
+   * @param {string|object} field checkbox located by label | name | CSS | XPath | strict locator.
+   * @param {string} context (optional, `null` by default) element located by CSS | XPath | strict locator.
+   * {--end--}
    */
   async checkOption(field, context = null) {
     const elm = await this._locateCheckable(field, context);
@@ -1093,17 +1220,18 @@ I.checkOption('agree', '//form');
 
   /**
    * Unselects a checkbox or radio button.
-Element is located by label or name or CSS or XPath.
-
-The second parameter is a context (CSS or XPath locator) to narrow the search.
-
-```js
-I.uncheckOption('#agree');
-I.uncheckOption('I Agree to Terms and Conditions');
-I.uncheckOption('agree', '//form');
-```
-@param field checkbox located by label | name | CSS | XPath | strict locator.
-@param context (optional) element located by CSS | XPath | strict locator.
+   * Element is located by label or name or CSS or XPath.
+   * 
+   * The second parameter is a context (CSS or XPath locator) to narrow the search.
+   * 
+   * ```js
+   * I.uncheckOption('#agree');
+   * I.uncheckOption('I Agree to Terms and Conditions');
+   * I.uncheckOption('agree', '//form');
+   * ```
+   * @param {string|object} field checkbox located by label | name | CSS | XPath | strict locator.
+   * @param {string} context (optional, `null` by default) element located by CSS | XPath | strict locator.
+   * {--end--}
    */
   async uncheckOption(field, context = null) {
     const elm = await this._locateCheckable(field, context);
@@ -1118,13 +1246,15 @@ I.uncheckOption('agree', '//form');
 
   /**
    * Verifies that the specified checkbox is checked.
-
-```js
-I.seeCheckboxIsChecked('Agree');
-I.seeCheckboxIsChecked('#agree'); // I suppose user agreed to terms
-I.seeCheckboxIsChecked({css: '#signup_form input[type=checkbox]'});
-```
-@param field located by label|name|CSS|XPath|strict locator.
+   * 
+   * ```js
+   * I.seeCheckboxIsChecked('Agree');
+   * I.seeCheckboxIsChecked('#agree'); // I suppose user agreed to terms
+   * I.seeCheckboxIsChecked({css: '#signup_form input[type=checkbox]'});
+   * ```
+   * 
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator.
+   * {--end--}
    */
   async seeCheckboxIsChecked(field) {
     return proceedIsChecked.call(this, 'assert', field);
@@ -1132,8 +1262,15 @@ I.seeCheckboxIsChecked({css: '#signup_form input[type=checkbox]'});
 
   /**
    * Verifies that the specified checkbox is not checked.
-
-@param field located by label|name|CSS|XPath|strict locator.
+   * 
+   * ```js
+   * I.dontSeeeCheckboxIsChedcked('#agree'); // located by ID
+   * I.dontSeeeCheckboxIsChedcked('I agree to terms'); // located by label
+   * I.dontSeeeCheckboxIsChedcked('agree'); // located by name
+   * ```
+   * 
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator.
+   * {--end--}
    */
   async dontSeeCheckboxIsChecked(field) {
     return proceedIsChecked.call(this, 'negate', field);
@@ -1141,16 +1278,19 @@ I.seeCheckboxIsChecked({css: '#signup_form input[type=checkbox]'});
 
   /**
    * Presses a key on a focused element.
-Special keys like 'Enter', 'Control', [etc](https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/element/:id/value)
-will be replaced with corresponding unicode.
-If modifier key is used (Control, Command, Alt, Shift) in array, it will be released afterwards.
-
-```js
-I.pressKey('Enter');
-I.pressKey(['Control','a']);
-```
-
-@param key key or array of keys to press.
+   * Special keys like 'Enter', 'Control', [etc](https://code.google.com/p/selenium/wiki/JsonWireProtocol#/session/:sessionId/element/:id/value)
+   * will be replaced with corresponding unicode.
+   * If modifier key is used (Control, Command, Alt, Shift) in array, it will be released afterwards.
+   * 
+   * ```js
+   * I.pressKey('Enter');
+   * I.pressKey(['Control','a']);
+   * ```
+   * 
+   * @param {string|array} key key or array of keys to press.
+   * {--end--}
+   *
+   * {{ keys }}
    */
   async pressKey(key) {
     let modifier;
@@ -1167,21 +1307,22 @@ I.pressKey(['Control','a']);
 
   /**
    * Fills a text field or textarea, after clearing its value, with the given string.
-Field is located by name, label, CSS, or XPath.
-
-```js
-// by label
-I.fillField('Email', 'hello@world.com');
-// by name
-I.fillField('password', secret('123456'));
-// by CSS
-I.fillField('form#login input[name=username]', 'John');
-// or by strict locator
-I.fillField({css: 'form#login input[name=username]'}, 'John');
-```
-@param field located by label|name|CSS|XPath|strict locator.
-@param value text value to fill.
-
+   * Field is located by name, label, CSS, or XPath.
+   * 
+   * ```js
+   * // by label
+   * I.fillField('Email', 'hello@world.com');
+   * // by name
+   * I.fillField('password', secret('123456'));
+   * // by CSS
+   * I.fillField('form#login input[name=username]', 'John');
+   * // or by strict locator
+   * I.fillField({css: 'form#login input[name=username]'}, 'John');
+   * ```
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string} value text value to fill.
+   * {--end--}
+   * {{ react }}
    */
   async fillField(field, value) {
     const els = await findFields.call(this, field);
@@ -1195,20 +1336,21 @@ I.fillField({css: 'form#login input[name=username]'}, 'John');
     } 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();
   }
 
 
   /**
    * Clears a `<textarea>` or text `<input>` element's value.
-
-```js
-I.clearField('Email');
-I.clearField('user[email]');
-I.clearField('#email');
-```
-@param field located by label|name|CSS|XPath|strict locator.
+   * 
+   * ```js
+   * I.clearField('Email');
+   * I.clearField('user[email]');
+   * I.clearField('#email');
+   * ```
+   * @param {string|object} editable field located by label|name|CSS|XPath|strict locator.
+   * {--end--}
    */
   async clearField(field) {
     return this.fillField(field, '');
@@ -1216,34 +1358,38 @@ I.clearField('#email');
 
   /**
    * Appends text to a input field or textarea.
-Field is located by name, label, CSS or XPath
-
-```js
-I.appendField('#myTextField', 'appended');
-```
-@param field located by label|name|CSS|XPath|strict locator
-@param value text value to append.
+   * Field is located by name, label, CSS or XPath
+   * 
+   * ```js
+   * I.appendField('#myTextField', 'appended');
+   * ```
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator
+   * @param {string} value text value to append.
+   * {--end--}
+   *
+   * {{ 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();
   }
 
   /**
    * Checks that the given input field or textarea equals to given value.
-For fuzzy locators, fields are matched by label text, the "name" attribute, CSS, and XPath.
-
-```js
-I.seeInField('Username', 'davert');
-I.seeInField({css: 'form textarea'},'Type your comment here');
-I.seeInField('form input[type=hidden]','hidden_value');
-I.seeInField('#searchform input','Search');
-```
-@param field located by label|name|CSS|XPath|strict locator.
-@param value value to check.
+   * For fuzzy locators, fields are matched by label text, the "name" attribute, CSS, and XPath.
+   * 
+   * ```js
+   * I.seeInField('Username', 'davert');
+   * I.seeInField({css: 'form textarea'},'Type your comment here');
+   * I.seeInField('form input[type=hidden]','hidden_value');
+   * I.seeInField('#searchform input','Search');
+   * ```
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string} value value to check.
+   * {--end--}
    */
   async seeInField(field, value) {
     return proceedSeeInField.call(this, 'assert', field, value);
@@ -1251,10 +1397,16 @@ I.seeInField('#searchform input','Search');
 
   /**
    * Checks that value of input field or textare doesn't equal to given value
-Opposite to `seeInField`.
-
-@param field located by label|name|CSS|XPath|strict locator.
-@param value value to check.
+   * Opposite to `seeInField`.
+   * 
+   * ```js
+   * I.dontSeeInField('email', 'user@user.com'); // field by name
+   * I.dontSeeInField({ css: 'form input.email' }, 'user@user.com'); // field by CSS
+   * ```
+   * 
+   * @param {string|object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string} value value to check.
+   * {--end--}
    */
   async dontSeeInField(field, value) {
     return proceedSeeInField.call(this, 'negate', field, value);
@@ -1263,17 +1415,17 @@ Opposite to `seeInField`.
 
   /**
    * Attaches a file to element located by label, name, CSS or XPath
-Path to file is relative current codecept directory (where codecept.json or codecept.conf.js is located).
-File will be uploaded to remote system (if tests are running remotely).
-
-```js
-I.attachFile('Avatar', 'data/avatar.jpg');
-I.attachFile('form input[name=avatar]', 'data/avatar.jpg');
-```
-
-@param locator field located by label|name|CSS|XPath|strict locator.
-@param pathToFile local file path relative to codecept.json config file.
-   *
+   * Path to file is relative current codecept directory (where codecept.json or codecept.conf.js is located).
+   * File will be uploaded to remote system (if tests are running remotely).
+   * 
+   * ```js
+   * I.attachFile('Avatar', 'data/avatar.jpg');
+   * I.attachFile('form input[name=avatar]', 'data/avatar.jpg');
+   * ```
+   * 
+   * @param {string|object} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string} pathToFile local file path relative to codecept.json config file.
+   * {--end--}
    */
   async attachFile(locator, pathToFile) {
     const file = path.join(global.codecept_dir, pathToFile);
@@ -1289,25 +1441,26 @@ I.attachFile('form input[name=avatar]', 'data/avatar.jpg');
 
   /**
    * Selects an option in a drop-down select.
-Field is searched by label | name | CSS | XPath.
-Option is selected by visible text or by value.
-
-```js
-I.selectOption('Choose Plan', 'Monthly'); // select by label
-I.selectOption('subscription', 'Monthly'); // match option by text
-I.selectOption('subscription', '0'); // or by value
-I.selectOption('//form/select[@name=account]','Premium');
-I.selectOption('form select[name=account]', 'Premium');
-I.selectOption({css: 'form select[name=account]'}, 'Premium');
-```
-
-Provide an array for the second argument to select multiple options.
-
-```js
-I.selectOption('Which OS do you use?', ['Android', 'iOS']);
-```
-@param select field located by label|name|CSS|XPath|strict locator.
-@param option visible text or value of option.
+   * Field is searched by label | name | CSS | XPath.
+   * Option is selected by visible text or by value.
+   * 
+   * ```js
+   * I.selectOption('Choose Plan', 'Monthly'); // select by label
+   * I.selectOption('subscription', 'Monthly'); // match option by text
+   * I.selectOption('subscription', '0'); // or by value
+   * I.selectOption('//form/select[@name=account]','Premium');
+   * I.selectOption('form select[name=account]', 'Premium');
+   * I.selectOption({css: 'form select[name=account]'}, 'Premium');
+   * ```
+   * 
+   * Provide an array for the second argument to select multiple options.
+   * 
+   * ```js
+   * I.selectOption('Which OS do you use?', ['Android', 'iOS']);
+   * ```
+   * @param {string|object} select field located by label|name|CSS|XPath|strict locator.
+   * @param {string|array} option visible text or value of option.
+   * {--end--}
    */
   async selectOption(select, option) {
     const els = await findFields.call(this, select);
@@ -1340,12 +1493,15 @@ I.selectOption('Which OS do you use?', ['Android', 'iOS']);
 
   /**
    * Grab number of visible elements by locator.
-
-```js
-I.grabNumberOfVisibleElements('p');
-```
-
-@param locator located by CSS|XPath|strict locator.
+   * 
+   * ```js
+   * let numOfElements = await I.grabNumberOfVisibleElements('p');
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * @returns {Promise<number>} number of visible elements
+   * {--end--}
+   * {{ react }}
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator);
@@ -1355,12 +1511,13 @@ I.grabNumberOfVisibleElements('p');
 
   /**
    * Checks that current url contains a provided fragment.
-
-```js
-I.seeInCurrentUrl('/register'); // we are on registration page
-```
-
-@param url value to check.
+   * 
+   * ```js
+   * I.seeInCurrentUrl('/register'); // we are on registration page
+   * ```
+   * 
+   * @param {string} url a fragment to check
+   * {--end--}
    */
   async seeInCurrentUrl(url) {
     stringIncludes('url').assert(url, await this._getPageUrl());
@@ -1368,8 +1525,9 @@ I.seeInCurrentUrl('/register'); // we are on registration page
 
   /**
    * Checks that current url does not contain a provided fragment.
-
-@param url value to check.
+   * 
+   * @param {string} url value to check.
+   * {--end--}
    */
   async dontSeeInCurrentUrl(url) {
     stringIncludes('url').negate(url, await this._getPageUrl());
@@ -1377,15 +1535,16 @@ I.seeInCurrentUrl('/register'); // we are on registration page
 
   /**
    * Checks that current url is equal to provided one.
-If a relative url provided, a configured url will be prepended to it.
-So both examples will work:
-
-```js
-I.seeCurrentUrlEquals('/register');
-I.seeCurrentUrlEquals('http://my.site.com/register');
-```
-
-@param url value to check.
+   * If a relative url provided, a configured url will be prepended to it.
+   * So both examples will work:
+   * 
+   * ```js
+   * I.seeCurrentUrlEquals('/register');
+   * I.seeCurrentUrlEquals('http://my.site.com/register');
+   * ```
+   * 
+   * @param {string} url value to check.
+   * {--end--}
    */
   async seeCurrentUrlEquals(url) {
     urlEquals(this.options.url).assert(url, await this._getPageUrl());
@@ -1393,9 +1552,15 @@ I.seeCurrentUrlEquals('http://my.site.com/register');
 
   /**
    * Checks that current url is not equal to provided one.
-If a relative url provided, a configured url will be prepended to it.
-
-@param url value to check.
+   * If a relative url provided, a configured url will be prepended to it.
+   * 
+   * ```js
+   * I.dontSeeCurrentUrlEquals('/login'); // relative url are ok
+   * I.dontSeeCurrentUrlEquals('http://mysite.com/login'); // absolute urls are also ok
+   * ```
+   * 
+   * @param {string} url value to check.
+   * {--end--}
    */
   async dontSeeCurrentUrlEquals(url) {
     urlEquals(this.options.url).negate(url, await this._getPageUrl());
@@ -1403,15 +1568,18 @@ If a relative url provided, a configured url will be prepended to it.
 
   /**
    * Checks that a page contains a visible text.
-Use context parameter to narrow down the search.
-
-```js
-I.see('Welcome'); // text welcome on a page
-I.see('Welcome', '.content'); // text inside .content div
-I.see('Register', {css: 'form.register'}); // use strict locator
-```
-@param text expected on page.
-@param context (optional) element located by CSS|Xpath|strict locator in which to search for text.
+   * Use context parameter to narrow down the search.
+   * 
+   * ```js
+   * I.see('Welcome'); // text welcome on a page
+   * I.see('Welcome', '.content'); // text inside .content div
+   * I.see('Register', {css: 'form.register'}); // use strict locator
+   * ```
+   * @param {string} text expected on page.
+   * @param {string|object} context (optional, `null` by default) element located by CSS|Xpath|strict locator in which to search for text.
+   * {--end--}
+   *
+   * {{ react }}
    */
   async see(text, context = null) {
     return proceedSee.call(this, 'assert', text, context);
@@ -1430,13 +1598,19 @@ I.see('Register', {css: 'form.register'}); // use strict locator
 
   /**
    * Opposite to `see`. Checks that a text is not present on a page.
-Use context parameter to narrow down the search.
-
-```js
-I.dontSee('Login'); // assume we are already logged in
-```
-@param text is not present.
-@param context (optional) element located by CSS|XPath|strict locator in which to perfrom search.
+   * Use context parameter to narrow down the search.
+   * 
+   * ```js
+   * I.dontSee('Login'); // assume we are already logged in.
+   * I.dontSee('Login', '.nav'); // no login inside .nav element
+   * ```
+   * 
+   * @param {string} text which is not present.
+   * @param {string|object} context (optional) element located by CSS|XPath|strict locator in which to perfrom search.
+   *
+   * {--end--}
+   *
+   * {{ react }}
    */
   async dontSee(text, context = null) {
     return proceedSee.call(this, 'negate', text, context);
@@ -1444,11 +1618,14 @@ I.dontSee('Login'); // assume we are already logged in
 
   /**
    * Retrieves page source and returns it to test.
-Resumes test execution, so should be used inside an async function.
-
-```js
-let pageSource = await I.grabSource();
-```
+   * Resumes test execution, so should be used inside an async function.
+   * 
+   * ```js
+   * let pageSource = await I.grabSource();
+   * ```
+   * 
+   * @returns {Promise<string>} source code
+   * {--end--}
    */
   async grabSource() {
     return this.page.content();
@@ -1470,12 +1647,15 @@ let pageSource = await I.grabSource();
 
   /**
    * Get current URL from browser.
-Resumes test execution, so should be used inside an async function.
-
-```js
-let url = await I.grabCurrentUrl();
-console.log(`Current URL is [${url}]`);
-```
+   * Resumes test execution, so should be used inside an async function.
+   * 
+   * ```js
+   * let url = await I.grabCurrentUrl();
+   * console.log(`Current URL is [${url}]`);
+   * ```
+   * 
+   * @returns {Promise<string>} current URL
+   * {--end--}
    */
   async grabCurrentUrl() {
     return this._getPageUrl();
@@ -1483,11 +1663,12 @@ console.log(`Current URL is [${url}]`);
 
   /**
    * Checks that the current page contains the given string in its raw source code.
-
-```js
-I.seeInSource('<h1>Green eggs &amp; ham</h1>');
-```
-@param text value to check.
+   * 
+   * ```js
+   * I.seeInSource('<h1>Green eggs &amp; ham</h1>');
+   * ```
+   * @param {string} text value to check.
+   * {--end--}
    */
   async seeInSource(text) {
     const source = await this.page.content();
@@ -1496,9 +1677,13 @@ I.seeInSource('<h1>Green eggs &amp; ham</h1>');
 
   /**
    * Checks that the current page does not contains the given string in its raw source code.
-
-@param text value to check.
-
+   * 
+   * ```js
+   * I.dontSeeInSource('<!--'); // no comments in source
+   * ```
+   * 
+   * @param {string} value to check.
+   * {--end--}
    */
   async dontSeeInSource(text) {
     const source = await this.page.content();
@@ -1507,28 +1692,38 @@ I.seeInSource('<h1>Green eggs &amp; ham</h1>');
 
 
   /**
-   * asserts that an element appears a given number of times in the DOM
+   * Asserts that an element appears a given number of times in the DOM.
    * Element is located by label or name or CSS or XPath.
-   *
+   * 
+   * 
    * ```js
    * I.seeNumberOfElements('#submitBtn', 1);
    * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} num number of elements.
+   * {--end--}
+   *
+   * {{ 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);
   }
 
   /**
    * Asserts that an element is visible a given number of times.
-Element is located by CSS or XPath.
-
-```js
-I.seeNumberOfVisibleElements('.buttons', 3);
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param num number of elements.
+   * Element is located by CSS or XPath.
+   * 
+   * ```js
+   * I.seeNumberOfVisibleElements('.buttons', 3);
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} num number of elements.
+   * {--end--}
+   *
+   * {{ react }}
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator);
@@ -1537,12 +1732,13 @@ I.seeNumberOfVisibleElements('.buttons', 3);
 
   /**
    * Sets a cookie.
-
-```js
-I.setCookie({name: 'auth', value: true});
-```
-
-@param cookie cookie JSON object.
+   * 
+   * ```js
+   * I.setCookie({name: 'auth', value: true});
+   * ```
+   * 
+   * @param {object} cookie a cookie object.
+   * {--end--}
    */
   async setCookie(cookie) {
     if (Array.isArray(cookie)) {
@@ -1553,12 +1749,13 @@ I.setCookie({name: 'auth', value: true});
 
   /**
    * Checks that cookie with given name exists.
-
-```js
-I.seeCookie('Auth');
-```
-
-@param name cookie name.
+   * 
+   * ```js
+   * I.seeCookie('Auth');
+   * ```
+   * 
+   * @param {string} name cookie name.
+   * {--end--}
    *
    */
   async seeCookie(name) {
@@ -1568,8 +1765,13 @@ I.seeCookie('Auth');
 
   /**
    * Checks that cookie with given name does not exist.
-
-@param name cookie name.
+   * 
+   * ```js
+   * I.dontSeeCookie('auth'); // no auth cookie
+   * ```
+   * 
+   * @param {string} name cookie name.
+   * {--end--}
    */
   async dontSeeCookie(name) {
     const cookies = await this.page.cookies();
@@ -1578,15 +1780,17 @@ I.seeCookie('Auth');
 
   /**
    * Gets a cookie object by name.
-If none provided gets all cookies.
-* Resumes test execution, so **should be used inside async with `await`** operator.
-
-```js
-let cookie = await I.grabCookie('auth');
-assert(cookie.value, '123456');
-```
-
-@param name (optional) cookie name.
+   * If none provided gets all cookies.
+   * * Resumes test execution, so **should be used inside async with `await`** operator.
+   * 
+   * ```js
+   * let cookie = await I.grabCookie('auth');
+   * assert(cookie.value, '123456');
+   * ```
+   * 
+   * @param [name=null] cookie name.
+   * @returns {Promise<string>} attribute value
+   * {--end--}
    *
    * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
    */
@@ -1599,14 +1803,15 @@ assert(cookie.value, '123456');
 
   /**
    * Clears a cookie by name,
-if none provided clears all cookies.
-
-```js
-I.clearCookie();
-I.clearCookie('test');
-```
-
-@param cookie (optional) cookie name.
+   * if none provided clears all cookies.
+   * 
+   * ```js
+   * I.clearCookie();
+   * I.clearCookie('test');
+   * ```
+   * 
+   * @param {string} cookie (optional, `null` by default) cookie name
+   * {--end--}
    */
   async clearCookie(name) {
     const cookies = await this.page.cookies();
@@ -1620,30 +1825,31 @@ I.clearCookie('test');
 
   /**
    * Executes sync script on a page.
-Pass arguments to function as additional parameters.
-Will return execution result to a test.
-In this case you should use async function and await to receive results.
-
-Example with jQuery DatePicker:
-
-```js
-// change date of jQuery DatePicker
-I.executeScript(function() {
-  // now we are inside browser context
-  $('date').datetimepicker('setDate', new Date());
-});
-```
-Can return values. Don't forget to use `await` to get them.
-
-```js
-let date = await I.executeScript(function(el) {
-  // only basic types can be returned
-  return $(el).datetimepicker('getDate').toString();
-}, '#date'); // passing jquery selector
-```
-
-@param fn function to be executed in browser context.
-@param ...args args to be passed to function.
+   * Pass arguments to function as additional parameters.
+   * Will return execution result to a test.
+   * In this case you should use async function and await to receive results.
+   * 
+   * Example with jQuery DatePicker:
+   * 
+   * ```js
+   * // change date of jQuery DatePicker
+   * I.executeScript(function() {
+   *   // now we are inside browser context
+   *   $('date').datetimepicker('setDate', new Date());
+   * });
+   * ```
+   * Can return values. Don't forget to use `await` to get them.
+   * 
+   * ```js
+   * let date = await I.executeScript(function(el) {
+   *   // only basic types can be returned
+   *   return $(el).datetimepicker('getDate').toString();
+   * }, '#date'); // passing jquery selector
+   * ```
+   * 
+   * @param {string|function} fn function to be executed in browser context.
+   * @param ...args args to be passed to function.
+   * {--end--}
    *
    * If a function returns a Promise It will wait for it resolution.
    */
@@ -1657,28 +1863,29 @@ let date = await I.executeScript(function(el) {
 
   /**
    * Executes async script on page.
-Provided function should execute a passed callback (as first argument) to signal it is finished.
-
-Example: In Vue.js to make components completely rendered we are waiting for [nextTick](https://vuejs.org/v2/api/#Vue-nextTick).
-
-```js
-I.executeAsyncScript(function(done) {
-  Vue.nextTick(done); // waiting for next tick
-});
-```
-
-By passing value to `done()` function you can return values.
-Additional arguments can be passed as well, while `done` function is always last parameter in arguments list.
-
-```js
-let val = await I.executeAsyncScript(function(url, done) {
-  // in browser context
-  $.ajax(url, { success: (data) => done(data); }
-}, 'http://ajax.callback.url/');
-```
-
-@param fn function to be executed in browser context.
-@param ...args args to be passed to function.
+   * Provided function should execute a passed callback (as first argument) to signal it is finished.
+   * 
+   * Example: In Vue.js to make components completely rendered we are waiting for [nextTick](https://vuejs.org/v2/api/#Vue-nextTick).
+   * 
+   * ```js
+   * I.executeAsyncScript(function(done) {
+   *   Vue.nextTick(done); // waiting for next tick
+   * });
+   * ```
+   * 
+   * By passing value to `done()` function you can return values.
+   * Additional arguments can be passed as well, while `done` function is always last parameter in arguments list.
+   * 
+   * ```js
+   * let val = await I.executeAsyncScript(function(url, done) {
+   *   // in browser context
+   *   $.ajax(url, { success: (data) => done(data); }
+   * }, 'http://ajax.callback.url/');
+   * ```
+   * 
+   * @param {string|function} fn function to be executed in browser context.
+   * @param ...args args to be passed to function.
+   * {--end--}
    *
    * Asynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
    */
@@ -1700,14 +1907,17 @@ let val = await I.executeAsyncScript(function(url, done) {
 
   /**
    * Retrieves a text from an element located by CSS or XPath and returns it to test.
-Resumes test execution, so **should be used inside async with `await`** operator.
-
-```js
-let pin = await I.grabTextFrom('#pin');
-```
-If multiple elements found returns an array of texts.
-
-@param locator element located by CSS|XPath|strict locator.
+   * Resumes test execution, so **should be used inside async with `await`** operator.
+   * 
+   * ```js
+   * let pin = await I.grabTextFrom('#pin');
+   * ```
+   * If multiple elements found returns an array of texts.
+   * 
+   * @param locator element located by CSS|XPath|strict locator.
+   * @returns {Promise<string>} attribute value
+   * {--end--}
+   * {{ react }}
    */
   async grabTextFrom(locator) {
     const els = await this._locate(locator);
@@ -1722,12 +1932,14 @@ If multiple elements found returns an array of texts.
 
   /**
    * Retrieves a value from a form element located by CSS or XPath and returns it to test.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-
-```js
-let email = await I.grabValueFrom('input[name=email]');
-```
-@param locator field located by label|name|CSS|XPath|strict locator.
+   * Resumes test execution, so **should be used inside async function with `await`** operator.
+   * 
+   * ```js
+   * let email = await I.grabValueFrom('input[name=email]');
+   * ```
+   * @param {string|object} locator field located by label|name|CSS|XPath|strict locator.
+   * @returns {Promise<string>} attribute value
+   * {--end--}
    */
   async grabValueFrom(locator) {
     const els = await findFields.call(this, locator);
@@ -1737,14 +1949,16 @@ let email = await I.grabValueFrom('input[name=email]');
 
   /**
    * Retrieves the innerHTML from an element located by CSS or XPath and returns it to test.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-If more than one element is found - an array of HTMLs returned.
-
-```js
-let postHTML = await I.grabHTMLFrom('#post');
-```
-
-@param locator element located by CSS|XPath|strict locator.
+   * Resumes test execution, so **should be used inside async function with `await`** operator.
+   * If more than one element is found - an array of HTMLs returned.
+   * 
+   * ```js
+   * let postHTML = await I.grabHTMLFrom('#post');
+   * ```
+   * 
+   * @param locator element located by CSS|XPath|strict locator.
+   * @returns {Promise<string>} HTML code for an element
+   * {--end--}
    */
   async grabHTMLFrom(locator) {
     const els = await this._locate(locator);
@@ -1758,14 +1972,17 @@ let postHTML = await I.grabHTMLFrom('#post');
 
   /**
    * Grab CSS property for given locator
-Resumes test execution, so **should be used inside an async function with `await`** operator.
-
-```js
-const value = await I.grabCssPropertyFrom('h3', 'font-weight');
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param cssProperty CSS property name.
+   * Resumes test execution, so **should be used inside an async function with `await`** operator.
+   * 
+   * ```js
+   * const value = await I.grabCssPropertyFrom('h3', 'font-weight');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {string} cssProperty CSS property name.
+   * @returns {Promise<string>} CSS value
+   * {--end--}
+   * {{ react }}
    */
   async grabCssPropertyFrom(locator, cssProperty) {
     const els = await this._locate(locator);
@@ -1780,13 +1997,15 @@ const value = await I.grabCssPropertyFrom('h3', 'font-weight');
 
   /**
    * Checks that all elements with given locator have given CSS properties.
-
-```js
-I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
-```
-
-@param locator located by CSS|XPath|strict locator.
-@param cssProperties object with CSS properties and their values to check.
+   * 
+   * ```js
+   * I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * @param {object} cssProperties object with CSS properties and their values to check.
+   * {--end--}
+   * {{ react }}
    */
   async seeCssPropertiesOnElements(locator, cssProperties) {
     const res = await this._locate(locator);
@@ -1825,13 +2044,15 @@ I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
 
   /**
    * Checks that all elements with given locator have given attributes.
-
-```js
-I.seeAttributesOnElements('//form', {'method': "post"});
-```
-
-@param locator located by CSS|XPath|strict locator.
-@param attributes object with attributes and their values to check.
+   * 
+   * ```js
+   * I.seeAttributesOnElements('//form', { method: "post"});
+   * ```
+   * 
+   * @param {string|object} locator located by CSS|XPath|strict locator.
+   * @param {object} attributes attributes and their values to check.
+   * {--end--}
+   * {{ react }}
    */
   async seeAttributesOnElements(locator, attributes) {
     const res = await this._locate(locator);
@@ -1862,15 +2083,17 @@ I.seeAttributesOnElements('//form', {'method': "post"});
 
   /**
    * Drag the scrubber of a slider to a given position
-For fuzzy locators, fields are matched by label text, the "name" attribute, CSS, and XPath.
-
-```js
-I.dragSlider('#slider', 30);
-I.dragSlider('#slider', -70);
-```
-
-@param locator located by label|name|CSS|XPath|strict locator.
-@param offsetX position to drag.
+   * For fuzzy locators, fields are matched by label text, the "name" attribute, CSS, and XPath.
+   * 
+   * ```js
+   * I.dragSlider('#slider', 30);
+   * I.dragSlider('#slider', -70);
+   * ```
+   * 
+   * @param {string|object} locator located by label|name|CSS|XPath|strict locator.
+   * @param {number} offsetX position to drag.
+   * {--end--}
+   * {{ react }}
    */
   async dragSlider(locator, offsetX = 0) {
     const src = await this._locate(locator);
@@ -1892,14 +2115,17 @@ I.dragSlider('#slider', -70);
 
   /**
    * Retrieves an attribute from an element located by CSS or XPath and returns it to test.
-An array as a result will be returned if there are more than one matched element.
-Resumes test execution, so **should be used inside async with `await`** operator.
-
-```js
-let hint = await I.grabAttributeFrom('#tooltip', 'title');
-```
-@param locator element located by CSS|XPath|strict locator.
-@param attr attribute name.
+   * An array as a result will be returned if there are more than one matched element.
+   * Resumes test execution, so **should be used inside async with `await`** operator.
+   * 
+   * ```js
+   * let hint = await I.grabAttributeFrom('#tooltip', 'title');
+   * ```
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {string} attr attribute name.
+   * @returns {Promise<string>} attribute value
+   * {--end--}
+   * {{ react }}
    */
   async grabAttributeFrom(locator, attr) {
     const els = await this._locate(locator);
@@ -1916,16 +2142,17 @@ let hint = await I.grabAttributeFrom('#tooltip', 'title');
 
   /**
    * Saves a screenshot to ouput folder (set in codecept.json or codecept.conf.js).
-Filename is relative to output folder. 
-Optionally resize the window to the full available page `scrollHeight` and `scrollWidth` to capture the entire page by passing `true` in as the second argument.
-
-```js
-I.saveScreenshot('debug.png');
-I.saveScreenshot('debug.png', true) //resizes to available scrollHeight and scrollWidth before taking screenshot
-```
-
-@param fileName file name to save. 
-@param fullPage (optional) flag to enable fullscreen screenshot mode.
+   * Filename is relative to output folder.
+   * Optionally resize the window to the full available page `scrollHeight` and `scrollWidth` to capture the entire page by passing `true` in as the second argument.
+   * 
+   * ```js
+   * I.saveScreenshot('debug.png');
+   * I.saveScreenshot('debug.png', true) //resizes to available scrollHeight and scrollWidth before taking screenshot
+   * ```
+   * 
+   * @param {string} fileName file name to save.
+   * @param {boolean} fullPage (optional, `false` by default) flag to enable fullscreen screenshot mode.
+   * {--end--}
    */
   async saveScreenshot(fileName, fullPage) {
     const fullPageOption = fullPage || this.options.fullPageScreenshots;
@@ -1945,13 +2172,13 @@ I.saveScreenshot('debug.png', true) //resizes to available scrollHeight and scro
 
   /**
    * Pauses execution for a number of seconds.
-
-```js
-I.wait(2); // wait 2 secs
-```
-
-@param sec number of second to wait.
-@param sec time in seconds to wait.
+   * 
+   * ```js
+   * I.wait(2); // wait 2 secs
+   * ```
+   * 
+   * @param {number} sec number of second to wait.
+   * {--end--}
    */
   async wait(sec) {
     return new Promise(((done) => {
@@ -1961,10 +2188,11 @@ I.wait(2); // wait 2 secs
 
   /**
    * Waits for element to become enabled (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param sec (optional) time in seconds to wait, 1 by default.
+   * {--end--}
    */
   async waitForEnabled(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -1995,14 +2223,15 @@ Element can be located by CSS or XPath.
 
   /**
    * Waits for the specified value to be in value attribute.
-
-```js
-I.waitForValue('//input', "GoodValue");
-```
-
-@param field input field.
-@param value expected value.
-@param sec (optional) time in seconds to wait, 1 sec by default.
+   * 
+   * ```js
+   * I.waitForValue('//input', "GoodValue");
+   * ```
+   * 
+   * @param {string|object} field input field.
+   * @param {string }value expected value.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitForValue(field, value, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2034,14 +2263,16 @@ I.waitForValue('//input', "GoodValue");
 
   /**
    * Waits for a specified number of elements on the page.
-
-```js
-I.waitNumberOfVisibleElements('a', 3);
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param num number of elements.
-@param sec (optional) time in seconds to wait.
+   * 
+   * ```js
+   * I.waitNumberOfVisibleElements('a', 3);
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} num number of elements.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
+   * {{ react }}
    */
   async waitNumberOfVisibleElements(locator, num, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2072,15 +2303,17 @@ I.waitNumberOfVisibleElements('a', 3);
 
   /**
    * Waits for element to be present on page (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```js
-I.waitForElement('.btn.continue');
-I.waitForElement('.btn.continue', 5); // wait for 5 secs
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * ```js
+   * I.waitForElement('.btn.continue');
+   * I.waitForElement('.btn.continue', 5); // wait for 5 secs
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
+   * {{ react }}
    */
   async waitForElement(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2100,14 +2333,17 @@ I.waitForElement('.btn.continue', 5); // wait for 5 secs
 
   /**
    * Waits for an element to become visible on a page (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```
-I.waitForVisible('#popup');
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * ```js
+   * I.waitForVisible('#popup');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
+   *
+   * This method accepts [React selectors](https://codecept.io/react).
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2131,14 +2367,15 @@ I.waitForVisible('#popup');
 
   /**
    * Waits for an element to be removed or become invisible on a page (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```
-I.waitForInvisible('#popup');
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * ```js
+   * I.waitForInvisible('#popup');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitForInvisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2163,14 +2400,15 @@ I.waitForInvisible('#popup');
 
   /**
    * Waits for an element to hide (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```
-I.waitToHide('#popup');
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * ```js
+   * I.waitToHide('#popup');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitToHide(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2200,13 +2438,14 @@ I.waitToHide('#popup');
 
   /**
    * Waiting for the part of the URL to match the expected. Useful for SPA to understand that page was changed.
-
-```js
-I.waitInUrl('/info', 2);
-```
-
-@param urlPart value to check.
-@param sec (optional) time in seconds to wait.
+   * 
+   * ```js
+   * I.waitInUrl('/info', 2);
+   * ```
+   * 
+   * @param {string} urlPart value to check.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitInUrl(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2226,14 +2465,15 @@ I.waitInUrl('/info', 2);
 
   /**
    * Waits for the entire URL to match the expected
-
-```js
-I.waitUrlEquals('/info', 2);
-I.waitUrlEquals('http://127.0.0.1:8000/info');
-```
-
-@param urlPart value to check.
-@param sec (optional) time in seconds to wait.
+   * 
+   * ```js
+   * I.waitUrlEquals('/info', 2);
+   * I.waitUrlEquals('http://127.0.0.1:8000/info');
+   * ```
+   * 
+   * @param {string} urlPart value to check.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitUrlEquals(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2258,17 +2498,18 @@ I.waitUrlEquals('http://127.0.0.1:8000/info');
 
   /**
    * Waits for a text to appear (by default waits for 1sec).
-Element can be located by CSS or XPath.
-Narrow down search results by providing context.
-
-```js
-I.waitForText('Thank you, form has been submitted');
-I.waitForText('Thank you, form has been submitted', 5, '#modal');
-```
-
-@param text to wait for.
-@param sec (optional) time in seconds to wait.
-@param context (optional) element located by CSS|XPath|strict locator.
+   * Element can be located by CSS or XPath.
+   * Narrow down search results by providing context.
+   * 
+   * ```js
+   * I.waitForText('Thank you, form has been submitted');
+   * I.waitForText('Thank you, form has been submitted', 5, '#modal');
+   * ```
+   * 
+   * @param {string }text to wait for.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * @param {string|object} context (optional) element located by CSS|XPath|strict locator.
+   * {--end--}
    */
   async waitForText(text, sec = null, context = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2310,8 +2551,8 @@ I.waitForText('Thank you, form has been submitted', 5, '#modal');
    * 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;
@@ -2326,8 +2567,8 @@ I.waitForText('Thank you, form has been submitted', 5, '#modal');
    * 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;
@@ -2336,8 +2577,14 @@ I.waitForText('Thank you, form has been submitted', 5, '#modal');
 
   /**
    * Switches frame or in case of null locator reverts to parent.
-
-@param locator element located by CSS|XPath|strict locator.
+   * 
+   * ```js
+   * I.switchTo('iframe'); // switch to first iframe
+   * I.switchTo(); // switch back to main page
+   * ```
+   * 
+   * @param {string|object} locator (optional, `null` by default) element located by CSS|XPath|strict locator.
+   * {--end--}
    */
   async switchTo(locator) {
     if (Number.isInteger(locator)) {
@@ -2382,21 +2629,22 @@ I.waitForText('Thank you, form has been submitted', 5, '#modal');
 
   /**
    * Waits for a function to return true (waits for 1 sec by default).
-Running in browser context.
-
-```js
-I.waitForFunction(fn[, [args[, timeout]])
-```
-
-```js
-I.waitForFunction(() => window.requests == 0);
-I.waitForFunction(() => window.requests == 0, 5); // waits for 5 sec
-I.waitForFunction((count) => window.requests == count, [3], 5) // pass args and wait for 5 sec
-```
-
-@param fn to be executed in browser context.
-@param argsOrSec (optional) arguments for function or seconds.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Running in browser context.
+   * 
+   * ```js
+   * I.waitForFunction(fn[, [args[, timeout]])
+   * ```
+   * 
+   * ```js
+   * I.waitForFunction(() => window.requests == 0);
+   * I.waitForFunction(() => window.requests == 0, 5); // waits for 5 sec
+   * I.waitForFunction((count) => window.requests == count, [3], 5) // pass args and wait for 5 sec
+   * ```
+   * 
+   * @param {string|function} fn to be executed in browser context.
+   * @param {array|number} argsOrSec (optional, `1` by default) arguments for function or seconds.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitForFunction(fn, argsOrSec = null, sec = null) {
     let args = [];
@@ -2426,15 +2674,16 @@ I.waitForFunction((count) => window.requests == count, [3], 5) // pass args and
 
   /**
    * Waits for a function to return true (waits for 1sec by default).
-
-```js
-I.waitUntil(() => window.requests == 0);
-I.waitUntil(() => window.requests == 0, 5);
-```
-
-@param fn function which is executed in browser context.
-@param sec (optional) time in seconds to wait, 1 by default.
-@param timeoutMsg (optional) message to show in case of timeout fail.
+   * 
+   * ```js
+   * I.waitUntil(() => window.requests == 0);
+   * I.waitUntil(() => window.requests == 0, 5);
+   * ```
+   * 
+   * @param {function|string} fn function which is executed in browser context.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * @param {string} [timeoutMsg=''] message to show in case of timeout fail.
+   * {--end--}
    */
   async waitUntil(fn, sec = null) {
     console.log('This method will remove in CodeceptJS 1.4; use `waitForFunction` instead!');
@@ -2452,14 +2701,15 @@ I.waitUntil(() => window.requests == 0, 5);
 
   /**
    * Waits for an element to become not attached to the DOM on a page (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```
-I.waitForDetached('#popup');
-```
-
-@param locator element located by CSS|XPath|strict locator.
-@param sec (optional) time in seconds to wait, 1 by default.
+   * Element can be located by CSS or XPath.
+   * 
+   * ```js
+   * I.waitForDetached('#popup');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {number} sec (optional, `1` by default) time in seconds to wait
+   * {--end--}
    */
   async waitForDetached(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2487,6 +2737,32 @@ I.waitForDetached('#popup');
   async _waitForAction() {
     return this.wait(this.options.waitForAction / 1000);
   }
+
+  /**
+   * Grab the data from performance timing using Navigation Timing API.
+   * The returned data will contain following things in ms:
+   * - responseEnd,
+   * - domInteractive,
+   * - domContentLoadedEventEnd,
+   * - loadEventEnd
+   * Resumes test execution, so **should be used inside an async function with `await`** operator.
+   * 
+   * ```js
+   * await I.amOnPage('https://example.com');
+   * let data = await I.grabDataFromPerformanceTiming();
+   * //Returned data
+   * { // all results are in [ms]
+   *   responseEnd: 23,
+   *   domInteractive: 44,
+   *   domContentLoadedEventEnd: 196,
+   *   loadEventEnd: 241
+   * }
+   * ```
+   * {--end--}
+   */
+  async grabDataFromPerformanceTiming() {
+    return perfTiming;
+  }
 }
 
 module.exports = Puppeteer;
@@ -2511,9 +2787,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);
 }
 
@@ -2540,6 +2816,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);
 
@@ -2781,7 +3058,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);