From 26dd0e9b62930594fef5e1424f3c23f102bbc3ef Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Tue, 30 May 2023 17:21:00 +0200
Subject: [PATCH 1/2] feat: highlight the interacting elements

---
 docs/helpers/Appium.md                 |    2 +
 docs/helpers/Nightmare.md              |    2 +
 docs/helpers/Playwright.md             |    6 +
 docs/helpers/Puppeteer.md              | 2040 +-----------------
 docs/helpers/TestCafe.md               |    2 +
 docs/helpers/WebDriver.md              |    5 +
 lib/helper/Playwright.js               |   20 +
 lib/helper/Puppeteer.js                | 2710 ++++++++++++++++++++++++
 lib/helper/scripts/highlightElement.js |    7 +
 9 files changed, 2755 insertions(+), 2039 deletions(-)
 create mode 100644 lib/helper/scripts/highlightElement.js

diff --git a/docs/helpers/Appium.md b/docs/helpers/Appium.md
index a6fd268a4..134cd93f9 100644
--- a/docs/helpers/Appium.md
+++ b/docs/helpers/Appium.md
@@ -841,6 +841,8 @@ Field is located by name, label, CSS or XPath
 
 ```js
 I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
 ```
 
 #### Parameters
diff --git a/docs/helpers/Nightmare.md b/docs/helpers/Nightmare.md
index feacd009e..2c0cd7197 100644
--- a/docs/helpers/Nightmare.md
+++ b/docs/helpers/Nightmare.md
@@ -91,6 +91,8 @@ Field is located by name, label, CSS or XPath
 
 ```js
 I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
 ```
 
 #### Parameters
diff --git a/docs/helpers/Playwright.md b/docs/helpers/Playwright.md
index 45aeec26b..20cc6a474 100644
--- a/docs/helpers/Playwright.md
+++ b/docs/helpers/Playwright.md
@@ -74,6 +74,7 @@ Type: [object][5]
 -   `ignoreLog` **[Array][15]&lt;[string][8]>?** An array with console message types that are not logged to debug log. Default value is `['warning', 'log']`. E.g. you can set `[]` to log all messages. See all possible [values][38].
 -   `ignoreHTTPSErrors` **[boolean][26]?** Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
 -   `bypassCSP` **[boolean][26]?** bypass Content Security Policy or CSP
+-   `highlightElement` **[boolean][26]?** highlight the interacting elements
 
 
 
@@ -378,6 +379,8 @@ Field is located by name, label, CSS or XPath
 
 ```js
 I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
 ```
 
 #### Parameters
@@ -1826,6 +1829,9 @@ I.type('4141555311111111', 100);
 
 // passing in an array
 I.type(['T', 'E', 'X', 'T']);
+
+// passing a secret
+I.type(secret('123456'));
 ```
 
 #### Parameters
diff --git a/docs/helpers/Puppeteer.md b/docs/helpers/Puppeteer.md
index 37628f28d..1dba1f05a 100644
--- a/docs/helpers/Puppeteer.md
+++ b/docs/helpers/Puppeteer.md
@@ -56,2045 +56,7 @@ Type: [object][4]
 -   `manualStart` **[boolean][17]?** do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
 -   `browser` **[string][6]?** can be changed to `firefox` when using [puppeteer-firefox][2].
 -   `chrome` **[object][4]?** pass additional [Puppeteer run options][22].
-
-
-
-#### Example #1: Wait for 0 network connections.
-
-```js
-{
-   helpers: {
-     Puppeteer : {
-       url: "http://localhost",
-       restart: false,
-       waitForNavigation: "networkidle0",
-       waitForAction: 500
-     }
-   }
-}
-```
-
-#### Example #2: Wait for DOMContentLoaded event and 0 network connections
-
-```js
-{
-   helpers: {
-     Puppeteer : {
-       url: "http://localhost",
-       restart: false,
-       waitForNavigation: [ "domcontentloaded", "networkidle0" ],
-       waitForAction: 500
-     }
-   }
-}
-```
-
-#### Example #3: Debug in window mode
-
-```js
-{
-   helpers: {
-     Puppeteer : {
-       url: "http://localhost",
-       show: true
-     }
-   }
-}
-```
-
-#### Example #4: Connect to remote browser by specifying [websocket endpoint][3]
-
-```js
-{
-   helpers: {
-     Puppeteer: {
-       url: "http://localhost",
-       chrome: {
-         browserWSEndpoint: "ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a"
-       }
-     }
-   }
-}
-```
-
-> Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
-
-#### Example #5: Target URL with provided basic authentication
-
-```js
-{
-   helpers: {
-     Puppeteer : {
-       url: 'http://localhost',
-       basicAuth: {username: 'username', password: 'password'},
-       show: true
-     }
-   }
-}
-```
-
-#### Troubleshooting
-
-Error Message:  `No usable sandbox!`
-
-When running Puppeteer on CI try to disable sandbox if you see that message
-
-    helpers: {
-     Puppeteer: {
-        url: 'http://localhost',
-        show: false,
-        chrome: {
-          args: ['--no-sandbox', '--disable-setuid-sandbox']
-        }
-      },
-    }
-
-## Access From Helpers
-
-Receive Puppeteer client from a custom helper by accessing `browser` for the Browser object or `page` for the current Page object:
-
-```js
-const { browser } = this.helpers.Puppeteer;
-await browser.pages(); // List of pages in the browser
-
-const { page } = this.helpers.Puppeteer;
-await page.url(); // Get the url of the current page
-```
-
-## Methods
-
-### Parameters
-
--   `config`  
-
-### _addPopupListener
-
-Add the 'dialog' event listener to a page
-
-#### Parameters
-
--   `page`  
-
-### _getPageUrl
-
-Gets page URL including hash.
-
-### _locate
-
-Get elements by different locator types, including strict locator
-Should be used in custom helpers:
-
-```js
-const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
-```
-
-
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-#### Parameters
-
--   `locator`  
-
-### _locateCheckable
-
-Find a checkbox by providing human readable text:
-NOTE: Assumes the checkable element exists
-
-```js
-this.helpers['Puppeteer']._locateCheckable('I agree with terms and conditions').then // ...
-```
-
-#### Parameters
-
--   `locator`  
--   `providedContext`   
-
-### _locateClickable
-
-Find a clickable element by providing human readable text:
-
-```js
-this.helpers['Puppeteer']._locateClickable('Next page').then // ...
-```
-
-#### Parameters
-
--   `locator`  
-
-### _locateFields
-
-Find field elements by providing human readable text:
-
-```js
-this.helpers['Puppeteer']._locateFields('Your email').then // ...
-```
-
-#### Parameters
-
--   `locator`  
-
-### _setPage
-
-Set current page
-
-#### Parameters
-
--   `page` **[object][4]** page to set
-
-### acceptPopup
-
-Accepts the active JavaScript native popup window, as created by window.alert|window.confirm|window.prompt.
-Don't confuse popups with modal windows, as created by [various
-libraries][5].
-
-### amAcceptingPopups
-
-Set the automatic popup response to Accept.
-This must be set before a popup is triggered.
-
-```js
-I.amAcceptingPopups();
-I.click('#triggerPopup');
-I.acceptPopup();
-```
-
-### amCancellingPopups
-
-Set the automatic popup response to Cancel/Dismiss.
-This must be set before a popup is triggered.
-
-```js
-I.amCancellingPopups();
-I.click('#triggerPopup');
-I.cancelPopup();
-```
-
-### amOnPage
-
-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
-```
-
-#### Parameters
-
--   `url` **[string][6]** url path or global url.
-
-Returns **void** automatically synchronized promise with recorder #!
-
-### appendField
-
-Appends text to a input field or textarea.
-Field is located by name, label, CSS or XPath
-
-```js
-I.appendField('#myTextField', 'appended');
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator
--   `value` **[string][6]** text value to append.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### attachFile
-
-Attaches a file to element located by label, name, CSS or XPath
-Path to file is relative current codecept directory (where codecept.conf.ts 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');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
--   `pathToFile` **[string][6]** local file path relative to codecept.conf.ts or codecept.conf.js config file.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder> ⚠ There is an [issue with file upload in Puppeteer 2.1.0 & 2.1.1][7], downgrade to 2.0.0 if you face it.
-
-### cancelPopup
-
-Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.
-
-### checkOption
-
-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');
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** checkbox located by label | name | CSS | XPath | strict locator.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS | XPath | strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### clearCookie
-
-Clears a cookie by name,
-if none provided clears all cookies.
-
-```js
-I.clearCookie();
-I.clearCookie('test');
-```
-
-#### Parameters
-
--   `name`  
--   `cookie` **[string][6]?** (optional, `null` by default) cookie name
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### clearField
-
-Clears a `<textarea>` or text `<input>` element's value.
-
-```js
-I.clearField('Email');
-I.clearField('user[email]');
-I.clearField('#email');
-```
-
-#### Parameters
-
--   `field`  
--   `editable` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder.
-
-### click
-
-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'});
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
--   `context` **([string][6]? | [object][4] | null)** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### clickLink
-
-Performs a click on a link and waits for navigation before moving on.
-
-```js
-I.clickLink('Logout', '#nav');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### closeCurrentTab
-
-Close current tab and switches to previous.
-
-```js
-I.closeCurrentTab();
-```
-
-### closeOtherTabs
-
-Close all tabs except for the current one.
-
-```js
-I.closeOtherTabs();
-```
-
-### dontSee
-
-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.
-I.dontSee('Login', '.nav'); // no login inside .nav element
-```
-
-#### Parameters
-
--   `text` **[string][6]** which is not present.
--   `context` **([string][6] | [object][4])?** (optional) element located by CSS|XPath|strict locator in which to perfrom search.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### dontSeeCheckboxIsChecked
-
-Verifies that the specified checkbox is not checked.
-
-```js
-I.dontSeeCheckboxIsChecked('#agree'); // located by ID
-I.dontSeeCheckboxIsChecked('I agree to terms'); // located by label
-I.dontSeeCheckboxIsChecked('agree'); // located by name
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeCookie
-
-Checks that cookie with given name does not exist.
-
-```js
-I.dontSeeCookie('auth'); // no auth cookie
-```
-
-#### Parameters
-
--   `name` **[string][6]** cookie name.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeCurrentUrlEquals
-
-Checks that current url is not equal to provided one.
-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
-```
-
-#### Parameters
-
--   `url` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeElement
-
-Opposite to `seeElement`. Checks that element is not visible (or in DOM)
-
-```js
-I.dontSeeElement('.modal'); // modal is not shown
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|Strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### dontSeeElementInDOM
-
-Opposite to `seeElementInDOM`. Checks that element is not on page.
-
-```js
-I.dontSeeElementInDOM('.nav'); // checks that element is not on page visible or not
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|Strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeInCurrentUrl
-
-Checks that current url does not contain a provided fragment.
-
-#### Parameters
-
--   `url` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeInField
-
-Checks that value of input field or textarea doesn't equal to given value
-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
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
--   `value` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeInSource
-
-Checks that the current page does not contains the given string in its raw source code.
-
-```js
-I.dontSeeInSource('<!--'); // no comments in source
-```
-
-#### Parameters
-
--   `text`  
--   `value` **[string][6]** to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dontSeeInTitle
-
-Checks that title does not contain text.
-
-```js
-I.dontSeeInTitle('Error');
-```
-
-#### Parameters
-
--   `text` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### doubleClick
-
-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');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### downloadFile
-
-This method is **deprecated**.
-
-Please use `handleDownloads()` instead.
-
-#### Parameters
-
--   `locator`  
--   `customName`  
-
-### dragAndDrop
-
-Drag an item to a destination element.
-
-```js
-I.dragAndDrop('#dragHandle', '#container');
-```
-
-#### Parameters
-
--   `srcElement` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
--   `destElement` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### dragSlider
-
-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);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
--   `offsetX` **[number][8]** position to drag.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### executeAsyncScript
-
-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][9].
-
-```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/');
-```
-
-#### Parameters
-
--   `args` **...any** to be passed to function.
-    ⚠️ returns a _promise_ which is synchronized internally by recorderAsynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
--   `fn` **([string][6] | [function][10])** function to be executed in browser context.
-
-### executeScript
-
-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
-```
-
-#### Parameters
-
--   `args` **...any** to be passed to function.
-    ⚠️ returns a _promise_ which is synchronized internally by recorderIf a function returns a Promise It will wait for it resolution.
--   `fn` **([string][6] | [function][10])** function to be executed in browser context.
-
-### fillField
-
-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');
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
--   `value` **([string][6] | [object][4])** text value to fill.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### forceClick
-
-Perform an emulated click on a link or a button, given by a locator.
-Unlike normal click instead of sending native event, emulates a click with JavaScript.
-This works on hidden, animated or inactive elements as well.
-
-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.forceClick('Logout');
-// button of form
-I.forceClick('Submit');
-// CSS button
-I.forceClick('#form input[type=submit]');
-// XPath
-I.forceClick('//form/*[@type=submit]');
-// link in context
-I.forceClick('Logout', '#nav');
-// using strict locator
-I.forceClick({css: 'nav a.login'});
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### grabAttributeFrom
-
-Retrieves an attribute 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.
-If more than one element is found - attribute of first element is returned.
-
-```js
-let hint = await I.grabAttributeFrom('#tooltip', 'title');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `attr` **[string][6]** attribute name.
-
-Returns **[Promise][11]&lt;[string][6]>** attribute value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabAttributeFromAll
-
-Retrieves an array of attributes from elements located by CSS or XPath and returns it to test.
-Resumes test execution, so **should be used inside async with `await`** operator.
-
-```js
-let hints = await I.grabAttributeFromAll('.tooltip', 'title');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `attr` **[string][6]** attribute name.
-
-Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabBrowserLogs
-
-Get JS log from browser.
-
-```js
-let logs = await I.grabBrowserLogs();
-console.log(JSON.stringify(logs))
-```
-
-Returns **[Promise][11]&lt;[Array][12]&lt;any>>** 
-
-### grabCookie
-
-Gets a cookie object by name.
-If none provided gets all cookies.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-
-```js
-let cookie = await I.grabCookie('auth');
-assert(cookie.value, '123456');
-```
-
-#### Parameters
-
--   `name` **[string][6]?** cookie name. 
-
-Returns **([Promise][11]&lt;[string][6]> | [Promise][11]&lt;[Array][12]&lt;[string][6]>>)** attribute valueReturns cookie in JSON format. If name not passed returns all cookies for this domain.
-
-### grabCssPropertyFrom
-
-Grab CSS property for given locator
-Resumes test execution, so **should be used inside an async function with `await`** operator.
-If more than one element is found - value of first element is returned.
-
-```js
-const value = await I.grabCssPropertyFrom('h3', 'font-weight');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `cssProperty` **[string][6]** CSS property name.
-
-Returns **[Promise][11]&lt;[string][6]>** CSS value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabCssPropertyFromAll
-
-Grab array of CSS properties for given locator
-Resumes test execution, so **should be used inside an async function with `await`** operator.
-
-```js
-const values = await I.grabCssPropertyFromAll('h3', 'font-weight');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `cssProperty` **[string][6]** CSS property name.
-
-Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** CSS value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabCurrentUrl
-
-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}]`);
-```
-
-Returns **[Promise][11]&lt;[string][6]>** current URL
-
-### grabDataFromPerformanceTiming
-
-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
-}
-```
-
-Returns **[Promise][11]&lt;any>** automatically synchronized promise through #recorder
-
-### grabElementBoundingRect
-
-Grab the width, height, location of given locator.
-Provide `width` or `height`as second param to get your desired prop.
-Resumes test execution, so **should be used inside an async function with `await`** operator.
-
-Returns an object with `x`, `y`, `width`, `height` keys.
-
-```js
-const value = await I.grabElementBoundingRect('h3');
-// value is like { x: 226.5, y: 89, width: 527, height: 220 }
-```
-
-To get only one metric use second parameter:
-
-```js
-const width = await I.grabElementBoundingRect('h3', 'width');
-// width == 527
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `prop`  
--   `elementSize` **[string][6]?** x, y, width or height of the given element.
-
-Returns **([Promise][11]&lt;DOMRect> | [Promise][11]&lt;[number][8]>)** Element bounding rectangle
-
-### grabHTMLFrom
-
-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 - HTML of first element is returned.
-
-```js
-let postHTML = await I.grabHTMLFrom('#post');
-```
-
-#### Parameters
-
--   `locator`  
--   `element` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[string][6]>** HTML code for an element
-
-### grabHTMLFromAll
-
-Retrieves all the innerHTML from elements 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 postHTMLs = await I.grabHTMLFromAll('.post');
-```
-
-#### Parameters
-
--   `locator`  
--   `element` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** HTML code for an element
-
-### grabNumberOfOpenTabs
-
-Grab number of open tabs.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-
-```js
-let tabs = await I.grabNumberOfOpenTabs();
-```
-
-Returns **[Promise][11]&lt;[number][8]>** number of open tabs
-
-### grabNumberOfVisibleElements
-
-Grab number of visible elements by locator.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-
-```js
-let numOfElements = await I.grabNumberOfVisibleElements('p');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[number][8]>** number of visible elements
-
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabPageScrollPosition
-
-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();
-```
-
-Returns **[Promise][11]&lt;PageScrollPosition>** scroll position
-
-### grabPopupText
-
-Grab the text within the popup. If no popup is visible then it will return null
-
-```js
-await I.grabPopupText();
-```
-
-Returns **[Promise][11]&lt;([string][6] | null)>** 
-
-### grabSource
-
-Retrieves page source and returns it to test.
-Resumes test execution, so **should be used inside async function with `await`** operator.
-
-```js
-let pageSource = await I.grabSource();
-```
-
-Returns **[Promise][11]&lt;[string][6]>** source code
-
-### grabTextFrom
-
-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 first element.
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[string][6]>** attribute value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabTextFromAll
-
-Retrieves all texts 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 pins = await I.grabTextFromAll('#pin li');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### grabTitle
-
-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();
-```
-
-Returns **[Promise][11]&lt;[string][6]>** title
-
-### grabValueFrom
-
-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.
-If more than one element is found - value of first element is returned.
-
-```js
-let email = await I.grabValueFrom('input[name=email]');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[string][6]>** attribute value
-
-### grabValueFromAll
-
-Retrieves an array of value from a form 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 inputs = await I.grabValueFromAll('//form/input');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
-
-Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
-
-### handleDownloads
-
-Sets a directory to where save files. Allows to test file downloads.
-Should be used with [FileSystem helper][13] 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');
-```
-
-#### Parameters
-
--   `downloadPath` **[string][6]** change this parameter to set another directory for saving 
-
-### haveRequestHeaders
-
-Set headers for all next requests
-
-```js
-I.haveRequestHeaders({
-   'X-Sent-By': 'CodeceptJS',
-});
-```
-
-#### Parameters
-
--   `customHeaders` **[object][4]** headers to set
-
-### moveCursorTo
-
-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);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
--   `offsetX` **[number][8]** (optional, `0` by default) X-axis offset. 
--   `offsetY` **[number][8]** (optional, `0` by default) Y-axis offset.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### openNewTab
-
-Open new tab and switch to it
-
-```js
-I.openNewTab();
-```
-
-### pressKey
-
-Presses a key in the browser (on a focused element).
-
-_Hint:_ For populating text field or textarea, it is recommended to use [`fillField`][14].
-
-```js
-I.pressKey('Backspace');
-```
-
-To press a key in combination with modifier keys, pass the sequence as an array. All modifier keys (`'Alt'`, `'Control'`, `'Meta'`, `'Shift'`) will be released afterwards.
-
-```js
-I.pressKey(['Control', 'Z']);
-```
-
-For specifying operation modifier key based on operating system it is suggested to use `'CommandOrControl'`.
-This will press `'Command'` (also known as `'Meta'`) on macOS machines and `'Control'` on non-macOS machines.
-
-```js
-I.pressKey(['CommandOrControl', 'Z']);
-```
-
-Some of the supported key names are:
-
--   `'AltLeft'` or `'Alt'`
--   `'AltRight'`
--   `'ArrowDown'`
--   `'ArrowLeft'`
--   `'ArrowRight'`
--   `'ArrowUp'`
--   `'Backspace'`
--   `'Clear'`
--   `'ControlLeft'` or `'Control'`
--   `'ControlRight'`
--   `'Command'`
--   `'CommandOrControl'`
--   `'Delete'`
--   `'End'`
--   `'Enter'`
--   `'Escape'`
--   `'F1'` to `'F12'`
--   `'Home'`
--   `'Insert'`
--   `'MetaLeft'` or `'Meta'`
--   `'MetaRight'`
--   `'Numpad0'` to `'Numpad9'`
--   `'NumpadAdd'`
--   `'NumpadDecimal'`
--   `'NumpadDivide'`
--   `'NumpadMultiply'`
--   `'NumpadSubtract'`
--   `'PageDown'`
--   `'PageUp'`
--   `'Pause'`
--   `'Return'`
--   `'ShiftLeft'` or `'Shift'`
--   `'ShiftRight'`
--   `'Space'`
--   `'Tab'`
-
-#### Parameters
-
--   `key` **([string][6] | [Array][12]&lt;[string][6]>)** key or array of keys to press.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder_Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/puppeteer#1313][15]).
-
-### pressKeyDown
-
-Presses a key in the browser and leaves it in a down state.
-
-To make combinations with modifier key and user operation (e.g. `'Control'` + [`click`][16]).
-
-```js
-I.pressKeyDown('Control');
-I.click('#element');
-I.pressKeyUp('Control');
-```
-
-#### Parameters
-
--   `key` **[string][6]** name of key to press down.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### pressKeyUp
-
-Releases a key in the browser which was previously set to a down state.
-
-To make combinations with modifier key and user operation (e.g. `'Control'` + [`click`][16]).
-
-```js
-I.pressKeyDown('Control');
-I.click('#element');
-I.pressKeyUp('Control');
-```
-
-#### Parameters
-
--   `key` **[string][6]** name of key to release.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### refreshPage
-
-Reload the current page.
-
-```js
-I.refreshPage();
-```
-
-⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### resizeWindow
-
-Resize the current window to provided width and height.
-First parameter can be set to `maximize`.
-
-#### Parameters
-
--   `width` **[number][8]** width in pixels or `maximize`.
--   `height` **[number][8]** height in pixels.
-    ⚠️ returns a _promise_ which is synchronized internally by recorderUnlike 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.
-    It also can't maximize a window.
-
-### rightClick
-
-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');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** clickable element located by CSS|XPath|strict locator.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### saveElementScreenshot
-
-Saves screenshot of the specified locator to ouput folder (set in codecept.conf.ts or codecept.conf.js).
-Filename is relative to output folder.
-
-```js
-I.saveElementScreenshot(`#submit`,'debug.png');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `fileName` **[string][6]** file name to save.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### saveScreenshot
-
-Saves a screenshot to ouput folder (set in codecept.conf.ts 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
-```
-
-#### Parameters
-
--   `fileName` **[string][6]** file name to save.
--   `fullPage` **[boolean][17]** (optional, `false` by default) flag to enable fullscreen screenshot mode.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### scrollPageToBottom
-
-Scroll page to the bottom.
-
-```js
-I.scrollPageToBottom();
-```
-
-⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### scrollPageToTop
-
-Scroll page to the top.
-
-```js
-I.scrollPageToTop();
-```
-
-⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### scrollTo
-
-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);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
--   `offsetX` **[number][8]** (optional, `0` by default) X-axis offset. 
--   `offsetY` **[number][8]** (optional, `0` by default) Y-axis offset.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### see
-
-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
-```
-
-#### Parameters
-
--   `text` **[string][6]** expected on page.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|Xpath|strict locator in which to search for text.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### seeAttributesOnElements
-
-Checks that all elements with given locator have given attributes.
-
-```js
-I.seeAttributesOnElements('//form', { method: "post"});
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
--   `attributes` **[object][4]** attributes and their values to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### seeCheckboxIsChecked
-
-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]'});
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeCookie
-
-Checks that cookie with given name exists.
-
-```js
-I.seeCookie('Auth');
-```
-
-#### Parameters
-
--   `name` **[string][6]** cookie name.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeCssPropertiesOnElements
-
-Checks that all elements with given locator have given CSS properties.
-
-```js
-I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
--   `cssProperties` **[object][4]** object with CSS properties and their values to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### seeCurrentUrlEquals
-
-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');
-```
-
-#### Parameters
-
--   `url` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeElement
-
-Checks that a given Element is visible
-Element is located by CSS or XPath.
-
-```js
-I.seeElement('#modal');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### seeElementInDOM
-
-Checks that a given Element is present in the DOM
-Element is located by CSS or XPath.
-
-```js
-I.seeElementInDOM('#modal');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeInCurrentUrl
-
-Checks that current url contains a provided fragment.
-
-```js
-I.seeInCurrentUrl('/register'); // we are on registration page
-```
-
-#### Parameters
-
--   `url` **[string][6]** a fragment to check
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeInField
-
-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');
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
--   `value` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeInPopup
-
-Checks that the active JavaScript popup, as created by `window.alert|window.confirm|window.prompt`, contains the
-given string.
-
-```js
-I.seeInPopup('Popup text');
-```
-
-#### Parameters
-
--   `text` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeInSource
-
-Checks that the current page contains the given string in its raw source code.
-
-```js
-I.seeInSource('<h1>Green eggs &amp; ham</h1>');
-```
-
-#### Parameters
-
--   `text` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeInTitle
-
-Checks that title contains text.
-
-```js
-I.seeInTitle('Home Page');
-```
-
-#### Parameters
-
--   `text` **[string][6]** text value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### seeNumberOfElements
-
-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);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `num` **[number][8]** number of elements.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### seeNumberOfVisibleElements
-
-Asserts that an element is visible a given number of times.
-Element is located by CSS or XPath.
-
-```js
-I.seeNumberOfVisibleElements('.buttons', 3);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `num` **[number][8]** number of elements.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### seeTextEquals
-
-Checks that text is equal to provided one.
-
-```js
-I.seeTextEquals('text', 'h1');
-```
-
-#### Parameters
-
--   `text` **[string][6]** element value to check.
--   `context` **([string][6] | [object][4])?** element located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### seeTitleEquals
-
-Checks that title is equal to provided one.
-
-```js
-I.seeTitleEquals('Test title.');
-```
-
-#### Parameters
-
--   `text` **[string][6]** value to check.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### selectOption
-
-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']);
-```
-
-#### Parameters
-
--   `select` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
--   `option` **([string][6] | [Array][12]&lt;any>)** visible text or value of option.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### setCookie
-
-Sets cookie(s).
-
-Can be a single cookie object or an array of cookies:
-
-```js
-I.setCookie({name: 'auth', value: true});
-
-// as array
-I.setCookie([
-  {name: 'auth', value: true},
-  {name: 'agree', value: true}
-]);
-```
-
-#### Parameters
-
--   `cookie` **(Cookie | [Array][12]&lt;Cookie>)** a cookie object or array of cookie objects.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### switchTo
-
-Switches frame or in case of null locator reverts to parent.
-
-```js
-I.switchTo('iframe'); // switch to first iframe
-I.switchTo(); // switch back to main page
-```
-
-#### Parameters
-
--   `locator` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### switchToNextTab
-
-Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
-
-```js
-I.switchToNextTab();
-I.switchToNextTab(2);
-```
-
-#### Parameters
-
--   `num` **[number][8]**  
-
-### switchToPreviousTab
-
-Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
-
-```js
-I.switchToPreviousTab();
-I.switchToPreviousTab(2);
-```
-
-#### Parameters
-
--   `num` **[number][8]**  
-
-### type
-
-Types out the given text into an active field.
-To slow down typing use a second parameter, to set interval between key presses.
-_Note:_ Should be used when [`fillField`][14] is not an option.
-
-```js
-// passing in a string
-I.type('Type this out.');
-
-// typing values with a 100ms interval
-I.type('4141555311111111', 100);
-
-// passing in an array
-I.type(['T', 'E', 'X', 'T']);
-```
-
-#### Parameters
-
--   `keys`  
--   `delay` **[number][8]?** (optional) delay in ms between key presses
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
--   `key` **([string][6] | [Array][12]&lt;[string][6]>)** or array of keys to type.
-
-### uncheckOption
-
-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');
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** checkbox located by label | name | CSS | XPath | strict locator.
--   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS | XPath | strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### usePuppeteerTo
-
-Use Puppeteer API inside a test.
-
-First argument is a description of an action.
-Second argument is async function that gets this helper as parameter.
-
-{ [`page`][18], [`browser`][19] } from Puppeteer API are available.
-
-```js
-I.usePuppeteerTo('emulate offline mode', async ({ page }) {
-  await page.setOfflineMode(true);
-});
-```
-
-#### Parameters
-
--   `description` **[string][6]** used to show in logs.
--   `fn` **[function][10]** async function that is executed with Puppeteer as argument
-
-### wait
-
-Pauses execution for a number of seconds.
-
-```js
-I.wait(2); // wait 2 secs
-```
-
-#### Parameters
-
--   `sec` **[number][8]** number of second to wait.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### waitForClickable
-
-Waits for element to be clickable (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```js
-I.waitForClickable('.btn.continue');
-I.waitForClickable('.btn.continue', 5); // wait for 5 secs
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `waitTimeout`  
--   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-### waitForDetached
-
-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.
-
-```js
-I.waitForDetached('#popup');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForElement
-
-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
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
-
-
-### waitForEnabled
-
-Waits for element to become enabled (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]** (optional) time in seconds to wait, 1 by default.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForFunction
-
-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
-```
-
-#### Parameters
-
--   `fn` **([string][6] | [function][10])** to be executed in browser context.
--   `argsOrSec` **([Array][12]&lt;any> | [number][8])?** (optional, `1` by default) arguments for function or seconds. 
--   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForInvisible
-
-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.
-
-```js
-I.waitForInvisible('#popup');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForNavigation
-
-Waits for navigation to finish. By default takes configured `waitForNavigation` option.
-
-See [Pupeteer's reference][20]
-
-#### Parameters
-
--   `opts` **any**  
-
-### waitForRequest
-
-Waits for a network request.
-
-```js
-I.waitForRequest('http://example.com/resource');
-I.waitForRequest(request => request.url() === 'http://example.com' && request.method() === 'GET');
-```
-
-#### Parameters
-
--   `urlOrPredicate` **([string][6] | [function][10])** 
--   `sec` **[number][8]?** seconds to wait 
-
-### waitForResponse
-
-Waits for a network response.
-
-```js
-I.waitForResponse('http://example.com/resource');
-I.waitForResponse(response => response.url() === 'http://example.com' && response.request().method() === 'GET');
-```
-
-#### Parameters
-
--   `urlOrPredicate` **([string][6] | [function][10])** 
--   `sec` **[number][8]?** number of seconds to wait 
-
-### waitForText
-
-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');
-```
-
-#### Parameters
-
--   `text` **[string][6]** to wait for.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait 
--   `context` **([string][6] | [object][4])?** (optional) element located by CSS|XPath|strict locator.
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForValue
-
-Waits for the specified value to be in value attribute.
-
-```js
-I.waitForValue('//input', "GoodValue");
-```
-
-#### Parameters
-
--   `field` **([string][6] | [object][4])** input field.
--   `value` **[string][6]** expected value.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitForVisible
-
-Waits for an element to become visible on a page (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```js
-I.waitForVisible('#popup');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorderThis method accepts [React selectors][21]. 
-
-### waitInUrl
-
-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);
-```
-
-#### Parameters
-
--   `urlPart` **[string][6]** value to check.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitNumberOfVisibleElements
-
-Waits for a specified number of elements on the page.
-
-```js
-I.waitNumberOfVisibleElements('a', 3);
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `num` **[number][8]** number of elements.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder
-
-
-This action supports [React locators](https://codecept.io/react#locators)
- 
-
-### waitToHide
-
-Waits for an element to hide (by default waits for 1sec).
-Element can be located by CSS or XPath.
-
-```js
-I.waitToHide('#popup');
-```
-
-#### Parameters
-
--   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
-
-### waitUrlEquals
-
-Waits for the entire URL to match the expected
-
-```js
-I.waitUrlEquals('/info', 2);
-I.waitUrlEquals('http://127.0.0.1:8000/info');
-```
-
-#### Parameters
-
--   `urlPart` **[string][6]** value to check.
--   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
-    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+-   `highlightElement` **[boolean][17]?** highlight the interacting elements
 
 [1]: https://github.com/GoogleChrome/puppeteer
 
diff --git a/docs/helpers/TestCafe.md b/docs/helpers/TestCafe.md
index 34075cf45..1c90ea632 100644
--- a/docs/helpers/TestCafe.md
+++ b/docs/helpers/TestCafe.md
@@ -116,6 +116,8 @@ Field is located by name, label, CSS or XPath
 
 ```js
 I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
 ```
 
 #### Parameters
diff --git a/docs/helpers/WebDriver.md b/docs/helpers/WebDriver.md
index 9db5a18ae..127cefb6c 100644
--- a/docs/helpers/WebDriver.md
+++ b/docs/helpers/WebDriver.md
@@ -464,6 +464,8 @@ Field is located by name, label, CSS or XPath
 
 ```js
 I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
 ```
 
 #### Parameters
@@ -1985,6 +1987,9 @@ I.type('4141555311111111', 100);
 
 // passing in an array
 I.type(['T', 'E', 'X', 'T']);
+
+// passing a secret
+I.type(secret('123456'));
 ```
 
 #### Parameters
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 854742388..7f8061237 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -43,6 +43,7 @@ const {
   setRestartStrategy, restartsSession, restartsContext, restartsBrowser,
 } = require('./extras/PlaywrightRestartOpts');
 const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
+const { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
 
 const pathSeparator = path.sep;
 
@@ -89,6 +90,7 @@ const pathSeparator = path.sep;
  * @prop {string[]} [ignoreLog] - An array with console message types that are not logged to debug log. Default value is `['warning', 'log']`. E.g. you can set `[]` to log all messages. See all possible [values](https://playwright.dev/docs/api/class-consolemessage#console-message-type).
  * @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
  * @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
+ * @prop {boolean} [highlightElement] - highlight the interacting elements
  */
 const config = {};
 
@@ -1464,7 +1466,16 @@ class Playwright extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
+
+    if (this.options.highlightElement) {
+      highlightElement(el, this.page);
+    }
+
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
+    if (this.options.highlightElement) {
+      unhighlightElement(el, this.page);
+    }
     return this._waitForAction();
   }
 
@@ -2589,6 +2600,11 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
+
+  const element = els[0];
+  if (this.options.highlightElement) {
+    highlightElement(element, this.page);
+  }
   /*
     using the force true options itself but instead dispatching a click
   */
@@ -2603,6 +2619,10 @@ async function proceedClick(locator, context = null, options = {}) {
     promises.push(this.waitForNavigation());
   }
   promises.push(this._waitForAction());
+
+  if (this.options.highlightElement) {
+    unhighlightElement(element, this.page);
+  }
   return Promise.all(promises);
 }
 
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index be58d7927..2313b354a 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -33,6 +33,7 @@ const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnection
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
 const findReact = require('./extras/React');
+const { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
 
 let puppeteer;
 let perfTiming;
@@ -65,6 +66,7 @@ const consoleLogStore = new Console();
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
  * @prop {string} [browser=chrome] - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
  * @prop {object} [chrome] - pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
+ * @prop {boolean} [highlightElement] - highlight the interacting elements
 */
 const config = {};
 
@@ -1287,7 +1289,2705 @@ class Puppeteer extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
+    const axios = require('axios');
+    const fs = require('fs');
+    const fsExtra = require('fs-extra');
+    const path = require('path');
+
+    const Helper = require('@codeceptjs/helper');
+    const Locator = require('../locator');
+    const recorder = require('../recorder');
+    const stringIncludes = require('../assert/include').includes;
+    const { urlEquals } = require('../assert/equal');
+    const { equals } = require('../assert/equal');
+    const { empty } = require('../assert/empty');
+    const { truth } = require('../assert/truth');
+    const isElementClickable = require('./scripts/isElementClickable');
+    const {
+      xpathLocator,
+      ucfirst,
+      fileExists,
+      chunkArray,
+      toCamelCase,
+      convertCssPropertiesToCamelCase,
+      screenshotOutputFolder,
+      getNormalizedKeyAttributeValue,
+      isModifierKey,
+      requireWithFallback,
+    } = require('../utils');
+    const {
+      isColorProperty,
+      convertColorToRGBA,
+    } = require('../colorUtils');
+    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 { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
+
+    let puppeteer;
+    let perfTiming;
+    const popupStore = new Popup();
+    const consoleLogStore = new Console();
+
+    /**
+     * ## Configuration
+     *
+     * This helper should be configured in codecept.conf.js
+     *
+     * @typedef PuppeteerConfig
+     * @type {object}
+     * @prop {string} url - base url of website to be tested
+     * @prop {object} [basicAuth] (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
+     * @prop {boolean} [show] - show Google Chrome window for debug.
+     * @prop {boolean} [restart=true] - restart browser between tests.
+     * @prop {boolean} [disableScreenshots=false]  - don't save screenshot on failure.
+     * @prop {boolean} [fullPageScreenshots=false] - make full page screenshots on failure.
+     * @prop {boolean} [uniqueScreenshotNames=false]  - option to prevent screenshot override if you have scenarios with the same name in different suites.
+     * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to false.
+     * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to false.
+     * @prop {number} [waitForAction=100] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
+     * @prop {string} [waitForNavigation=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.
+     * @prop {number} [pressKeyDelay=10] - delay between key presses in ms. Used when calling Puppeteers page.type(...) in fillField/appendField
+     * @prop {number} [getPageTimeout=30000] - config option to set maximum navigation time in milliseconds. If the timeout is set to 0, then timeout will be disabled.
+     * @prop {number} [waitForTimeout=1000] - default wait* timeout in ms.
+     * @prop {string} [windowSize] - default window size. Set a dimension in format WIDTHxHEIGHT like `640x480`.
+     * @prop {string} [userAgent] - user-agent string.
+     * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
+     * @prop {string} [browser=chrome] - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
+     * @prop {object} [chrome] - pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
+     * @prop {boolean} [highlightElement] - highlight the interacting elements
+     */
+    const config = {};
+
+    /**
+     * Uses [Google Chrome's Puppeteer](https://github.com/GoogleChrome/puppeteer) library to run tests inside headless Chrome.
+     * Browser control is executed via DevTools Protocol (instead of Selenium).
+     * This helper works with a browser out of the box with no additional tools required to install.
+     *
+     * Requires `puppeteer` or `puppeteer-core` package to be installed.
+     * ```
+     * npm i puppeteer --save
+     * ```
+     * or
+     * ```
+     * npm i puppeteer-core --save
+     * ```
+     * Using `puppeteer-core` package, will prevent the download of browser binaries and allow connecting to an existing browser installation or for connecting to a remote one.
+     *
+     * > Experimental Firefox support [can be activated](https://codecept.io/helpers/Puppeteer-firefox).
+     *
+     * <!-- configuration -->
+     *
+     * #### Example #1: Wait for 0 network connections.
+     *
+     * ```js
+     * {
+     *    helpers: {
+     *      Puppeteer : {
+     *        url: "http://localhost",
+     *        restart: false,
+     *        waitForNavigation: "networkidle0",
+     *        waitForAction: 500
+     *      }
+     *    }
+     * }
+     * ```
+     *
+     * #### Example #2: Wait for DOMContentLoaded event and 0 network connections
+     *
+     * ```js
+     * {
+     *    helpers: {
+     *      Puppeteer : {
+     *        url: "http://localhost",
+     *        restart: false,
+     *        waitForNavigation: [ "domcontentloaded", "networkidle0" ],
+     *        waitForAction: 500
+     *      }
+     *    }
+     * }
+     * ```
+     *
+     * #### Example #3: Debug in window mode
+     *
+     * ```js
+     * {
+     *    helpers: {
+     *      Puppeteer : {
+     *        url: "http://localhost",
+     *        show: true
+     *      }
+     *    }
+     * }
+     * ```
+     *
+     * #### Example #4: Connect to remote browser by specifying [websocket endpoint](https://chromedevtools.github.io/devtools-protocol/#how-do-i-access-the-browser-target)
+     *
+     * ```js
+     * {
+     *    helpers: {
+     *      Puppeteer: {
+     *        url: "http://localhost",
+     *        chrome: {
+     *          browserWSEndpoint: "ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a"
+     *        }
+     *      }
+     *    }
+     * }
+     * ```
+     * > Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
+     *
+     * #### Example #5: Target URL with provided basic authentication
+     *
+     * ```js
+     * {
+     *    helpers: {
+     *      Puppeteer : {
+     *        url: 'http://localhost',
+     *        basicAuth: {username: 'username', password: 'password'},
+     *        show: true
+     *      }
+     *    }
+     * }
+     * ```
+     * #### Troubleshooting
+     *
+     * Error Message:  `No usable sandbox!`
+     *
+     * When running Puppeteer on CI try to disable sandbox if you see that message
+     *
+     * ```
+     * helpers: {
+     *  Puppeteer: {
+     *     url: 'http://localhost',
+     *     show: false,
+     *     chrome: {
+     *       args: ['--no-sandbox', '--disable-setuid-sandbox']
+     *     }
+     *   },
+     * }
+     * ```
+     *
+     *
+     *
+     * ## Access From Helpers
+     *
+     * Receive Puppeteer client from a custom helper by accessing `browser` for the Browser object or `page` for the current Page object:
+     *
+     * ```js
+     * const { browser } = this.helpers.Puppeteer;
+     * await browser.pages(); // List of pages in the browser
+     *
+     * const { page } = this.helpers.Puppeteer;
+     * await page.url(); // Get the url of the current page
+     * ```
+     *
+     * ## Methods
+     */
+    class Puppeteer extends Helper {
+      constructor(config) {
+        super(config);
+
+        puppeteer = requireWithFallback('puppeteer', 'puppeteer-core');
+        // set defaults
+        this.isRemoteBrowser = false;
+        this.isRunning = false;
+        this.isAuthenticated = false;
+        this.sessionPages = {};
+        this.activeSessionName = '';
+
+        // override defaults with config
+        this._setConfig(config);
+      }
+
+      _validateConfig(config) {
+        const defaults = {
+          browser: 'chrome',
+          waitForAction: 100,
+          waitForTimeout: 1000,
+          pressKeyDelay: 10,
+          fullPageScreenshots: false,
+          disableScreenshots: false,
+          uniqueScreenshotNames: false,
+          manualStart: false,
+          getPageTimeout: 30000,
+          waitForNavigation: 'load',
+          restart: true,
+          keepCookies: false,
+          keepBrowserState: false,
+          show: false,
+          defaultPopupAction: 'accept',
+        };
+
+        return Object.assign(defaults, config);
+      }
+
+      _getOptions(config) {
+        return config.browser === 'firefox' ? Object.assign(this.options.firefox, { product: 'firefox' }) : this.options.chrome;
+      }
+
+      _setConfig(config) {
+        this.options = this._validateConfig(config);
+        this.puppeteerOptions = {
+          headless: !this.options.show,
+          ...this._getOptions(config),
+        };
+        this.isRemoteBrowser = !!this.puppeteerOptions.browserWSEndpoint;
+        popupStore.defaultAction = this.options.defaultPopupAction;
+      }
+
+      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',
+          },
+          {
+            name: 'windowSize', message: 'Browser viewport size', default: '1200x900',
+          },
+        ];
+      }
+
+      static _checkRequirements() {
+        try {
+          requireWithFallback('puppeteer', 'puppeteer-core');
+        } catch (e) {
+          return ['puppeteer'];
+        }
+      }
+
+      _init() {
+      }
+
+      _beforeSuite() {
+        if (!this.options.restart && !this.options.manualStart && !this.isRunning) {
+          this.debugSection('Session', 'Starting singleton browser session');
+          return this._startBrowser();
+        }
+      }
+
+      async _before() {
+        this.sessionPages = {};
+        recorder.retry({
+          retries: 3,
+          when: err => {
+            if (!err || typeof (err.message) !== 'string') {
+              return false;
+            }
+            // ignore context errors
+            return err.message.includes('context');
+          },
+        });
+        if (this.options.restart && !this.options.manualStart) return this._startBrowser();
+        if (!this.isRunning && !this.options.manualStart) return this._startBrowser();
+        return this.browser;
+      }
+
+      async _after() {
+        if (!this.isRunning) return;
+
+        // close other sessions
+        const contexts = this.browser.browserContexts();
+        const defaultCtx = contexts.shift();
+
+        await Promise.all(contexts.map(c => c.close()));
+
+        if (this.options.restart) {
+          this.isRunning = false;
+          return this._stopBrowser();
+        }
+
+        // ensure this.page is from default context
+        if (this.page) {
+          const existingPages = defaultCtx.targets().filter(t => t.type() === 'page');
+          await this._setPage(await existingPages[0].page());
+        }
+
+        if (this.options.keepBrowserState) return;
+
+        if (!this.options.keepCookies) {
+          this.debugSection('Session', 'cleaning cookies and localStorage');
+          await this.clearCookie();
+        }
+        const currentUrl = await this.grabCurrentUrl();
+
+        if (currentUrl.startsWith('http')) {
+          await this.executeScript('localStorage.clear();').catch((err) => {
+            if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
+          });
+          await this.executeScript('sessionStorage.clear();').catch((err) => {
+            if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
+          });
+        }
+        await this.closeOtherTabs();
+        return this.browser;
+      }
+
+      _afterSuite() {
+      }
+
+      _finishTest() {
+        if (!this.options.restart && this.isRunning) return this._stopBrowser();
+      }
+
+      _session() {
+        return {
+          start: async (name = '') => {
+            this.debugSection('Incognito Tab', 'opened');
+            this.activeSessionName = name;
+
+            const bc = await this.browser.createIncognitoBrowserContext();
+            await bc.newPage();
+
+            // Create a new page inside context.
+            return bc;
+          },
+          stop: async () => {
+            // is closed by _after
+          },
+          loadVars: async (context) => {
+            const existingPages = context.targets().filter(t => t.type() === 'page');
+            this.sessionPages[this.activeSessionName] = await existingPages[0].page();
+            return this._setPage(this.sessionPages[this.activeSessionName]);
+          },
+          restoreVars: async (session) => {
+            this.withinLocator = null;
+
+            if (!session) {
+              this.activeSessionName = '';
+            } else {
+              this.activeSessionName = session;
+            }
+            const defaultCtx = this.browser.defaultBrowserContext();
+            const existingPages = defaultCtx.targets().filter(t => t.type() === 'page');
+            await this._setPage(await existingPages[0].page());
+
+            return this._waitForAction();
+          },
+        };
+      }
+
+      /**
+       * Use Puppeteer API inside a test.
+       *
+       * First argument is a description of an action.
+       * Second argument is async function that gets this helper as parameter.
+       *
+       * { [`page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page), [`browser`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-browser) } from Puppeteer API are available.
+       *
+       * ```js
+       * I.usePuppeteerTo('emulate offline mode', async ({ page }) {
+       *   await page.setOfflineMode(true);
+       * });
+       * ```
+       *
+       * @param {string} description used to show in logs.
+       * @param {function} fn async function that is executed with Puppeteer as argument
+       */
+      usePuppeteerTo(description, fn) {
+        return this._useTo(...arguments);
+      }
+
+      /**
+       * Set the automatic popup response to Accept.
+       * This must be set before a popup is triggered.
+       *
+       * ```js
+       * I.amAcceptingPopups();
+       * I.click('#triggerPopup');
+       * I.acceptPopup();
+       * ```
+       */
+      amAcceptingPopups() {
+        popupStore.actionType = 'accept';
+      }
+
+      /**
+       * Accepts the active JavaScript native popup window, as created by window.alert|window.confirm|window.prompt.
+       * Don't confuse popups with modal windows, as created by [various
+       * libraries](http://jster.net/category/windows-modals-popups).
+       */
+      acceptPopup() {
+        popupStore.assertPopupActionType('accept');
+      }
+
+      /**
+       * Set the automatic popup response to Cancel/Dismiss.
+       * This must be set before a popup is triggered.
+       *
+       * ```js
+       * I.amCancellingPopups();
+       * I.click('#triggerPopup');
+       * I.cancelPopup();
+       * ```
+       */
+      amCancellingPopups() {
+        popupStore.actionType = 'cancel';
+      }
+
+      /**
+       * Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.
+       */
+      cancelPopup() {
+        popupStore.assertPopupActionType('cancel');
+      }
+
+      /**
+       * {{> seeInPopup }}
+       */
+      async seeInPopup(text) {
+        popupStore.assertPopupVisible();
+        const popupText = await popupStore.popup.message();
+        stringIncludes('text in popup').assert(text, popupText);
+      }
+
+      /**
+       * Set current page
+       * @param {object} page page to set
+       */
+      async _setPage(page) {
+        page = await page;
+        this._addPopupListener(page);
+        this._addErrorListener(page);
+        this.page = page;
+        if (!page) return;
+        page.setDefaultNavigationTimeout(this.options.getPageTimeout);
+        this.context = await this.page.$('body');
+        if (this.config.browser === 'chrome') {
+          await page.bringToFront();
+        }
+      }
+
+      async _addErrorListener(page) {
+        if (!page) {
+          return;
+        }
+        page.on('error', async (error) => {
+          console.error('Puppeteer page error', error);
+        });
+      }
+
+      /**
+       * Add the 'dialog' event listener to a page
+       * @page {Puppeteer.Page}
+       *
+       * The popup listener handles the dialog with the predefined action when it appears on the page.
+       * It also saves a reference to the object which is used in seeInPopup.
+       */
+      _addPopupListener(page) {
+        if (!page) {
+          return;
+        }
+        page.on('dialog', async (dialog) => {
+          popupStore.popup = dialog;
+          const action = popupStore.actionType || this.options.defaultPopupAction;
+          await this._waitForAction();
+
+          switch (action) {
+            case 'accept':
+              return dialog.accept();
+
+            case 'cancel':
+              return dialog.dismiss();
+
+            default: {
+              throw new Error('Unknown popup action type. Only "accept" or "cancel" are accepted');
+            }
+          }
+        });
+      }
+
+      /**
+       * Gets page URL including hash.
+       */
+      async _getPageUrl() {
+        return this.executeScript(() => window.location.href);
+      }
+
+      /**
+       * Grab the text within the popup. If no popup is visible then it will return null
+       *
+       * ```js
+       * await I.grabPopupText();
+       * ```
+       * @return {Promise<string | null>}
+       */
+      async grabPopupText() {
+        if (popupStore.popup) {
+          return popupStore.popup.message();
+        }
+        return null;
+      }
+
+      async _startBrowser() {
+        if (this.isRemoteBrowser) {
+          try {
+            this.browser = await puppeteer.connect(this.puppeteerOptions);
+          } catch (err) {
+            if (err.toString().indexOf('ECONNREFUSED')) {
+              throw new RemoteBrowserConnectionRefused(err);
+            }
+            throw err;
+          }
+        } else {
+          this.browser = await puppeteer.launch(this.puppeteerOptions);
+        }
+
+        this.browser.on('targetcreated', target => target.page().then(page => targetCreatedHandler.call(this, page)).catch((e) => {
+          console.error('Puppeteer page error', e);
+        }));
+        this.browser.on('targetchanged', (target) => {
+          this.debugSection('Url', target.url());
+        });
+
+        const existingPages = await this.browser.pages();
+        const mainPage = existingPages[0] || await this.browser.newPage();
+
+        if (existingPages.length) {
+          // Run the handler as it will not be triggered if the page already exists
+          targetCreatedHandler.call(this, mainPage);
+        }
+        await this._setPage(mainPage);
+        await this.closeOtherTabs();
+
+        this.isRunning = true;
+      }
+
+      async _stopBrowser() {
+        this.withinLocator = null;
+        this._setPage(null);
+        this.context = null;
+        popupStore.clear();
+        this.isAuthenticated = false;
+        await this.browser.close();
+        if (this.isRemoteBrowser) {
+          await this.browser.disconnect();
+        }
+      }
+
+      async _evaluateHandeInContext(...args) {
+        let context = await this._getContext();
+
+        if (context.constructor.name === 'Frame') {
+          // Currently there is no evalateHandle for the Frame object
+          // https://github.com/GoogleChrome/puppeteer/issues/1051
+          context = await context.executionContext();
+        }
+
+        return context.evaluateHandle(...args);
+      }
+
+      async _withinBegin(locator) {
+        if (this.withinLocator) {
+          throw new Error('Can\'t start within block inside another within block');
+        }
+
+        const frame = isFrameLocator(locator);
+
+        if (frame) {
+          if (Array.isArray(frame)) {
+            return this.switchTo(null)
+              .then(() => frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()));
+          }
+          await this.switchTo(locator);
+          this.withinLocator = new Locator(locator);
+          return;
+        }
+
+        const els = await this._locate(locator);
+        assertElementExists(els, locator);
+        this.context = els[0];
+
+        this.withinLocator = new Locator(locator);
+      }
+
+      async _withinEnd() {
+        this.withinLocator = null;
+        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;
+      }
+
+      /**
+       * {{> amOnPage }}
+       */
+      async amOnPage(url) {
+        if (!(/^\w+\:\/\//.test(url))) {
+          url = this.options.url + url;
+        }
+
+        if (this.config.basicAuth && (this.isAuthenticated !== true)) {
+          if (url.includes(this.options.url)) {
+            await this.page.authenticate(this.config.basicAuth);
+            this.isAuthenticated = true;
+          }
+        }
+
+        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();
+      }
+
+      /**
+       * {{> 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.
+       * It also can't maximize a window.
+       */
+      async resizeWindow(width, height) {
+        if (width === 'maximize') {
+          throw new Error('Puppeteer can\'t control windows, so it can\'t maximize it');
+        }
+
+        await this.page.setViewport({ width, height });
+        return this._waitForAction();
+      }
+
+      /**
+       * Set headers for all next requests
+       *
+       * ```js
+       * I.haveRequestHeaders({
+       *    'X-Sent-By': 'CodeceptJS',
+       * });
+       * ```
+       *
+       * @param {object} customHeaders headers to set
+       */
+      async haveRequestHeaders(customHeaders) {
+        if (!customHeaders) {
+          throw new Error('Cannot send empty headers.');
+        }
+        return this.page.setExtraHTTPHeaders(customHeaders);
+      }
+
+      /**
+       * {{> moveCursorTo }}
+       * {{ react }}
+       */
+      async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
+        const els = await this._locate(locator);
+        assertElementExists(els, locator);
+
+        // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
+        const { x, y } = await getClickablePoint(els[0]);
+        await this.page.mouse.move(x + offsetX, y + offsetY);
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> dragAndDrop }}
+       */
+      async dragAndDrop(srcElement, destElement) {
+        return proceedDragAndDrop.call(this, srcElement, destElement);
+      }
+
+      /**
+       * {{> refreshPage }}
+       */
+      async refreshPage() {
+        return this.page.reload({ timeout: this.options.getPageTimeout, waitUntil: this.options.waitForNavigation });
+      }
+
+      /**
+       * {{> scrollPageToTop }}
+       */
+      scrollPageToTop() {
+        return this.executeScript(() => {
+          window.scrollTo(0, 0);
+        });
+      }
+
+      /**
+       * {{> scrollPageToBottom }}
+       */
+      scrollPageToBottom() {
+        return this.executeScript(() => {
+          const body = document.body;
+          const html = document.documentElement;
+          window.scrollTo(0, Math.max(
+            body.scrollHeight, body.offsetHeight,
+            html.clientHeight, html.scrollHeight, html.offsetHeight,
+          ));
+        });
+      }
+
+      /**
+       * {{> scrollTo }}
+       */
+      async scrollTo(locator, offsetX = 0, offsetY = 0) {
+        if (typeof locator === 'number' && typeof offsetX === 'number') {
+          offsetY = offsetX;
+          offsetX = locator;
+          locator = null;
+        }
+
+        if (locator) {
+          const els = await this._locate(locator);
+          assertElementExists(els, locator, 'Element');
+          const el = els[0];
+          await el.evaluate((el) => el.scrollIntoView());
+          const elementCoordinates = await getClickablePoint(els[0]);
+          await this.executeScript((x, y) => window.scrollBy(x, y), elementCoordinates.x + offsetX, elementCoordinates.y + offsetY);
+        } else {
+          await this.executeScript((x, y) => window.scrollTo(x, y), offsetX, offsetY);
+        }
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> seeInTitle }}
+       */
+      async seeInTitle(text) {
+        const title = await this.page.title();
+        stringIncludes('web page title').assert(text, title);
+      }
+
+      /**
+       * {{> grabPageScrollPosition }}
+       */
+      async grabPageScrollPosition() {
+        /* eslint-disable comma-dangle */
+        function getScrollPosition() {
+          return {
+            x: window.pageXOffset,
+            y: window.pageYOffset
+          };
+        }
+        /* eslint-enable comma-dangle */
+        return this.executeScript(getScrollPosition);
+      }
+
+      /**
+       * {{> seeTitleEquals }}
+       */
+      async seeTitleEquals(text) {
+        const title = await this.page.title();
+        return equals('web page title').assert(title, text);
+      }
+
+      /**
+       * {{> dontSeeInTitle }}
+       */
+      async dontSeeInTitle(text) {
+        const title = await this.page.title();
+        stringIncludes('web page title').negate(text, title);
+      }
+
+      /**
+       * {{> grabTitle }}
+       */
+      async grabTitle() {
+        return this.page.title();
+      }
+
+      /**
+       * Get elements by different locator types, including strict locator
+       * Should be used in custom helpers:
+       *
+       * ```js
+       * const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
+       * ```
+       *
+       * {{ react }}
+       */
+      async _locate(locator) {
+        return findElements(await this.context, locator);
+      }
+
+      /**
+       * Find a checkbox by providing human readable text:
+       * NOTE: Assumes the checkable element exists
+       *
+       * ```js
+       * this.helpers['Puppeteer']._locateCheckable('I agree with terms and conditions').then // ...
+       * ```
+       */
+      async _locateCheckable(locator, providedContext = null) {
+        const context = providedContext || await this._getContext();
+        const els = await findCheckable.call(this, locator, context);
+        assertElementExists(els[0], locator, 'Checkbox or radio');
+        return els[0];
+      }
+
+      /**
+       * Find a clickable element by providing human readable text:
+       *
+       * ```js
+       * this.helpers['Puppeteer']._locateClickable('Next page').then // ...
+       * ```
+       */
+      async _locateClickable(locator) {
+        const context = await this._getContext();
+        return findClickable.call(this, context, locator);
+      }
+
+      /**
+       * Find field elements by providing human readable text:
+       *
+       * ```js
+       * this.helpers['Puppeteer']._locateFields('Your email').then // ...
+       * ```
+       */
+      async _locateFields(locator) {
+        return findFields.call(this, locator);
+      }
+
+      /**
+       * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
+       *
+       * ```js
+       * I.switchToNextTab();
+       * I.switchToNextTab(2);
+       * ```
+       *
+       * @param {number} [num=1]
+       */
+      async switchToNextTab(num = 1) {
+        const pages = await this.browser.pages();
+        const index = pages.indexOf(this.page);
+        this.withinLocator = null;
+        const page = pages[index + num];
+
+        if (!page) {
+          throw new Error(`There is no ability to switch to next tab with offset ${num}`);
+        }
+
+        await this._setPage(page);
+        return this._waitForAction();
+      }
+
+      /**
+       * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
+       *
+       * ```js
+       * I.switchToPreviousTab();
+       * I.switchToPreviousTab(2);
+       * ```
+       * @param {number} [num=1]
+       */
+      async switchToPreviousTab(num = 1) {
+        const pages = await this.browser.pages();
+        const index = pages.indexOf(this.page);
+        this.withinLocator = null;
+        const page = pages[index - num];
+
+        if (!page) {
+          throw new Error(`There is no ability to switch to previous tab with offset ${num}`);
+        }
+
+        await this._setPage(page);
+        return this._waitForAction();
+      }
+
+      /**
+       * Close current tab and switches to previous.
+       *
+       * ```js
+       * I.closeCurrentTab();
+       * ```
+       */
+      async closeCurrentTab() {
+        const oldPage = this.page;
+        await this.switchToPreviousTab();
+        await oldPage.close();
+        return this._waitForAction();
+      }
+
+      /**
+       * Close all tabs except for the current one.
+       *
+       * ```js
+       * I.closeOtherTabs();
+       * ```
+       */
+      async closeOtherTabs() {
+        const pages = await this.browser.pages();
+        const otherPages = pages.filter(page => page !== this.page);
+
+        let p = Promise.resolve();
+        otherPages.forEach((page) => {
+          p = p.then(() => page.close());
+        });
+        await p;
+        return this._waitForAction();
+      }
+
+      /**
+       * Open new tab and switch to it
+       *
+       * ```js
+       * I.openNewTab();
+       * ```
+       */
+      async openNewTab() {
+        await this._setPage(await this.browser.newPage());
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> grabNumberOfOpenTabs }}
+       */
+      async grabNumberOfOpenTabs() {
+        const pages = await this.browser.pages();
+        return pages.length;
+      }
+
+      /**
+       * {{> seeElement }}
+       * {{ react }}
+       */
+      async seeElement(locator) {
+        let els = await this._locate(locator);
+        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
+        return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'));
+      }
+
+      /**
+       * {{> dontSeeElement }}
+       * {{ react }}
+       */
+      async dontSeeElement(locator) {
+        let els = await this._locate(locator);
+        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
+        return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'));
+      }
+
+      /**
+       * {{> seeElementInDOM }}
+       */
+      async seeElementInDOM(locator) {
+        const els = await this._locate(locator);
+        return empty('elements on page').negate(els.filter(v => v).fill('ELEMENT'));
+      }
+
+      /**
+       * {{> dontSeeElementInDOM }}
+       */
+      async dontSeeElementInDOM(locator) {
+        const els = await this._locate(locator);
+        return empty('elements on a page').assert(els.filter(v => v).fill('ELEMENT'));
+      }
+
+      /**
+       * {{> click }}
+       *
+       * {{ react }}
+       */
+      async click(locator, context = null) {
+        return proceedClick.call(this, locator, context);
+      }
+
+      /**
+       * {{> forceClick }}
+       *
+       * {{ react }}
+       */
+      async forceClick(locator, context = null) {
+        let matcher = await this.context;
+        if (context) {
+          const els = await this._locate(context);
+          assertElementExists(els, context);
+          matcher = els[0];
+        }
+
+        const els = await findClickable.call(this, matcher, locator);
+        if (context) {
+          assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`);
+        } else {
+          assertElementExists(els, locator, 'Clickable element');
+        }
+        const elem = els[0];
+        return this.executeScript((el) => {
+          if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+          }
+          const event = document.createEvent('MouseEvent');
+          event.initEvent('click', true, true);
+          return el.dispatchEvent(event);
+        }, elem);
+      }
+
+      /**
+       * {{> clickLink }}
+       *
+       * {{ react }}
+       */
+      async clickLink(locator, context = null) {
+        return proceedClick.call(this, locator, context, { waitForNavigation: true });
+      }
+
+      /**
+       * 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);
+
+        try {
+          return this.page._client.send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath });
+        } catch (e) {
+          return this.page._client().send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath });
+        }
+      }
+
+      /**
+       * This method is **deprecated**.
+       *
+       * Please use `handleDownloads()` instead.
+       */
+      async downloadFile(locator, customName) {
+        let fileName;
+        await this.page.setRequestInterception(true);
+
+        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,
+          uri: xRequest._url,
+          body: xRequest._postData,
+          headers: xRequest._headers,
+        };
+
+        const cookies = await this.page.cookies();
+        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',
+          onDownloadProgress(e) {
+            console.log('+', e);
+          },
+        });
+
+        const outputFile = path.join(`${global.output_dir}/${fileName}`);
+
+        try {
+          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}`);
+            wstream.on('finish', () => { resolve(fileName); });
+            wstream.on('error', reject);
+          });
+        } catch (error) {
+          throw new Error(`There is something wrong with downloaded file. ${error}`);
+        }
+      }
+
+      /**
+       * {{> doubleClick }}
+       *
+       * {{ react }}
+       */
+      async doubleClick(locator, context = null) {
+        return proceedClick.call(this, locator, context, { clickCount: 2 });
+      }
+
+      /**
+       * {{> rightClick }}
+       *
+       * {{ react }}
+       */
+      async rightClick(locator, context = null) {
+        return proceedClick.call(this, locator, context, { button: 'right' });
+      }
+
+      /**
+       * {{> checkOption }}
+       */
+      async checkOption(field, context = null) {
+        const elm = await this._locateCheckable(field, context);
+        const curentlyChecked = await elm.getProperty('checked')
+          .then(checkedProperty => checkedProperty.jsonValue());
+        // Only check if NOT currently checked
+        if (!curentlyChecked) {
+          await elm.click();
+          return this._waitForAction();
+        }
+      }
+
+      /**
+       * {{> uncheckOption }}
+       */
+      async uncheckOption(field, context = null) {
+        const elm = await this._locateCheckable(field, context);
+        const curentlyChecked = await elm.getProperty('checked')
+          .then(checkedProperty => checkedProperty.jsonValue());
+        // Only uncheck if currently checked
+        if (curentlyChecked) {
+          await elm.click();
+          return this._waitForAction();
+        }
+      }
+
+      /**
+       * {{> seeCheckboxIsChecked }}
+       */
+      async seeCheckboxIsChecked(field) {
+        return proceedIsChecked.call(this, 'assert', field);
+      }
+
+      /**
+       * {{> dontSeeCheckboxIsChecked }}
+       */
+      async dontSeeCheckboxIsChecked(field) {
+        return proceedIsChecked.call(this, 'negate', field);
+      }
+
+      /**
+       * {{> pressKeyDown }}
+       */
+      async pressKeyDown(key) {
+        key = getNormalizedKey.call(this, key);
+        await this.page.keyboard.down(key);
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> pressKeyUp }}
+       */
+      async pressKeyUp(key) {
+        key = getNormalizedKey.call(this, key);
+        await this.page.keyboard.up(key);
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> pressKeyWithKeyNormalization }}
+       *
+       * _Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/puppeteer#1313](https://github.com/GoogleChrome/puppeteer/issues/1313)).
+       */
+      async pressKey(key) {
+        const modifiers = [];
+        if (Array.isArray(key)) {
+          for (let k of key) {
+            k = getNormalizedKey.call(this, k);
+            if (isModifierKey(k)) {
+              modifiers.push(k);
+            } else {
+              key = k;
+              break;
+            }
+          }
+        } else {
+          key = getNormalizedKey.call(this, key);
+        }
+        for (const modifier of modifiers) {
+          await this.page.keyboard.down(modifier);
+        }
+        await this.page.keyboard.press(key);
+        for (const modifier of modifiers) {
+          await this.page.keyboard.up(modifier);
+        }
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> type }}
+       */
+      async type(keys, delay = null) {
+        if (!Array.isArray(keys)) {
+          keys = keys.toString();
+          keys = keys.split('');
+        }
+
+        for (const key of keys) {
+          await this.page.keyboard.press(key);
+          if (delay) await this.wait(delay / 1000);
+        }
+      }
+
+      /**
+       * {{> fillField }}
+       * {{ react }}
+       */
+      async fillField(field, value) {
+        const els = await findVisibleFields.call(this, field);
+        assertElementExists(els, field, 'Field');
+        const el = els[0];
+        const tag = await el.getProperty('tagName').then(el => el.jsonValue());
+        const editable = await el.getProperty('contenteditable').then(el => el.jsonValue());
+        if (tag === 'INPUT' || tag === 'TEXTAREA') {
+          await this._evaluateHandeInContext(el => el.value = '', el);
+        } else if (editable) {
+          await this._evaluateHandeInContext(el => el.innerHTML = '', el);
+        }
+
+        if (this.options.highlightElement) {
+          highlightElement(el, this.page);
+        }
+
+        await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
+        if (this.options.highlightElement) {
+          unhighlightElement(el, this.page);
+        }
+
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> clearField }}
+       */
+      async clearField(field) {
+        return this.fillField(field, '');
+      }
+
+      /**
+       * {{> appendField }}
+       *
+       * {{ react }}
+       */
+      async appendField(field, value) {
+        const els = await findVisibleFields.call(this, field);
+        assertElementExists(els, field, 'Field');
+        await els[0].press('End');
+        await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> seeInField }}
+       */
+      async seeInField(field, value) {
+        return proceedSeeInField.call(this, 'assert', field, value);
+      }
+
+      /**
+       * {{> dontSeeInField }}
+       */
+      async dontSeeInField(field, value) {
+        return proceedSeeInField.call(this, 'negate', field, value);
+      }
+
+      /**
+       * {{> attachFile }}
+       *
+       * > ⚠ There is an [issue with file upload in Puppeteer 2.1.0 & 2.1.1](https://github.com/puppeteer/puppeteer/issues/5420), downgrade to 2.0.0 if you face it.
+       */
+      async attachFile(locator, pathToFile) {
+        const file = path.join(global.codecept_dir, pathToFile);
+
+        if (!fileExists(file)) {
+          throw new Error(`File at ${file} can not be found on local system`);
+        }
+        const els = await findFields.call(this, locator);
+        assertElementExists(els, locator, 'Field');
+        await els[0].uploadFile(file);
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> selectOption }}
+       */
+      async selectOption(select, option) {
+        const els = await findVisibleFields.call(this, select);
+        assertElementExists(els, select, 'Selectable field');
+        const el = els[0];
+        if (await el.getProperty('tagName').then(t => t.jsonValue()) !== 'SELECT') {
+          throw new Error('Element is not <select>');
+        }
+        if (!Array.isArray(option)) option = [option];
+
+        for (const key in option) {
+          const opt = xpathLocator.literal(option[key]);
+          let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) });
+          if (optEl.length) {
+            this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
+            continue;
+          }
+          optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) });
+          if (optEl.length) {
+            this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
+          }
+        }
+        await this._evaluateHandeInContext((element) => {
+          element.dispatchEvent(new Event('input', { bubbles: true }));
+          element.dispatchEvent(new Event('change', { bubbles: true }));
+        }, el);
+
+        return this._waitForAction();
+      }
+
+      /**
+       * {{> grabNumberOfVisibleElements }}
+       * {{ react }}
+       */
+      async grabNumberOfVisibleElements(locator) {
+        let els = await this._locate(locator);
+        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
+        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
+        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
+
+        return els.filter(v => v).length;
+      }
+
+      /**
+       * {{> seeInCurrentUrl }}
+       */
+      async seeInCurrentUrl(url) {
+        stringIncludes('url').assert(url, await this._getPageUrl());
+      }
+
+      /**
+       * {{> dontSeeInCurrentUrl }}
+       */
+      async dontSeeInCurrentUrl(url) {
+        stringIncludes('url').negate(url, await this._getPageUrl());
+      }
+
+      /**
+       * {{> seeCurrentUrlEquals }}
+       */
+      async seeCurrentUrlEquals(url) {
+        urlEquals(this.options.url).assert(url, await this._getPageUrl());
+      }
+
+      /**
+       * {{> dontSeeCurrentUrlEquals }}
+       */
+      async dontSeeCurrentUrlEquals(url) {
+        urlEquals(this.options.url).negate(url, await this._getPageUrl());
+      }
+
+      /**
+       * {{> see }}
+       *
+       * {{ react }}
+       */
+      async see(text, context = null) {
+        return proceedSee.call(this, 'assert', text, context);
+      }
+
+      /**
+       * {{> seeTextEquals }}
+       */
+      async seeTextEquals(text, context = null) {
+        return proceedSee.call(this, 'assert', text, context, true);
+      }
+
+      /**
+       * {{> dontSee }}
+       *
+       * {{ react }}
+       */
+      async dontSee(text, context = null) {
+        return proceedSee.call(this, 'negate', text, context);
+      }
+
+      /**
+       * {{> grabSource }}
+       */
+      async grabSource() {
+        return this.page.content();
+      }
+
+      /**
+       * Get JS log from browser.
+       *
+       * ```js
+       * let logs = await I.grabBrowserLogs();
+       * console.log(JSON.stringify(logs))
+       * ```
+       * @return {Promise<any[]>}
+       */
+      async grabBrowserLogs() {
+        const logs = consoleLogStore.entries;
+        consoleLogStore.clear();
+        return logs;
+      }
+
+      /**
+       * {{> grabCurrentUrl }}
+       */
+      async grabCurrentUrl() {
+        return this._getPageUrl();
+      }
+
+      /**
+       * {{> seeInSource }}
+       */
+      async seeInSource(text) {
+        const source = await this.page.content();
+        stringIncludes('HTML source of a page').assert(text, source);
+      }
+
+      /**
+       * {{> dontSeeInSource }}
+       */
+      async dontSeeInSource(text) {
+        const source = await this.page.content();
+        stringIncludes('HTML source of a page').negate(text, source);
+      }
+
+      /**
+       * {{> seeNumberOfElements }}
+       *
+       * {{ react }}
+       */
+      async seeNumberOfElements(locator, num) {
+        const elements = await this._locate(locator);
+        return equals(`expected number of elements (${(new Locator(locator))}) is ${num}, but found ${elements.length}`).assert(elements.length, num);
+      }
+
+      /**
+       * {{> seeNumberOfVisibleElements }}
+       *
+       * {{ react }}
+       */
+      async seeNumberOfVisibleElements(locator, num) {
+        const res = await this.grabNumberOfVisibleElements(locator);
+        return equals(`expected number of visible elements (${(new Locator(locator))}) is ${num}, but found ${res}`).assert(res, num);
+      }
+
+      /**
+       * {{> setCookie }}
+       */
+      async setCookie(cookie) {
+        if (Array.isArray(cookie)) {
+          return this.page.setCookie(...cookie);
+        }
+        return this.page.setCookie(cookie);
+      }
+
+      /**
+       * {{> seeCookie }}
+       *
+       */
+      async seeCookie(name) {
+        const cookies = await this.page.cookies();
+        empty(`cookie ${name} to be set`).negate(cookies.filter(c => c.name === name));
+      }
+
+      /**
+       * {{> dontSeeCookie }}
+       */
+      async dontSeeCookie(name) {
+        const cookies = await this.page.cookies();
+        empty(`cookie ${name} to be set`).assert(cookies.filter(c => c.name === name));
+      }
+
+      /**
+       * {{> grabCookie }}
+       *
+       * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
+       */
+      async grabCookie(name) {
+        const cookies = await this.page.cookies();
+        if (!name) return cookies;
+        const cookie = cookies.filter(c => c.name === name);
+        if (cookie[0]) return cookie[0];
+      }
+
+      /**
+       * {{> clearCookie }}
+       */
+      async clearCookie(name) {
+        const cookies = await this.page.cookies();
+        if (!name) {
+          return this.page.deleteCookie.apply(this.page, cookies);
+        }
+        const cookie = cookies.filter(c => c.name === name);
+        if (!cookie[0]) return;
+        return this.page.deleteCookie(cookie[0]);
+      }
+
+      /**
+       * {{> executeScript }}
+       *
+       * If a function returns a Promise It will wait for it resolution.
+       */
+      async executeScript(...args) {
+        let context = this.page;
+        if (this.context && this.context.constructor.name === 'Frame') {
+          context = this.context; // switching to iframe context
+        }
+        return context.evaluate.apply(context, args);
+      }
+
+      /**
+       * {{> executeAsyncScript }}
+       *
+       * Asynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
+       */
+      async executeAsyncScript(...args) {
+        const asyncFn = function () {
+          const args = Array.from(arguments);
+          const fn = eval(`(${args.shift()})`); // eslint-disable-line no-eval
+          return new Promise((done) => {
+            args.push(done);
+            fn.apply(null, args);
+          });
+        };
+        args[0] = args[0].toString();
+        args.unshift(asyncFn);
+        return this.page.evaluate.apply(this.page, args);
+      }
+
+      /**
+       * {{> grabTextFromAll }}
+       * {{ react }}
+       */
+      async grabTextFromAll(locator) {
+        const els = await this._locate(locator);
+        const texts = [];
+        for (const el of els) {
+          texts.push(await (await el.getProperty('innerText')).jsonValue());
+        }
+        return texts;
+      }
+
+      /**
+       * {{> grabTextFrom }}
+       * {{ react }}
+       */
+      async grabTextFrom(locator) {
+        const texts = await this.grabTextFromAll(locator);
+        assertElementExists(texts, locator);
+        if (texts.length > 1) {
+          this.debugSection('GrabText', `Using first element out of ${texts.length}`);
+        }
+
+        return texts[0];
+      }
+
+      /**
+       * {{> grabValueFromAll }}
+       */
+      async grabValueFromAll(locator) {
+        const els = await findFields.call(this, locator);
+        const values = [];
+        for (const el of els) {
+          values.push(await (await el.getProperty('value')).jsonValue());
+        }
+        return values;
+      }
+
+      /**
+       * {{> grabValueFrom }}
+       */
+      async grabValueFrom(locator) {
+        const values = await this.grabValueFromAll(locator);
+        assertElementExists(values, locator);
+        if (values.length > 1) {
+          this.debugSection('GrabValue', `Using first element out of ${values.length}`);
+        }
+
+        return values[0];
+      }
+
+      /**
+       * {{> grabHTMLFromAll }}
+       */
+      async grabHTMLFromAll(locator) {
+        const els = await this._locate(locator);
+        const values = await Promise.all(els.map(el => el.executionContext().evaluate(element => element.innerHTML, el)));
+        return values;
+      }
+
+      /**
+       * {{> grabHTMLFrom }}
+       */
+      async grabHTMLFrom(locator) {
+        const html = await this.grabHTMLFromAll(locator);
+        assertElementExists(html, locator);
+        if (html.length > 1) {
+          this.debugSection('GrabHTML', `Using first element out of ${html.length}`);
+        }
+
+        return html[0];
+      }
+
+      /**
+       * {{> grabCssPropertyFromAll }}
+       * {{ react }}
+       */
+      async grabCssPropertyFromAll(locator, cssProperty) {
+        const els = await this._locate(locator);
+        const res = await Promise.all(els.map(el => el.executionContext().evaluate(el => JSON.parse(JSON.stringify(getComputedStyle(el))), el)));
+        const cssValues = res.map(props => props[toCamelCase(cssProperty)]);
+
+        return cssValues;
+      }
+
+      /**
+       * {{> grabCssPropertyFrom }}
+       * {{ react }}
+       */
+      async grabCssPropertyFrom(locator, cssProperty) {
+        const cssValues = await this.grabCssPropertyFromAll(locator, cssProperty);
+        assertElementExists(cssValues, locator);
+
+        if (cssValues.length > 1) {
+          this.debugSection('GrabCSS', `Using first element out of ${cssValues.length}`);
+        }
+
+        return cssValues[0];
+      }
+
+      /**
+       * {{> seeCssPropertiesOnElements }}
+       * {{ react }}
+       */
+      async seeCssPropertiesOnElements(locator, cssProperties) {
+        const res = await this._locate(locator);
+        assertElementExists(res, locator);
+
+        const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
+        const elemAmount = res.length;
+        const commands = [];
+        res.forEach((el) => {
+          Object.keys(cssPropertiesCamelCase).forEach((prop) => {
+            commands.push(el.executionContext()
+              .evaluate((el) => {
+                const style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle;
+                return JSON.parse(JSON.stringify(style));
+              }, el)
+              .then((props) => {
+                if (isColorProperty(prop)) {
+                  return convertColorToRGBA(props[prop]);
+                }
+                return props[prop];
+              }));
+          });
+        });
+        let props = await Promise.all(commands);
+        const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
+        if (!Array.isArray(props)) props = [props];
+        let chunked = chunkArray(props, values.length);
+        chunked = chunked.filter((val) => {
+          for (let i = 0; i < val.length; ++i) {
+            if (val[i] !== values[i]) return false;
+          }
+          return true;
+        });
+        return equals(`all elements (${(new Locator(locator))}) to have CSS property ${JSON.stringify(cssProperties)}`).assert(chunked.length, elemAmount);
+      }
+
+      /**
+       * {{> seeAttributesOnElements }}
+       * {{ react }}
+       */
+      async seeAttributesOnElements(locator, attributes) {
+        const res = await this._locate(locator);
+        assertElementExists(res, locator);
+
+        const elemAmount = res.length;
+        const commands = [];
+        res.forEach((el) => {
+          Object.keys(attributes).forEach((prop) => {
+            commands.push(el
+              .executionContext()
+              .evaluateHandle((el, attr) => el[attr] || el.getAttribute(attr), el, prop)
+              .then(el => el.jsonValue()));
+          });
+        });
+        let attrs = await Promise.all(commands);
+        const values = Object.keys(attributes).map(key => attributes[key]);
+        if (!Array.isArray(attrs)) attrs = [attrs];
+        let chunked = chunkArray(attrs, values.length);
+        chunked = chunked.filter((val) => {
+          for (let i = 0; i < val.length; ++i) {
+            if (val[i] !== values[i]) return false;
+          }
+          return true;
+        });
+        return equals(`all elements (${(new Locator(locator))}) to have attributes ${JSON.stringify(attributes)}`).assert(chunked.length, elemAmount);
+      }
+
+      /**
+       * {{> dragSlider }}
+       * {{ react }}
+       */
+      async dragSlider(locator, offsetX = 0) {
+        const src = await this._locate(locator);
+        assertElementExists(src, locator, 'Slider Element');
+
+        // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
+        const sliderSource = await getClickablePoint(src[0]);
+
+        // Drag start point
+        await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
+        await this.page.mouse.down();
+
+        // Drag destination
+        await this.page.mouse.move(sliderSource.x + offsetX, sliderSource.y, { steps: 5 });
+        await this.page.mouse.up();
+
+        await this._waitForAction();
+      }
+
+      /**
+       * {{> grabAttributeFromAll }}
+       * {{ react }}
+       */
+      async grabAttributeFromAll(locator, attr) {
+        const els = await this._locate(locator);
+        const array = [];
+        for (let index = 0; index < els.length; index++) {
+          const a = await this._evaluateHandeInContext((el, attr) => el[attr] || el.getAttribute(attr), els[index], attr);
+          array.push(await a.jsonValue());
+        }
+        return array;
+      }
+
+      /**
+       * {{> grabAttributeFrom }}
+       * {{ react }}
+       */
+      async grabAttributeFrom(locator, attr) {
+        const attrs = await this.grabAttributeFromAll(locator, attr);
+        assertElementExists(attrs, locator);
+        if (attrs.length > 1) {
+          this.debugSection('GrabAttribute', `Using first element out of ${attrs.length}`);
+        }
+
+        return attrs[0];
+      }
+
+      /**
+       * {{> saveElementScreenshot }}
+       */
+      async saveElementScreenshot(locator, fileName) {
+        const outputFile = screenshotOutputFolder(fileName);
+
+        const res = await this._locate(locator);
+        assertElementExists(res, locator);
+        if (res.length > 1) this.debug(`[Elements] Using first element out of ${res.length}`);
+        const elem = res[0];
+        this.debug(`Screenshot of ${(new Locator(locator))} element has been saved to ${outputFile}`);
+        return elem.screenshot({ path: outputFile, type: 'png' });
+      }
+
+      /**
+       * {{> saveScreenshot }}
+       */
+      async saveScreenshot(fileName, fullPage) {
+        const fullPageOption = fullPage || this.options.fullPageScreenshots;
+        const outputFile = screenshotOutputFolder(fileName);
+
+        this.debug(`Screenshot is saving to ${outputFile}`);
+
+        if (this.activeSessionName) {
+          const activeSessionPage = this.sessionPages[this.activeSessionName];
+
+          if (activeSessionPage) {
+            return activeSessionPage.screenshot({
+              path: outputFile,
+              fullPage: fullPageOption,
+              type: 'png',
+            });
+          }
+        }
+
+        return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
+      }
+
+      async _failed() {
+        await this._withinEnd();
+      }
+
+      /**
+       * {{> wait }}
+       */
+      async wait(sec) {
+        return new Promise(((done) => {
+          setTimeout(done, sec * 1000);
+        }));
+      }
+
+      /**
+       * {{> waitForEnabled }}
+       */
+      async waitForEnabled(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+        await this.context;
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          const enabledFn = function (locator) {
+            const els = document.querySelectorAll(locator);
+            if (!els || els.length === 0) {
+              return false;
+            }
+            return Array.prototype.filter.call(els, el => !el.disabled).length > 0;
+          };
+          waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value);
+        } else {
+          const enabledFn = function (locator, $XPath) {
+            eval($XPath); // eslint-disable-line no-eval
+            return $XPath(null, locator).filter(el => !el.disabled).length > 0;
+          };
+          waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitForValue }}
+       */
+      async waitForValue(field, value, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        const locator = new Locator(field, 'css');
+        await this.context;
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          const valueFn = function (locator, value) {
+            const els = document.querySelectorAll(locator);
+            if (!els || els.length === 0) {
+              return false;
+            }
+            return Array.prototype.filter.call(els, el => (el.value.toString() || '').indexOf(value) !== -1).length > 0;
+          };
+          waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, value);
+        } else {
+          const valueFn = function (locator, $XPath, value) {
+            eval($XPath); // eslint-disable-line no-eval
+            return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0;
+          };
+          waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), value);
+        }
+        return waiter.catch((err) => {
+          const loc = locator.toString();
+          throw new Error(`element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitNumberOfVisibleElements }}
+       * {{ react }}
+       */
+      async waitNumberOfVisibleElements(locator, num, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+        await this.context;
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          const visibleFn = function (locator, num) {
+            const els = document.querySelectorAll(locator);
+            if (!els || els.length === 0) {
+              return false;
+            }
+            return Array.prototype.filter.call(els, el => el.offsetParent !== null).length === num;
+          };
+          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, num);
+        } else {
+          const visibleFn = function (locator, $XPath, num) {
+            eval($XPath); // eslint-disable-line no-eval
+            return $XPath(null, locator).filter(el => el.offsetParent !== null).length === num;
+          };
+          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), num);
+        }
+        return waiter.catch((err) => {
+          throw new Error(`The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitForClickable }}
+       */
+      async waitForClickable(locator, waitTimeout) {
+        const els = await this._locate(locator);
+        assertElementExists(els, locator);
+
+        return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
+          if (/failed: timeout/i.test(e.message)) {
+            throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`);
+          } else {
+            throw e;
+          }
+        });
+      }
+
+      /**
+       * {{> waitForElement }}
+       * {{ react }}
+       */
+      async waitForElement(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout });
+        } else {
+          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout });
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitForVisible }}
+       *
+       * This method accepts [React selectors](https://codecept.io/react).
+       */
+      async waitForVisible(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+        await this.context;
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, visible: true });
+        } else {
+          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, visible: true });
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitForInvisible }}
+       */
+      async waitForInvisible(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+        await this.context;
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, hidden: true });
+        } else {
+          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, hidden: true });
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * {{> waitToHide }}
+       */
+      async waitToHide(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, hidden: true });
+        } else {
+          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, hidden: true });
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      async _getContext() {
+        if (this.context && this.context.constructor.name === 'Frame') {
+          return this.context;
+        }
+        return this.page;
+      }
+
+      /**
+       * {{> waitInUrl }}
+       */
+      async waitInUrl(urlPart, sec = null) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+
+        return this.page.waitForFunction((urlPart) => {
+          const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
+          return currUrl.indexOf(urlPart) > -1;
+        }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
+          const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
+          if (/failed: timeout/i.test(e.message)) {
+            throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`);
+          } else {
+            throw e;
+          }
+        });
+      }
+
+      /**
+       * {{> waitUrlEquals }}
+       */
+      async waitUrlEquals(urlPart, sec = null) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+
+        const baseUrl = this.options.url;
+        if (urlPart.indexOf('http') < 0) {
+          urlPart = baseUrl + urlPart;
+        }
+
+        return this.page.waitForFunction((urlPart) => {
+          const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
+          return currUrl.indexOf(urlPart) > -1;
+        }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
+          const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
+          if (/failed: timeout/i.test(e.message)) {
+            throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`);
+          } else {
+            throw e;
+          }
+        });
+      }
+
+      /**
+       * {{> waitForText }}
+       */
+      async waitForText(text, sec = null, context = null) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        let waiter;
+
+        const contextObject = await this._getContext();
+
+        if (context) {
+          const locator = new Locator(context, 'css');
+          if (locator.isCSS()) {
+            waiter = contextObject.waitForFunction((locator, text) => {
+              const el = document.querySelector(locator);
+              if (!el) return false;
+              return el.innerText.indexOf(text) > -1;
+            }, { timeout: waitTimeout }, locator.value, text);
+          }
+
+          if (locator.isXPath()) {
+            waiter = contextObject.waitForFunction((locator, text, $XPath) => {
+              eval($XPath); // eslint-disable-line no-eval
+              const el = $XPath(null, locator);
+              if (!el.length) return false;
+              return el[0].innerText.indexOf(text) > -1;
+            }, { timeout: waitTimeout }, locator.value, text, $XPath.toString());
+          }
+        } else {
+          waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, { timeout: waitTimeout }, text);
+        }
+
+        return waiter.catch((err) => {
+          throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      /**
+       * Waits for a network request.
+       *
+       * ```js
+       * I.waitForRequest('http://example.com/resource');
+       * I.waitForRequest(request => request.url() === 'http://example.com' && request.method() === 'GET');
+       * ```
+       *
+       * @param {string|function} urlOrPredicate
+       * @param {?number} [sec=null] seconds to wait
+       */
+      async waitForRequest(urlOrPredicate, sec = null) {
+        const timeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        return this.page.waitForRequest(urlOrPredicate, { timeout });
+      }
+
+      /**
+       * Waits for a network response.
+       *
+       * ```js
+       * I.waitForResponse('http://example.com/resource');
+       * I.waitForResponse(response => response.url() === 'http://example.com' && response.request().method() === 'GET');
+       * ```
+       *
+       * @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;
+        return this.page.waitForResponse(urlOrPredicate, { timeout });
+      }
+
+      /**
+       * {{> switchTo }}
+       */
+      async switchTo(locator) {
+        if (Number.isInteger(locator)) {
+          // Select by frame index of current context
+
+          let childFrames = null;
+          if (this.context && typeof this.context.childFrames === 'function') {
+            childFrames = this.context.childFrames();
+          } else {
+            childFrames = this.page.mainFrame().childFrames();
+          }
+
+          if (locator >= 0 && locator < childFrames.length) {
+            this.context = childFrames[locator];
+          } else {
+            throw new Error('Element #invalidIframeSelector was not found by text|CSS|XPath');
+          }
+          return;
+        }
+        if (!locator) {
+          this.context = await this.page.mainFrame().$('body');
+          return;
+        }
+
+        // iframe by selector
+        const els = await this._locate(locator);
+        assertElementExists(els, locator);
+        const contentFrame = await els[0].contentFrame();
+
+        if (contentFrame) {
+          this.context = contentFrame;
+        } else {
+          this.context = els[0];
+        }
+      }
+
+      /**
+       * {{> waitForFunction }}
+       */
+      async waitForFunction(fn, argsOrSec = null, sec = null) {
+        let args = [];
+        if (argsOrSec) {
+          if (Array.isArray(argsOrSec)) {
+            args = argsOrSec;
+          } else if (typeof argsOrSec === 'number') {
+            sec = argsOrSec;
+          }
+        }
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        const context = await this._getContext();
+        return context.waitForFunction(fn, { timeout: waitTimeout }, ...args);
+      }
+
+      /**
+       * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
+       *
+       * See [Pupeteer's reference](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions)
+       *
+       * @param {*} opts
+       */
+      async waitForNavigation(opts = {}) {
+        opts = {
+          timeout: this.options.getPageTimeout,
+          waitUntil: this.options.waitForNavigation,
+          ...opts,
+        };
+        return this.page.waitForNavigation(opts);
+      }
+
+      async waitUntilExists(locator, sec) {
+        console.log(`waitUntilExists deprecated:
+    * use 'waitForElement' to wait for element to be attached
+    * use 'waitForDetached to wait for element to be removed'`);
+        return this.waitForDetached(locator, sec);
+      }
+
+      /**
+       * {{> waitForDetached }}
+       */
+      async waitForDetached(locator, sec) {
+        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+        locator = new Locator(locator, 'css');
+
+        let waiter;
+        const context = await this._getContext();
+        if (locator.isCSS()) {
+          const visibleFn = function (locator) {
+            return document.querySelector(locator) === null;
+          };
+          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value);
+        } else {
+          const visibleFn = function (locator, $XPath) {
+            eval($XPath); // eslint-disable-line no-eval
+            return $XPath(null, locator).length === 0;
+          };
+          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
+        }
+        return waiter.catch((err) => {
+          throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`);
+        });
+      }
+
+      async _waitForAction() {
+        return this.wait(this.options.waitForAction / 1000);
+      }
+
+      /**
+       * {{> grabDataFromPerformanceTiming }}
+       */
+      async grabDataFromPerformanceTiming() {
+        return perfTiming;
+      }
+
+      /**
+       * {{> grabElementBoundingRect }}
+       */
+      async grabElementBoundingRect(locator, prop) {
+        const els = await this._locate(locator);
+        assertElementExists(els, locator);
+        const rect = await els[0].boundingBox();
+        if (prop) return rect[prop];
+        return rect;
+      }
+    }
+
+    module.exports = Puppeteer;
+
+    async function findElements(matcher, locator) {
+      if (locator.react) return findReact(matcher.executionContext(), locator);
+      locator = new Locator(locator, 'css');
+      if (!locator.isXPath()) return matcher.$$(locator.simplify());
+      return matcher.$x(locator.value);
+    }
+
+    async function proceedClick(locator, context = null, options = {}) {
+      let matcher = await this.context;
+      if (context) {
+        const els = await this._locate(context);
+        assertElementExists(els, context);
+        matcher = els[0];
+      }
+      const els = await findClickable.call(this, matcher, locator);
+      if (context) {
+        assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`);
+      } else {
+        assertElementExists(els, locator, 'Clickable element');
+      }
+
+      if (this.options.highlightElement) {
+        highlightElement(els[0], this.page);
+      }
+
+      await els[0].click(options);
+      const promises = [];
+      if (options.waitForNavigation) {
+        promises.push(this.waitForNavigation());
+      }
+      promises.push(this._waitForAction());
+
+      if (this.options.highlightElement) {
+        unhighlightElement(els[0], this.page);
+      }
+
+      return Promise.all(promises);
+    }
+
+    async function findClickable(matcher, locator) {
+      if (locator.react) return findReact(matcher.executionContext(), locator);
+      locator = new Locator(locator);
+      if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
+
+      let els;
+      const literal = xpathLocator.literal(locator.value);
+
+      els = await findElements.call(this, matcher, Locator.clickable.narrow(literal));
+      if (els.length) return els;
+
+      els = await findElements.call(this, matcher, Locator.clickable.wide(literal));
+      if (els.length) return els;
+
+      try {
+        els = await findElements.call(this, matcher, Locator.clickable.self(literal));
+        if (els.length) return els;
+      } catch (err) {
+        // Do nothing
+      }
+
+      return findElements.call(this, matcher, locator.value); // by css or xpath
+    }
+
+    async function proceedSee(assertType, text, context, strict = false) {
+      let description;
+      let allText;
+      if (!context) {
+        let el = await this.context;
+
+        if (el && !el.getProperty) {
+          // Fallback to body
+          el = await this.context.$('body');
+        }
+
+        allText = [await el.getProperty('innerText').then(p => p.jsonValue())];
+        description = 'web application';
+      } else {
+        const locator = new Locator(context, 'css');
+        description = `element ${locator.toString()}`;
+        const els = await this._locate(locator);
+        assertElementExists(els, locator.toString());
+        allText = await Promise.all(els.map(el => el.getProperty('innerText').then(p => p.jsonValue())));
+      }
+
+      if (strict) {
+        return allText.map(elText => equals(description)[assertType](text, elText));
+      }
+      return stringIncludes(description)[assertType](text, allText.join(' | '));
+    }
+
+    async function findCheckable(locator, context) {
+      let contextEl = await this.context;
+      if (typeof context === 'string') {
+        contextEl = await findElements.call(this, contextEl, (new Locator(context, 'css')).simplify());
+        contextEl = contextEl[0];
+      }
+
+      const matchedLocator = new Locator(locator);
+      if (!matchedLocator.isFuzzy()) {
+        return findElements.call(this, contextEl, matchedLocator.simplify());
+      }
+
+      const literal = xpathLocator.literal(locator);
+      let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal));
+      if (els.length) {
+        return els;
+      }
+      els = await findElements.call(this, contextEl, Locator.checkable.byName(literal));
+      if (els.length) {
+        return els;
+      }
+      return findElements.call(this, contextEl, locator);
+    }
+
+    async function proceedIsChecked(assertType, option) {
+      let els = await findCheckable.call(this, option);
+      assertElementExists(els, option, 'Checkable');
+      els = await Promise.all(els.map(el => el.getProperty('checked')));
+      els = await Promise.all(els.map(el => el.jsonValue()));
+      const selected = els.reduce((prev, cur) => prev || cur);
+      return truth(`checkable ${option}`, 'to be checked')[assertType](selected);
+    }
+
+    async function findVisibleFields(locator) {
+      const els = await findFields.call(this, locator);
+      const visible = await Promise.all(els.map(el => el.boundingBox()));
+      return els.filter((el, index) => visible[index]);
+    }
+
+    async function findFields(locator) {
+      const matchedLocator = new Locator(locator);
+      if (!matchedLocator.isFuzzy()) {
+        return this._locate(matchedLocator);
+      }
+      const literal = xpathLocator.literal(locator);
+
+      let els = await this._locate({ xpath: Locator.field.labelEquals(literal) });
+      if (els.length) {
+        return els;
+      }
+
+      els = await this._locate({ xpath: Locator.field.labelContains(literal) });
+      if (els.length) {
+        return els;
+      }
+      els = await this._locate({ xpath: Locator.field.byName(literal) });
+      if (els.length) {
+        return els;
+      }
+      return this._locate({ css: locator });
+    }
+
+    async function proceedDragAndDrop(sourceLocator, destinationLocator) {
+      const src = await this._locate(sourceLocator);
+      assertElementExists(src, sourceLocator, 'Source Element');
+
+      const dst = await this._locate(destinationLocator);
+      assertElementExists(dst, destinationLocator, 'Destination Element');
+
+      // Note: Using public api .getClickablePoint becaues the .BoundingBox does not take into account iframe offsets
+      const dragSource = await getClickablePoint(src[0]);
+      const dragDestination = await getClickablePoint(dst[0]);
+
+      // Drag start point
+      await this.page.mouse.move(dragSource.x, dragSource.y, { steps: 5 });
+      await this.page.mouse.down();
+
+      // Drag destination
+      await this.page.mouse.move(dragDestination.x, dragDestination.y, { steps: 5 });
+      await this.page.mouse.up();
+
+      await this._waitForAction();
+    }
+
+    async function proceedSeeInField(assertType, field, value) {
+      const els = await findVisibleFields.call(this, field);
+      assertElementExists(els, field, 'Field');
+      const el = els[0];
+      const tag = await el.getProperty('tagName').then(el => el.jsonValue());
+      const fieldType = await el.getProperty('type').then(el => el.jsonValue());
+
+      const proceedMultiple = async (elements) => {
+        const fields = Array.isArray(elements) ? elements : [elements];
+
+        const elementValues = [];
+        for (const element of fields) {
+          elementValues.push(await element.getProperty('value').then(el => el.jsonValue()));
+        }
+
+        if (typeof value === 'boolean') {
+          equals(`no. of items matching > 0: ${field}`)[assertType](value, !!elementValues.length);
+        } else {
+          if (assertType === 'assert') {
+            equals(`select option by ${field}`)[assertType](true, elementValues.length > 0);
+          }
+          elementValues.forEach(val => stringIncludes(`fields by ${field}`)[assertType](value, val));
+        }
+      };
+
+      if (tag === 'SELECT') {
+        const selectedOptions = await el.$$('option:checked');
+        // locate option by values and check them
+        if (value === '') {
+          return proceedMultiple(selectedOptions);
+        }
+
+        const options = await filterFieldsByValue(selectedOptions, value, true);
+        return proceedMultiple(options);
+      }
+
+      if (tag === 'INPUT') {
+        if (fieldType === 'checkbox' || fieldType === 'radio') {
+          if (typeof value === 'boolean') {
+            // Filter by values
+            const options = await filterFieldsBySelectionState(els, true);
+            return proceedMultiple(options);
+          }
+
+          const options = await filterFieldsByValue(els, value, true);
+          return proceedMultiple(options);
+        }
+        return proceedMultiple(els[0]);
+      }
+      const fieldVal = await el.getProperty('value').then(el => el.jsonValue());
+      return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal);
+    }
+
+    async function filterFieldsByValue(elements, value, onlySelected) {
+      const matches = [];
+      for (const element of elements) {
+        const val = await element.getProperty('value').then(el => el.jsonValue());
+        let isSelected = true;
+        if (onlySelected) {
+          isSelected = await elementSelected(element);
+        }
+        if ((value == null || val.indexOf(value) > -1) && isSelected) {
+          matches.push(element);
+        }
+      }
+      return matches;
+    }
+
+    async function filterFieldsBySelectionState(elements, state) {
+      const matches = [];
+      for (const element of elements) {
+        const isSelected = await elementSelected(element);
+        if (isSelected === state) {
+          matches.push(element);
+        }
+      }
+      return matches;
+    }
+
+    async function elementSelected(element) {
+      const type = await element.getProperty('type').then(el => el.jsonValue());
+
+      if (type === 'checkbox' || type === 'radio') {
+        return element.getProperty('checked').then(el => el.jsonValue());
+      }
+      return element.getProperty('selected').then(el => el.jsonValue());
+    }
+
+    function isFrameLocator(locator) {
+      locator = new Locator(locator);
+      if (locator.isFrame()) return locator.value;
+      return false;
+    }
+
+    function assertElementExists(res, locator, prefix, suffix) {
+      if (!res || res.length === 0) {
+        throw new ElementNotFound(locator, prefix, suffix);
+      }
+    }
+
+    function $XPath(element, selector) {
+      const found = document.evaluate(selector, element || document.body, null, 5, null);
+      const res = [];
+      let current = null;
+      while (current = found.iterateNext()) {
+        res.push(current);
+      }
+      return res;
+    }
+
+    async function targetCreatedHandler(page) {
+      if (!page) return;
+      this.withinLocator = null;
+      page.on('load', () => {
+        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);
+      });
+
+      if (this.options.userAgent) {
+        await page.setUserAgent(this.options.userAgent);
+      }
+      if (this.options.windowSize && this.options.windowSize.indexOf('x') > 0) {
+        const dimensions = this.options.windowSize.split('x');
+        const width = parseInt(dimensions[0], 10);
+        const height = parseInt(dimensions[1], 10);
+        await page.setViewport({ width, height });
+      }
+    }
+
+// BC compatibility for Puppeteer < 10
+    async function getClickablePoint(el) {
+      if (el.clickablePoint) return el.clickablePoint();
+      if (el._clickablePoint) return el._clickablePoint();
+      return null;
+    }
+
+// List of key values to key definitions
+// https://github.com/GoogleChrome/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js
+    const keyDefinitionMap = {
+      /* eslint-disable quote-props */
+      '0': 'Digit0',
+      '1': 'Digit1',
+      '2': 'Digit2',
+      '3': 'Digit3',
+      '4': 'Digit4',
+      '5': 'Digit5',
+      '6': 'Digit6',
+      '7': 'Digit7',
+      '8': 'Digit8',
+      '9': 'Digit9',
+      'a': 'KeyA',
+      'b': 'KeyB',
+      'c': 'KeyC',
+      'd': 'KeyD',
+      'e': 'KeyE',
+      'f': 'KeyF',
+      'g': 'KeyG',
+      'h': 'KeyH',
+      'i': 'KeyI',
+      'j': 'KeyJ',
+      'k': 'KeyK',
+      'l': 'KeyL',
+      'm': 'KeyM',
+      'n': 'KeyN',
+      'o': 'KeyO',
+      'p': 'KeyP',
+      'q': 'KeyQ',
+      'r': 'KeyR',
+      's': 'KeyS',
+      't': 'KeyT',
+      'u': 'KeyU',
+      'v': 'KeyV',
+      'w': 'KeyW',
+      'x': 'KeyX',
+      'y': 'KeyY',
+      'z': 'KeyZ',
+      ';': 'Semicolon',
+      '=': 'Equal',
+      ',': 'Comma',
+      '-': 'Minus',
+      '.': 'Period',
+      '/': 'Slash',
+      '`': 'Backquote',
+      '[': 'BracketLeft',
+      '\\': 'Backslash',
+      ']': 'BracketRight',
+      '\'': 'Quote',
+      /* eslint-enable quote-props */
+    };
+
+    function getNormalizedKey(key) {
+      const normalizedKey = getNormalizedKeyAttributeValue(key);
+      if (key !== normalizedKey) {
+        this.debugSection('Input', `Mapping key '${key}' to '${normalizedKey}'`);
+      }
+      // Use key definition to ensure correct key is displayed when Shift modifier is active
+      if (Object.prototype.hasOwnProperty.call(keyDefinitionMap, normalizedKey)) {
+        return keyDefinitionMap[normalizedKey];
+      }
+      return normalizedKey;
+    }
+
+    if (this.options.highlightElement) {
+      highlightElement(el, this.page);
+    }
+
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
+    if (this.options.highlightElement) {
+      unhighlightElement(el, this.page);
+    }
+
     return this._waitForAction();
   }
 
@@ -2314,12 +5014,22 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
+
+  if (this.options.highlightElement) {
+    highlightElement(els[0], this.page);
+  }
+
   await els[0].click(options);
   const promises = [];
   if (options.waitForNavigation) {
     promises.push(this.waitForNavigation());
   }
   promises.push(this._waitForAction());
+
+  if (this.options.highlightElement) {
+    unhighlightElement(els[0], this.page);
+  }
+
   return Promise.all(promises);
 }
 
diff --git a/lib/helper/scripts/highlightElement.js b/lib/helper/scripts/highlightElement.js
new file mode 100644
index 000000000..0a4764be0
--- /dev/null
+++ b/lib/helper/scripts/highlightElement.js
@@ -0,0 +1,7 @@
+module.exports.highlightElement = (element, context) => {
+  context.evaluate(el => el.style.border = '2px solid red', element);
+};
+
+module.exports.unhighlightElement = (element, context) => {
+  context.evaluate(el => el.style.border = '', element);
+};

From 5afca9adf31b40af52ac7ce4f59c73c83f572f2c Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Wed, 31 May 2023 10:04:22 +0200
Subject: [PATCH 2/2] fix: puppeteer and support wdio

---
 docs/helpers/Puppeteer.md              | 2044 ++++++++++++++++++
 docs/helpers/WebDriver.md              |    9 +-
 lib/helper/Puppeteer.js                | 2691 ------------------------
 lib/helper/WebDriver.js                |   34 +-
 lib/helper/scripts/highlightElement.js |   12 +-
 typings/tslint.json                    |    3 +-
 6 files changed, 2091 insertions(+), 2702 deletions(-)

diff --git a/docs/helpers/Puppeteer.md b/docs/helpers/Puppeteer.md
index 1dba1f05a..74290cd87 100644
--- a/docs/helpers/Puppeteer.md
+++ b/docs/helpers/Puppeteer.md
@@ -58,6 +58,2050 @@ Type: [object][4]
 -   `chrome` **[object][4]?** pass additional [Puppeteer run options][22].
 -   `highlightElement` **[boolean][17]?** highlight the interacting elements
 
+
+
+#### Example #1: Wait for 0 network connections.
+
+```js
+{
+   helpers: {
+     Puppeteer : {
+       url: "http://localhost",
+       restart: false,
+       waitForNavigation: "networkidle0",
+       waitForAction: 500
+     }
+   }
+}
+```
+
+#### Example #2: Wait for DOMContentLoaded event and 0 network connections
+
+```js
+{
+   helpers: {
+     Puppeteer : {
+       url: "http://localhost",
+       restart: false,
+       waitForNavigation: [ "domcontentloaded", "networkidle0" ],
+       waitForAction: 500
+     }
+   }
+}
+```
+
+#### Example #3: Debug in window mode
+
+```js
+{
+   helpers: {
+     Puppeteer : {
+       url: "http://localhost",
+       show: true
+     }
+   }
+}
+```
+
+#### Example #4: Connect to remote browser by specifying [websocket endpoint][3]
+
+```js
+{
+   helpers: {
+     Puppeteer: {
+       url: "http://localhost",
+       chrome: {
+         browserWSEndpoint: "ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a"
+       }
+     }
+   }
+}
+```
+
+> Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
+
+#### Example #5: Target URL with provided basic authentication
+
+```js
+{
+   helpers: {
+     Puppeteer : {
+       url: 'http://localhost',
+       basicAuth: {username: 'username', password: 'password'},
+       show: true
+     }
+   }
+}
+```
+
+#### Troubleshooting
+
+Error Message:  `No usable sandbox!`
+
+When running Puppeteer on CI try to disable sandbox if you see that message
+
+    helpers: {
+     Puppeteer: {
+        url: 'http://localhost',
+        show: false,
+        chrome: {
+          args: ['--no-sandbox', '--disable-setuid-sandbox']
+        }
+      },
+    }
+
+## Access From Helpers
+
+Receive Puppeteer client from a custom helper by accessing `browser` for the Browser object or `page` for the current Page object:
+
+```js
+const { browser } = this.helpers.Puppeteer;
+await browser.pages(); // List of pages in the browser
+
+const { page } = this.helpers.Puppeteer;
+await page.url(); // Get the url of the current page
+```
+
+## Methods
+
+### Parameters
+
+-   `config`  
+
+### _addPopupListener
+
+Add the 'dialog' event listener to a page
+
+#### Parameters
+
+-   `page`  
+
+### _getPageUrl
+
+Gets page URL including hash.
+
+### _locate
+
+Get elements by different locator types, including strict locator
+Should be used in custom helpers:
+
+```js
+const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
+```
+
+
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+#### Parameters
+
+-   `locator`  
+
+### _locateCheckable
+
+Find a checkbox by providing human readable text:
+NOTE: Assumes the checkable element exists
+
+```js
+this.helpers['Puppeteer']._locateCheckable('I agree with terms and conditions').then // ...
+```
+
+#### Parameters
+
+-   `locator`  
+-   `providedContext`   
+
+### _locateClickable
+
+Find a clickable element by providing human readable text:
+
+```js
+this.helpers['Puppeteer']._locateClickable('Next page').then // ...
+```
+
+#### Parameters
+
+-   `locator`  
+
+### _locateFields
+
+Find field elements by providing human readable text:
+
+```js
+this.helpers['Puppeteer']._locateFields('Your email').then // ...
+```
+
+#### Parameters
+
+-   `locator`  
+
+### _setPage
+
+Set current page
+
+#### Parameters
+
+-   `page` **[object][4]** page to set
+
+### acceptPopup
+
+Accepts the active JavaScript native popup window, as created by window.alert|window.confirm|window.prompt.
+Don't confuse popups with modal windows, as created by [various
+libraries][5].
+
+### amAcceptingPopups
+
+Set the automatic popup response to Accept.
+This must be set before a popup is triggered.
+
+```js
+I.amAcceptingPopups();
+I.click('#triggerPopup');
+I.acceptPopup();
+```
+
+### amCancellingPopups
+
+Set the automatic popup response to Cancel/Dismiss.
+This must be set before a popup is triggered.
+
+```js
+I.amCancellingPopups();
+I.click('#triggerPopup');
+I.cancelPopup();
+```
+
+### amOnPage
+
+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
+```
+
+#### Parameters
+
+-   `url` **[string][6]** url path or global url.
+
+Returns **void** automatically synchronized promise with recorder #!
+
+### appendField
+
+Appends text to a input field or textarea.
+Field is located by name, label, CSS or XPath
+
+```js
+I.appendField('#myTextField', 'appended');
+// typing secret
+I.appendField('password', secret('123456'));
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator
+-   `value` **[string][6]** text value to append.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### attachFile
+
+Attaches a file to element located by label, name, CSS or XPath
+Path to file is relative current codecept directory (where codecept.conf.ts 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');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
+-   `pathToFile` **[string][6]** local file path relative to codecept.conf.ts or codecept.conf.js config file.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder> ⚠ There is an [issue with file upload in Puppeteer 2.1.0 & 2.1.1][7], downgrade to 2.0.0 if you face it.
+
+### cancelPopup
+
+Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.
+
+### checkOption
+
+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');
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** checkbox located by label | name | CSS | XPath | strict locator.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS | XPath | strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### clearCookie
+
+Clears a cookie by name,
+if none provided clears all cookies.
+
+```js
+I.clearCookie();
+I.clearCookie('test');
+```
+
+#### Parameters
+
+-   `name`  
+-   `cookie` **[string][6]?** (optional, `null` by default) cookie name
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### clearField
+
+Clears a `<textarea>` or text `<input>` element's value.
+
+```js
+I.clearField('Email');
+I.clearField('user[email]');
+I.clearField('#email');
+```
+
+#### Parameters
+
+-   `field`  
+-   `editable` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder.
+
+### click
+
+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'});
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+-   `context` **([string][6]? | [object][4] | null)** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### clickLink
+
+Performs a click on a link and waits for navigation before moving on.
+
+```js
+I.clickLink('Logout', '#nav');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### closeCurrentTab
+
+Close current tab and switches to previous.
+
+```js
+I.closeCurrentTab();
+```
+
+### closeOtherTabs
+
+Close all tabs except for the current one.
+
+```js
+I.closeOtherTabs();
+```
+
+### dontSee
+
+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.
+I.dontSee('Login', '.nav'); // no login inside .nav element
+```
+
+#### Parameters
+
+-   `text` **[string][6]** which is not present.
+-   `context` **([string][6] | [object][4])?** (optional) element located by CSS|XPath|strict locator in which to perfrom search.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### dontSeeCheckboxIsChecked
+
+Verifies that the specified checkbox is not checked.
+
+```js
+I.dontSeeCheckboxIsChecked('#agree'); // located by ID
+I.dontSeeCheckboxIsChecked('I agree to terms'); // located by label
+I.dontSeeCheckboxIsChecked('agree'); // located by name
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeCookie
+
+Checks that cookie with given name does not exist.
+
+```js
+I.dontSeeCookie('auth'); // no auth cookie
+```
+
+#### Parameters
+
+-   `name` **[string][6]** cookie name.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeCurrentUrlEquals
+
+Checks that current url is not equal to provided one.
+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
+```
+
+#### Parameters
+
+-   `url` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeElement
+
+Opposite to `seeElement`. Checks that element is not visible (or in DOM)
+
+```js
+I.dontSeeElement('.modal'); // modal is not shown
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|Strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### dontSeeElementInDOM
+
+Opposite to `seeElementInDOM`. Checks that element is not on page.
+
+```js
+I.dontSeeElementInDOM('.nav'); // checks that element is not on page visible or not
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|Strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeInCurrentUrl
+
+Checks that current url does not contain a provided fragment.
+
+#### Parameters
+
+-   `url` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeInField
+
+Checks that value of input field or textarea doesn't equal to given value
+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
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+-   `value` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeInSource
+
+Checks that the current page does not contains the given string in its raw source code.
+
+```js
+I.dontSeeInSource('<!--'); // no comments in source
+```
+
+#### Parameters
+
+-   `text`  
+-   `value` **[string][6]** to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dontSeeInTitle
+
+Checks that title does not contain text.
+
+```js
+I.dontSeeInTitle('Error');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### doubleClick
+
+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');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### downloadFile
+
+This method is **deprecated**.
+
+Please use `handleDownloads()` instead.
+
+#### Parameters
+
+-   `locator`  
+-   `customName`  
+
+### dragAndDrop
+
+Drag an item to a destination element.
+
+```js
+I.dragAndDrop('#dragHandle', '#container');
+```
+
+#### Parameters
+
+-   `srcElement` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+-   `destElement` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### dragSlider
+
+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);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+-   `offsetX` **[number][8]** position to drag.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### executeAsyncScript
+
+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][9].
+
+```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/');
+```
+
+#### Parameters
+
+-   `args` **...any** to be passed to function.
+    ⚠️ returns a _promise_ which is synchronized internally by recorderAsynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
+-   `fn` **([string][6] | [function][10])** function to be executed in browser context.
+
+### executeScript
+
+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
+```
+
+#### Parameters
+
+-   `args` **...any** to be passed to function.
+    ⚠️ returns a _promise_ which is synchronized internally by recorderIf a function returns a Promise It will wait for it resolution.
+-   `fn` **([string][6] | [function][10])** function to be executed in browser context.
+
+### fillField
+
+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');
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+-   `value` **([string][6] | [object][4])** text value to fill.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### forceClick
+
+Perform an emulated click on a link or a button, given by a locator.
+Unlike normal click instead of sending native event, emulates a click with JavaScript.
+This works on hidden, animated or inactive elements as well.
+
+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.forceClick('Logout');
+// button of form
+I.forceClick('Submit');
+// CSS button
+I.forceClick('#form input[type=submit]');
+// XPath
+I.forceClick('//form/*[@type=submit]');
+// link in context
+I.forceClick('Logout', '#nav');
+// using strict locator
+I.forceClick({css: 'nav a.login'});
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### grabAttributeFrom
+
+Retrieves an attribute 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.
+If more than one element is found - attribute of first element is returned.
+
+```js
+let hint = await I.grabAttributeFrom('#tooltip', 'title');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `attr` **[string][6]** attribute name.
+
+Returns **[Promise][11]&lt;[string][6]>** attribute value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabAttributeFromAll
+
+Retrieves an array of attributes from elements located by CSS or XPath and returns it to test.
+Resumes test execution, so **should be used inside async with `await`** operator.
+
+```js
+let hints = await I.grabAttributeFromAll('.tooltip', 'title');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `attr` **[string][6]** attribute name.
+
+Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabBrowserLogs
+
+Get JS log from browser.
+
+```js
+let logs = await I.grabBrowserLogs();
+console.log(JSON.stringify(logs))
+```
+
+Returns **[Promise][11]&lt;[Array][12]&lt;any>>** 
+
+### grabCookie
+
+Gets a cookie object by name.
+If none provided gets all cookies.
+Resumes test execution, so **should be used inside async function with `await`** operator.
+
+```js
+let cookie = await I.grabCookie('auth');
+assert(cookie.value, '123456');
+```
+
+#### Parameters
+
+-   `name` **[string][6]?** cookie name. 
+
+Returns **([Promise][11]&lt;[string][6]> | [Promise][11]&lt;[Array][12]&lt;[string][6]>>)** attribute valueReturns cookie in JSON format. If name not passed returns all cookies for this domain.
+
+### grabCssPropertyFrom
+
+Grab CSS property for given locator
+Resumes test execution, so **should be used inside an async function with `await`** operator.
+If more than one element is found - value of first element is returned.
+
+```js
+const value = await I.grabCssPropertyFrom('h3', 'font-weight');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `cssProperty` **[string][6]** CSS property name.
+
+Returns **[Promise][11]&lt;[string][6]>** CSS value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabCssPropertyFromAll
+
+Grab array of CSS properties for given locator
+Resumes test execution, so **should be used inside an async function with `await`** operator.
+
+```js
+const values = await I.grabCssPropertyFromAll('h3', 'font-weight');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `cssProperty` **[string][6]** CSS property name.
+
+Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** CSS value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabCurrentUrl
+
+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}]`);
+```
+
+Returns **[Promise][11]&lt;[string][6]>** current URL
+
+### grabDataFromPerformanceTiming
+
+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
+}
+```
+
+Returns **[Promise][11]&lt;any>** automatically synchronized promise through #recorder
+
+### grabElementBoundingRect
+
+Grab the width, height, location of given locator.
+Provide `width` or `height`as second param to get your desired prop.
+Resumes test execution, so **should be used inside an async function with `await`** operator.
+
+Returns an object with `x`, `y`, `width`, `height` keys.
+
+```js
+const value = await I.grabElementBoundingRect('h3');
+// value is like { x: 226.5, y: 89, width: 527, height: 220 }
+```
+
+To get only one metric use second parameter:
+
+```js
+const width = await I.grabElementBoundingRect('h3', 'width');
+// width == 527
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `prop`  
+-   `elementSize` **[string][6]?** x, y, width or height of the given element.
+
+Returns **([Promise][11]&lt;DOMRect> | [Promise][11]&lt;[number][8]>)** Element bounding rectangle
+
+### grabHTMLFrom
+
+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 - HTML of first element is returned.
+
+```js
+let postHTML = await I.grabHTMLFrom('#post');
+```
+
+#### Parameters
+
+-   `locator`  
+-   `element` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[string][6]>** HTML code for an element
+
+### grabHTMLFromAll
+
+Retrieves all the innerHTML from elements 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 postHTMLs = await I.grabHTMLFromAll('.post');
+```
+
+#### Parameters
+
+-   `locator`  
+-   `element` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** HTML code for an element
+
+### grabNumberOfOpenTabs
+
+Grab number of open tabs.
+Resumes test execution, so **should be used inside async function with `await`** operator.
+
+```js
+let tabs = await I.grabNumberOfOpenTabs();
+```
+
+Returns **[Promise][11]&lt;[number][8]>** number of open tabs
+
+### grabNumberOfVisibleElements
+
+Grab number of visible elements by locator.
+Resumes test execution, so **should be used inside async function with `await`** operator.
+
+```js
+let numOfElements = await I.grabNumberOfVisibleElements('p');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[number][8]>** number of visible elements
+
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabPageScrollPosition
+
+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();
+```
+
+Returns **[Promise][11]&lt;PageScrollPosition>** scroll position
+
+### grabPopupText
+
+Grab the text within the popup. If no popup is visible then it will return null
+
+```js
+await I.grabPopupText();
+```
+
+Returns **[Promise][11]&lt;([string][6] | null)>** 
+
+### grabSource
+
+Retrieves page source and returns it to test.
+Resumes test execution, so **should be used inside async function with `await`** operator.
+
+```js
+let pageSource = await I.grabSource();
+```
+
+Returns **[Promise][11]&lt;[string][6]>** source code
+
+### grabTextFrom
+
+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 first element.
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[string][6]>** attribute value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabTextFromAll
+
+Retrieves all texts 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 pins = await I.grabTextFromAll('#pin li');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### grabTitle
+
+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();
+```
+
+Returns **[Promise][11]&lt;[string][6]>** title
+
+### grabValueFrom
+
+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.
+If more than one element is found - value of first element is returned.
+
+```js
+let email = await I.grabValueFrom('input[name=email]');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[string][6]>** attribute value
+
+### grabValueFromAll
+
+Retrieves an array of value from a form 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 inputs = await I.grabValueFromAll('//form/input');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
+
+Returns **[Promise][11]&lt;[Array][12]&lt;[string][6]>>** attribute value
+
+### handleDownloads
+
+Sets a directory to where save files. Allows to test file downloads.
+Should be used with [FileSystem helper][13] 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');
+```
+
+#### Parameters
+
+-   `downloadPath` **[string][6]** change this parameter to set another directory for saving 
+
+### haveRequestHeaders
+
+Set headers for all next requests
+
+```js
+I.haveRequestHeaders({
+   'X-Sent-By': 'CodeceptJS',
+});
+```
+
+#### Parameters
+
+-   `customHeaders` **[object][4]** headers to set
+
+### moveCursorTo
+
+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);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+-   `offsetX` **[number][8]** (optional, `0` by default) X-axis offset. 
+-   `offsetY` **[number][8]** (optional, `0` by default) Y-axis offset.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### openNewTab
+
+Open new tab and switch to it
+
+```js
+I.openNewTab();
+```
+
+### pressKey
+
+Presses a key in the browser (on a focused element).
+
+_Hint:_ For populating text field or textarea, it is recommended to use [`fillField`][14].
+
+```js
+I.pressKey('Backspace');
+```
+
+To press a key in combination with modifier keys, pass the sequence as an array. All modifier keys (`'Alt'`, `'Control'`, `'Meta'`, `'Shift'`) will be released afterwards.
+
+```js
+I.pressKey(['Control', 'Z']);
+```
+
+For specifying operation modifier key based on operating system it is suggested to use `'CommandOrControl'`.
+This will press `'Command'` (also known as `'Meta'`) on macOS machines and `'Control'` on non-macOS machines.
+
+```js
+I.pressKey(['CommandOrControl', 'Z']);
+```
+
+Some of the supported key names are:
+
+-   `'AltLeft'` or `'Alt'`
+-   `'AltRight'`
+-   `'ArrowDown'`
+-   `'ArrowLeft'`
+-   `'ArrowRight'`
+-   `'ArrowUp'`
+-   `'Backspace'`
+-   `'Clear'`
+-   `'ControlLeft'` or `'Control'`
+-   `'ControlRight'`
+-   `'Command'`
+-   `'CommandOrControl'`
+-   `'Delete'`
+-   `'End'`
+-   `'Enter'`
+-   `'Escape'`
+-   `'F1'` to `'F12'`
+-   `'Home'`
+-   `'Insert'`
+-   `'MetaLeft'` or `'Meta'`
+-   `'MetaRight'`
+-   `'Numpad0'` to `'Numpad9'`
+-   `'NumpadAdd'`
+-   `'NumpadDecimal'`
+-   `'NumpadDivide'`
+-   `'NumpadMultiply'`
+-   `'NumpadSubtract'`
+-   `'PageDown'`
+-   `'PageUp'`
+-   `'Pause'`
+-   `'Return'`
+-   `'ShiftLeft'` or `'Shift'`
+-   `'ShiftRight'`
+-   `'Space'`
+-   `'Tab'`
+
+#### Parameters
+
+-   `key` **([string][6] | [Array][12]&lt;[string][6]>)** key or array of keys to press.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder_Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/puppeteer#1313][15]).
+
+### pressKeyDown
+
+Presses a key in the browser and leaves it in a down state.
+
+To make combinations with modifier key and user operation (e.g. `'Control'` + [`click`][16]).
+
+```js
+I.pressKeyDown('Control');
+I.click('#element');
+I.pressKeyUp('Control');
+```
+
+#### Parameters
+
+-   `key` **[string][6]** name of key to press down.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### pressKeyUp
+
+Releases a key in the browser which was previously set to a down state.
+
+To make combinations with modifier key and user operation (e.g. `'Control'` + [`click`][16]).
+
+```js
+I.pressKeyDown('Control');
+I.click('#element');
+I.pressKeyUp('Control');
+```
+
+#### Parameters
+
+-   `key` **[string][6]** name of key to release.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### refreshPage
+
+Reload the current page.
+
+```js
+I.refreshPage();
+```
+
+⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### resizeWindow
+
+Resize the current window to provided width and height.
+First parameter can be set to `maximize`.
+
+#### Parameters
+
+-   `width` **[number][8]** width in pixels or `maximize`.
+-   `height` **[number][8]** height in pixels.
+    ⚠️ returns a _promise_ which is synchronized internally by recorderUnlike 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.
+    It also can't maximize a window.
+
+### rightClick
+
+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');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** clickable element located by CSS|XPath|strict locator.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### saveElementScreenshot
+
+Saves screenshot of the specified locator to ouput folder (set in codecept.conf.ts or codecept.conf.js).
+Filename is relative to output folder.
+
+```js
+I.saveElementScreenshot(`#submit`,'debug.png');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `fileName` **[string][6]** file name to save.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### saveScreenshot
+
+Saves a screenshot to ouput folder (set in codecept.conf.ts 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
+```
+
+#### Parameters
+
+-   `fileName` **[string][6]** file name to save.
+-   `fullPage` **[boolean][17]** (optional, `false` by default) flag to enable fullscreen screenshot mode.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### scrollPageToBottom
+
+Scroll page to the bottom.
+
+```js
+I.scrollPageToBottom();
+```
+
+⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### scrollPageToTop
+
+Scroll page to the top.
+
+```js
+I.scrollPageToTop();
+```
+
+⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### scrollTo
+
+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);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+-   `offsetX` **[number][8]** (optional, `0` by default) X-axis offset. 
+-   `offsetY` **[number][8]** (optional, `0` by default) Y-axis offset.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### see
+
+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
+```
+
+#### Parameters
+
+-   `text` **[string][6]** expected on page.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|Xpath|strict locator in which to search for text.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### seeAttributesOnElements
+
+Checks that all elements with given locator have given attributes.
+
+```js
+I.seeAttributesOnElements('//form', { method: "post"});
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+-   `attributes` **[object][4]** attributes and their values to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### seeCheckboxIsChecked
+
+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]'});
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeCookie
+
+Checks that cookie with given name exists.
+
+```js
+I.seeCookie('Auth');
+```
+
+#### Parameters
+
+-   `name` **[string][6]** cookie name.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeCssPropertiesOnElements
+
+Checks that all elements with given locator have given CSS properties.
+
+```js
+I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+-   `cssProperties` **[object][4]** object with CSS properties and their values to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### seeCurrentUrlEquals
+
+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');
+```
+
+#### Parameters
+
+-   `url` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeElement
+
+Checks that a given Element is visible
+Element is located by CSS or XPath.
+
+```js
+I.seeElement('#modal');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### seeElementInDOM
+
+Checks that a given Element is present in the DOM
+Element is located by CSS or XPath.
+
+```js
+I.seeElementInDOM('#modal');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeInCurrentUrl
+
+Checks that current url contains a provided fragment.
+
+```js
+I.seeInCurrentUrl('/register'); // we are on registration page
+```
+
+#### Parameters
+
+-   `url` **[string][6]** a fragment to check
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeInField
+
+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');
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** located by label|name|CSS|XPath|strict locator.
+-   `value` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeInPopup
+
+Checks that the active JavaScript popup, as created by `window.alert|window.confirm|window.prompt`, contains the
+given string.
+
+```js
+I.seeInPopup('Popup text');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeInSource
+
+Checks that the current page contains the given string in its raw source code.
+
+```js
+I.seeInSource('<h1>Green eggs &amp; ham</h1>');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeInTitle
+
+Checks that title contains text.
+
+```js
+I.seeInTitle('Home Page');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** text value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### seeNumberOfElements
+
+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);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `num` **[number][8]** number of elements.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### seeNumberOfVisibleElements
+
+Asserts that an element is visible a given number of times.
+Element is located by CSS or XPath.
+
+```js
+I.seeNumberOfVisibleElements('.buttons', 3);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `num` **[number][8]** number of elements.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### seeTextEquals
+
+Checks that text is equal to provided one.
+
+```js
+I.seeTextEquals('text', 'h1');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** element value to check.
+-   `context` **([string][6] | [object][4])?** element located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### seeTitleEquals
+
+Checks that title is equal to provided one.
+
+```js
+I.seeTitleEquals('Test title.');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** value to check.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### selectOption
+
+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']);
+```
+
+#### Parameters
+
+-   `select` **([string][6] | [object][4])** field located by label|name|CSS|XPath|strict locator.
+-   `option` **([string][6] | [Array][12]&lt;any>)** visible text or value of option.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### setCookie
+
+Sets cookie(s).
+
+Can be a single cookie object or an array of cookies:
+
+```js
+I.setCookie({name: 'auth', value: true});
+
+// as array
+I.setCookie([
+  {name: 'auth', value: true},
+  {name: 'agree', value: true}
+]);
+```
+
+#### Parameters
+
+-   `cookie` **(Cookie | [Array][12]&lt;Cookie>)** a cookie object or array of cookie objects.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### switchTo
+
+Switches frame or in case of null locator reverts to parent.
+
+```js
+I.switchTo('iframe'); // switch to first iframe
+I.switchTo(); // switch back to main page
+```
+
+#### Parameters
+
+-   `locator` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### switchToNextTab
+
+Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
+
+```js
+I.switchToNextTab();
+I.switchToNextTab(2);
+```
+
+#### Parameters
+
+-   `num` **[number][8]**  
+
+### switchToPreviousTab
+
+Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
+
+```js
+I.switchToPreviousTab();
+I.switchToPreviousTab(2);
+```
+
+#### Parameters
+
+-   `num` **[number][8]**  
+
+### type
+
+Types out the given text into an active field.
+To slow down typing use a second parameter, to set interval between key presses.
+_Note:_ Should be used when [`fillField`][14] is not an option.
+
+```js
+// passing in a string
+I.type('Type this out.');
+
+// typing values with a 100ms interval
+I.type('4141555311111111', 100);
+
+// passing in an array
+I.type(['T', 'E', 'X', 'T']);
+
+// passing a secret
+I.type(secret('123456'));
+```
+
+#### Parameters
+
+-   `keys`  
+-   `delay` **[number][8]?** (optional) delay in ms between key presses
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+-   `key` **([string][6] | [Array][12]&lt;[string][6]>)** or array of keys to type.
+
+### uncheckOption
+
+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');
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** checkbox located by label | name | CSS | XPath | strict locator.
+-   `context` **([string][6]? | [object][4])** (optional, `null` by default) element located by CSS | XPath | strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### usePuppeteerTo
+
+Use Puppeteer API inside a test.
+
+First argument is a description of an action.
+Second argument is async function that gets this helper as parameter.
+
+{ [`page`][18], [`browser`][19] } from Puppeteer API are available.
+
+```js
+I.usePuppeteerTo('emulate offline mode', async ({ page }) {
+  await page.setOfflineMode(true);
+});
+```
+
+#### Parameters
+
+-   `description` **[string][6]** used to show in logs.
+-   `fn` **[function][10]** async function that is executed with Puppeteer as argument
+
+### wait
+
+Pauses execution for a number of seconds.
+
+```js
+I.wait(2); // wait 2 secs
+```
+
+#### Parameters
+
+-   `sec` **[number][8]** number of second to wait.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### waitForClickable
+
+Waits for element to be clickable (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitForClickable('.btn.continue');
+I.waitForClickable('.btn.continue', 5); // wait for 5 secs
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `waitTimeout`  
+-   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+### waitForDetached
+
+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.
+
+```js
+I.waitForDetached('#popup');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForElement
+
+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
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+
+
+### waitForEnabled
+
+Waits for element to become enabled (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]** (optional) time in seconds to wait, 1 by default.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForFunction
+
+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
+```
+
+#### Parameters
+
+-   `fn` **([string][6] | [function][10])** to be executed in browser context.
+-   `argsOrSec` **([Array][12]&lt;any> | [number][8])?** (optional, `1` by default) arguments for function or seconds. 
+-   `sec` **[number][8]?** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForInvisible
+
+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.
+
+```js
+I.waitForInvisible('#popup');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForNavigation
+
+Waits for navigation to finish. By default takes configured `waitForNavigation` option.
+
+See [Pupeteer's reference][20]
+
+#### Parameters
+
+-   `opts` **any**  
+
+### waitForRequest
+
+Waits for a network request.
+
+```js
+I.waitForRequest('http://example.com/resource');
+I.waitForRequest(request => request.url() === 'http://example.com' && request.method() === 'GET');
+```
+
+#### Parameters
+
+-   `urlOrPredicate` **([string][6] | [function][10])** 
+-   `sec` **[number][8]?** seconds to wait 
+
+### waitForResponse
+
+Waits for a network response.
+
+```js
+I.waitForResponse('http://example.com/resource');
+I.waitForResponse(response => response.url() === 'http://example.com' && response.request().method() === 'GET');
+```
+
+#### Parameters
+
+-   `urlOrPredicate` **([string][6] | [function][10])** 
+-   `sec` **[number][8]?** number of seconds to wait 
+
+### waitForText
+
+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');
+```
+
+#### Parameters
+
+-   `text` **[string][6]** to wait for.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait 
+-   `context` **([string][6] | [object][4])?** (optional) element located by CSS|XPath|strict locator.
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForValue
+
+Waits for the specified value to be in value attribute.
+
+```js
+I.waitForValue('//input', "GoodValue");
+```
+
+#### Parameters
+
+-   `field` **([string][6] | [object][4])** input field.
+-   `value` **[string][6]** expected value.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitForVisible
+
+Waits for an element to become visible on a page (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitForVisible('#popup');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorderThis method accepts [React selectors][21]. 
+
+### waitInUrl
+
+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);
+```
+
+#### Parameters
+
+-   `urlPart` **[string][6]** value to check.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitNumberOfVisibleElements
+
+Waits for a specified number of elements on the page.
+
+```js
+I.waitNumberOfVisibleElements('a', 3);
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `num` **[number][8]** number of elements.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder
+
+
+This action supports [React locators](https://codecept.io/react#locators)
+ 
+
+### waitToHide
+
+Waits for an element to hide (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitToHide('#popup');
+```
+
+#### Parameters
+
+-   `locator` **([string][6] | [object][4])** element located by CSS|XPath|strict locator.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
+### waitUrlEquals
+
+Waits for the entire URL to match the expected
+
+```js
+I.waitUrlEquals('/info', 2);
+I.waitUrlEquals('http://127.0.0.1:8000/info');
+```
+
+#### Parameters
+
+-   `urlPart` **[string][6]** value to check.
+-   `sec` **[number][8]** (optional, `1` by default) time in seconds to wait
+    ⚠️ returns a _promise_ which is synchronized internally by recorder 
+
 [1]: https://github.com/GoogleChrome/puppeteer
 
 [2]: https://codecept.io/helpers/Puppeteer-firefox
diff --git a/docs/helpers/WebDriver.md b/docs/helpers/WebDriver.md
index 127cefb6c..83be16919 100644
--- a/docs/helpers/WebDriver.md
+++ b/docs/helpers/WebDriver.md
@@ -27,7 +27,7 @@ Type: [object][16]
 ### Properties
 
 -   `url` **[string][17]** base url of website to be tested.
--   `browser` **[string][17]** browser in which to perform testing.
+-   `browser` **[string][17]** Browser in which to perform testing.
 -   `basicAuth` **[string][17]?** (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
 -   `host` **[string][17]?** WebDriver host to connect.
 -   `port` **[number][20]?** WebDriver port to connect.
@@ -45,6 +45,7 @@ Type: [object][16]
 -   `desiredCapabilities` **[object][16]?** Selenium's [desired capabilities][6].
 -   `manualStart` **[boolean][29]?** do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
 -   `timeouts` **[object][16]?** [WebDriver timeouts][34] defined as hash.
+-   `highlightElement` **[boolean][29]?** highlight the interacting elements
 
 
 
@@ -382,7 +383,7 @@ this.helpers['WebDriver']._locate({name: 'password'}).then //...
 
 ### _locateCheckable
 
-Find a checkbox by providing human readable text:
+Find a checkbox by providing human-readable text:
 
 ```js
 this.helpers['WebDriver']._locateCheckable('I agree with terms and conditions').then // ...
@@ -394,7 +395,7 @@ this.helpers['WebDriver']._locateCheckable('I agree with terms and conditions').
 
 ### _locateClickable
 
-Find a clickable element by providing human readable text:
+Find a clickable element by providing human-readable text:
 
 ```js
 const els = await this.helpers.WebDriver._locateClickable('Next page');
@@ -408,7 +409,7 @@ const els = await this.helpers.WebDriver._locateClickable('Next page', '.pages')
 
 ### _locateFields
 
-Find field elements by providing human readable text:
+Find field elements by providing human-readable text:
 
 ```js
 this.helpers['WebDriver']._locateFields('Your email').then // ...
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index 2313b354a..f5c0a1581 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -1289,2705 +1289,14 @@ class Puppeteer extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
-    const axios = require('axios');
-    const fs = require('fs');
-    const fsExtra = require('fs-extra');
-    const path = require('path');
-
-    const Helper = require('@codeceptjs/helper');
-    const Locator = require('../locator');
-    const recorder = require('../recorder');
-    const stringIncludes = require('../assert/include').includes;
-    const { urlEquals } = require('../assert/equal');
-    const { equals } = require('../assert/equal');
-    const { empty } = require('../assert/empty');
-    const { truth } = require('../assert/truth');
-    const isElementClickable = require('./scripts/isElementClickable');
-    const {
-      xpathLocator,
-      ucfirst,
-      fileExists,
-      chunkArray,
-      toCamelCase,
-      convertCssPropertiesToCamelCase,
-      screenshotOutputFolder,
-      getNormalizedKeyAttributeValue,
-      isModifierKey,
-      requireWithFallback,
-    } = require('../utils');
-    const {
-      isColorProperty,
-      convertColorToRGBA,
-    } = require('../colorUtils');
-    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 { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
-
-    let puppeteer;
-    let perfTiming;
-    const popupStore = new Popup();
-    const consoleLogStore = new Console();
-
-    /**
-     * ## Configuration
-     *
-     * This helper should be configured in codecept.conf.js
-     *
-     * @typedef PuppeteerConfig
-     * @type {object}
-     * @prop {string} url - base url of website to be tested
-     * @prop {object} [basicAuth] (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
-     * @prop {boolean} [show] - show Google Chrome window for debug.
-     * @prop {boolean} [restart=true] - restart browser between tests.
-     * @prop {boolean} [disableScreenshots=false]  - don't save screenshot on failure.
-     * @prop {boolean} [fullPageScreenshots=false] - make full page screenshots on failure.
-     * @prop {boolean} [uniqueScreenshotNames=false]  - option to prevent screenshot override if you have scenarios with the same name in different suites.
-     * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to false.
-     * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to false.
-     * @prop {number} [waitForAction=100] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
-     * @prop {string} [waitForNavigation=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.
-     * @prop {number} [pressKeyDelay=10] - delay between key presses in ms. Used when calling Puppeteers page.type(...) in fillField/appendField
-     * @prop {number} [getPageTimeout=30000] - config option to set maximum navigation time in milliseconds. If the timeout is set to 0, then timeout will be disabled.
-     * @prop {number} [waitForTimeout=1000] - default wait* timeout in ms.
-     * @prop {string} [windowSize] - default window size. Set a dimension in format WIDTHxHEIGHT like `640x480`.
-     * @prop {string} [userAgent] - user-agent string.
-     * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
-     * @prop {string} [browser=chrome] - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
-     * @prop {object} [chrome] - pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
-     * @prop {boolean} [highlightElement] - highlight the interacting elements
-     */
-    const config = {};
-
-    /**
-     * Uses [Google Chrome's Puppeteer](https://github.com/GoogleChrome/puppeteer) library to run tests inside headless Chrome.
-     * Browser control is executed via DevTools Protocol (instead of Selenium).
-     * This helper works with a browser out of the box with no additional tools required to install.
-     *
-     * Requires `puppeteer` or `puppeteer-core` package to be installed.
-     * ```
-     * npm i puppeteer --save
-     * ```
-     * or
-     * ```
-     * npm i puppeteer-core --save
-     * ```
-     * Using `puppeteer-core` package, will prevent the download of browser binaries and allow connecting to an existing browser installation or for connecting to a remote one.
-     *
-     * > Experimental Firefox support [can be activated](https://codecept.io/helpers/Puppeteer-firefox).
-     *
-     * <!-- configuration -->
-     *
-     * #### Example #1: Wait for 0 network connections.
-     *
-     * ```js
-     * {
-     *    helpers: {
-     *      Puppeteer : {
-     *        url: "http://localhost",
-     *        restart: false,
-     *        waitForNavigation: "networkidle0",
-     *        waitForAction: 500
-     *      }
-     *    }
-     * }
-     * ```
-     *
-     * #### Example #2: Wait for DOMContentLoaded event and 0 network connections
-     *
-     * ```js
-     * {
-     *    helpers: {
-     *      Puppeteer : {
-     *        url: "http://localhost",
-     *        restart: false,
-     *        waitForNavigation: [ "domcontentloaded", "networkidle0" ],
-     *        waitForAction: 500
-     *      }
-     *    }
-     * }
-     * ```
-     *
-     * #### Example #3: Debug in window mode
-     *
-     * ```js
-     * {
-     *    helpers: {
-     *      Puppeteer : {
-     *        url: "http://localhost",
-     *        show: true
-     *      }
-     *    }
-     * }
-     * ```
-     *
-     * #### Example #4: Connect to remote browser by specifying [websocket endpoint](https://chromedevtools.github.io/devtools-protocol/#how-do-i-access-the-browser-target)
-     *
-     * ```js
-     * {
-     *    helpers: {
-     *      Puppeteer: {
-     *        url: "http://localhost",
-     *        chrome: {
-     *          browserWSEndpoint: "ws://localhost:9222/devtools/browser/c5aa6160-b5bc-4d53-bb49-6ecb36cd2e0a"
-     *        }
-     *      }
-     *    }
-     * }
-     * ```
-     * > Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
-     *
-     * #### Example #5: Target URL with provided basic authentication
-     *
-     * ```js
-     * {
-     *    helpers: {
-     *      Puppeteer : {
-     *        url: 'http://localhost',
-     *        basicAuth: {username: 'username', password: 'password'},
-     *        show: true
-     *      }
-     *    }
-     * }
-     * ```
-     * #### Troubleshooting
-     *
-     * Error Message:  `No usable sandbox!`
-     *
-     * When running Puppeteer on CI try to disable sandbox if you see that message
-     *
-     * ```
-     * helpers: {
-     *  Puppeteer: {
-     *     url: 'http://localhost',
-     *     show: false,
-     *     chrome: {
-     *       args: ['--no-sandbox', '--disable-setuid-sandbox']
-     *     }
-     *   },
-     * }
-     * ```
-     *
-     *
-     *
-     * ## Access From Helpers
-     *
-     * Receive Puppeteer client from a custom helper by accessing `browser` for the Browser object or `page` for the current Page object:
-     *
-     * ```js
-     * const { browser } = this.helpers.Puppeteer;
-     * await browser.pages(); // List of pages in the browser
-     *
-     * const { page } = this.helpers.Puppeteer;
-     * await page.url(); // Get the url of the current page
-     * ```
-     *
-     * ## Methods
-     */
-    class Puppeteer extends Helper {
-      constructor(config) {
-        super(config);
-
-        puppeteer = requireWithFallback('puppeteer', 'puppeteer-core');
-        // set defaults
-        this.isRemoteBrowser = false;
-        this.isRunning = false;
-        this.isAuthenticated = false;
-        this.sessionPages = {};
-        this.activeSessionName = '';
-
-        // override defaults with config
-        this._setConfig(config);
-      }
-
-      _validateConfig(config) {
-        const defaults = {
-          browser: 'chrome',
-          waitForAction: 100,
-          waitForTimeout: 1000,
-          pressKeyDelay: 10,
-          fullPageScreenshots: false,
-          disableScreenshots: false,
-          uniqueScreenshotNames: false,
-          manualStart: false,
-          getPageTimeout: 30000,
-          waitForNavigation: 'load',
-          restart: true,
-          keepCookies: false,
-          keepBrowserState: false,
-          show: false,
-          defaultPopupAction: 'accept',
-        };
-
-        return Object.assign(defaults, config);
-      }
-
-      _getOptions(config) {
-        return config.browser === 'firefox' ? Object.assign(this.options.firefox, { product: 'firefox' }) : this.options.chrome;
-      }
-
-      _setConfig(config) {
-        this.options = this._validateConfig(config);
-        this.puppeteerOptions = {
-          headless: !this.options.show,
-          ...this._getOptions(config),
-        };
-        this.isRemoteBrowser = !!this.puppeteerOptions.browserWSEndpoint;
-        popupStore.defaultAction = this.options.defaultPopupAction;
-      }
-
-      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',
-          },
-          {
-            name: 'windowSize', message: 'Browser viewport size', default: '1200x900',
-          },
-        ];
-      }
-
-      static _checkRequirements() {
-        try {
-          requireWithFallback('puppeteer', 'puppeteer-core');
-        } catch (e) {
-          return ['puppeteer'];
-        }
-      }
-
-      _init() {
-      }
-
-      _beforeSuite() {
-        if (!this.options.restart && !this.options.manualStart && !this.isRunning) {
-          this.debugSection('Session', 'Starting singleton browser session');
-          return this._startBrowser();
-        }
-      }
-
-      async _before() {
-        this.sessionPages = {};
-        recorder.retry({
-          retries: 3,
-          when: err => {
-            if (!err || typeof (err.message) !== 'string') {
-              return false;
-            }
-            // ignore context errors
-            return err.message.includes('context');
-          },
-        });
-        if (this.options.restart && !this.options.manualStart) return this._startBrowser();
-        if (!this.isRunning && !this.options.manualStart) return this._startBrowser();
-        return this.browser;
-      }
-
-      async _after() {
-        if (!this.isRunning) return;
-
-        // close other sessions
-        const contexts = this.browser.browserContexts();
-        const defaultCtx = contexts.shift();
-
-        await Promise.all(contexts.map(c => c.close()));
-
-        if (this.options.restart) {
-          this.isRunning = false;
-          return this._stopBrowser();
-        }
-
-        // ensure this.page is from default context
-        if (this.page) {
-          const existingPages = defaultCtx.targets().filter(t => t.type() === 'page');
-          await this._setPage(await existingPages[0].page());
-        }
-
-        if (this.options.keepBrowserState) return;
-
-        if (!this.options.keepCookies) {
-          this.debugSection('Session', 'cleaning cookies and localStorage');
-          await this.clearCookie();
-        }
-        const currentUrl = await this.grabCurrentUrl();
-
-        if (currentUrl.startsWith('http')) {
-          await this.executeScript('localStorage.clear();').catch((err) => {
-            if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-          });
-          await this.executeScript('sessionStorage.clear();').catch((err) => {
-            if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err;
-          });
-        }
-        await this.closeOtherTabs();
-        return this.browser;
-      }
-
-      _afterSuite() {
-      }
-
-      _finishTest() {
-        if (!this.options.restart && this.isRunning) return this._stopBrowser();
-      }
-
-      _session() {
-        return {
-          start: async (name = '') => {
-            this.debugSection('Incognito Tab', 'opened');
-            this.activeSessionName = name;
-
-            const bc = await this.browser.createIncognitoBrowserContext();
-            await bc.newPage();
-
-            // Create a new page inside context.
-            return bc;
-          },
-          stop: async () => {
-            // is closed by _after
-          },
-          loadVars: async (context) => {
-            const existingPages = context.targets().filter(t => t.type() === 'page');
-            this.sessionPages[this.activeSessionName] = await existingPages[0].page();
-            return this._setPage(this.sessionPages[this.activeSessionName]);
-          },
-          restoreVars: async (session) => {
-            this.withinLocator = null;
-
-            if (!session) {
-              this.activeSessionName = '';
-            } else {
-              this.activeSessionName = session;
-            }
-            const defaultCtx = this.browser.defaultBrowserContext();
-            const existingPages = defaultCtx.targets().filter(t => t.type() === 'page');
-            await this._setPage(await existingPages[0].page());
-
-            return this._waitForAction();
-          },
-        };
-      }
-
-      /**
-       * Use Puppeteer API inside a test.
-       *
-       * First argument is a description of an action.
-       * Second argument is async function that gets this helper as parameter.
-       *
-       * { [`page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page), [`browser`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-browser) } from Puppeteer API are available.
-       *
-       * ```js
-       * I.usePuppeteerTo('emulate offline mode', async ({ page }) {
-       *   await page.setOfflineMode(true);
-       * });
-       * ```
-       *
-       * @param {string} description used to show in logs.
-       * @param {function} fn async function that is executed with Puppeteer as argument
-       */
-      usePuppeteerTo(description, fn) {
-        return this._useTo(...arguments);
-      }
-
-      /**
-       * Set the automatic popup response to Accept.
-       * This must be set before a popup is triggered.
-       *
-       * ```js
-       * I.amAcceptingPopups();
-       * I.click('#triggerPopup');
-       * I.acceptPopup();
-       * ```
-       */
-      amAcceptingPopups() {
-        popupStore.actionType = 'accept';
-      }
-
-      /**
-       * Accepts the active JavaScript native popup window, as created by window.alert|window.confirm|window.prompt.
-       * Don't confuse popups with modal windows, as created by [various
-       * libraries](http://jster.net/category/windows-modals-popups).
-       */
-      acceptPopup() {
-        popupStore.assertPopupActionType('accept');
-      }
-
-      /**
-       * Set the automatic popup response to Cancel/Dismiss.
-       * This must be set before a popup is triggered.
-       *
-       * ```js
-       * I.amCancellingPopups();
-       * I.click('#triggerPopup');
-       * I.cancelPopup();
-       * ```
-       */
-      amCancellingPopups() {
-        popupStore.actionType = 'cancel';
-      }
-
-      /**
-       * Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.
-       */
-      cancelPopup() {
-        popupStore.assertPopupActionType('cancel');
-      }
-
-      /**
-       * {{> seeInPopup }}
-       */
-      async seeInPopup(text) {
-        popupStore.assertPopupVisible();
-        const popupText = await popupStore.popup.message();
-        stringIncludes('text in popup').assert(text, popupText);
-      }
-
-      /**
-       * Set current page
-       * @param {object} page page to set
-       */
-      async _setPage(page) {
-        page = await page;
-        this._addPopupListener(page);
-        this._addErrorListener(page);
-        this.page = page;
-        if (!page) return;
-        page.setDefaultNavigationTimeout(this.options.getPageTimeout);
-        this.context = await this.page.$('body');
-        if (this.config.browser === 'chrome') {
-          await page.bringToFront();
-        }
-      }
-
-      async _addErrorListener(page) {
-        if (!page) {
-          return;
-        }
-        page.on('error', async (error) => {
-          console.error('Puppeteer page error', error);
-        });
-      }
-
-      /**
-       * Add the 'dialog' event listener to a page
-       * @page {Puppeteer.Page}
-       *
-       * The popup listener handles the dialog with the predefined action when it appears on the page.
-       * It also saves a reference to the object which is used in seeInPopup.
-       */
-      _addPopupListener(page) {
-        if (!page) {
-          return;
-        }
-        page.on('dialog', async (dialog) => {
-          popupStore.popup = dialog;
-          const action = popupStore.actionType || this.options.defaultPopupAction;
-          await this._waitForAction();
-
-          switch (action) {
-            case 'accept':
-              return dialog.accept();
-
-            case 'cancel':
-              return dialog.dismiss();
-
-            default: {
-              throw new Error('Unknown popup action type. Only "accept" or "cancel" are accepted');
-            }
-          }
-        });
-      }
-
-      /**
-       * Gets page URL including hash.
-       */
-      async _getPageUrl() {
-        return this.executeScript(() => window.location.href);
-      }
-
-      /**
-       * Grab the text within the popup. If no popup is visible then it will return null
-       *
-       * ```js
-       * await I.grabPopupText();
-       * ```
-       * @return {Promise<string | null>}
-       */
-      async grabPopupText() {
-        if (popupStore.popup) {
-          return popupStore.popup.message();
-        }
-        return null;
-      }
-
-      async _startBrowser() {
-        if (this.isRemoteBrowser) {
-          try {
-            this.browser = await puppeteer.connect(this.puppeteerOptions);
-          } catch (err) {
-            if (err.toString().indexOf('ECONNREFUSED')) {
-              throw new RemoteBrowserConnectionRefused(err);
-            }
-            throw err;
-          }
-        } else {
-          this.browser = await puppeteer.launch(this.puppeteerOptions);
-        }
-
-        this.browser.on('targetcreated', target => target.page().then(page => targetCreatedHandler.call(this, page)).catch((e) => {
-          console.error('Puppeteer page error', e);
-        }));
-        this.browser.on('targetchanged', (target) => {
-          this.debugSection('Url', target.url());
-        });
-
-        const existingPages = await this.browser.pages();
-        const mainPage = existingPages[0] || await this.browser.newPage();
-
-        if (existingPages.length) {
-          // Run the handler as it will not be triggered if the page already exists
-          targetCreatedHandler.call(this, mainPage);
-        }
-        await this._setPage(mainPage);
-        await this.closeOtherTabs();
-
-        this.isRunning = true;
-      }
-
-      async _stopBrowser() {
-        this.withinLocator = null;
-        this._setPage(null);
-        this.context = null;
-        popupStore.clear();
-        this.isAuthenticated = false;
-        await this.browser.close();
-        if (this.isRemoteBrowser) {
-          await this.browser.disconnect();
-        }
-      }
-
-      async _evaluateHandeInContext(...args) {
-        let context = await this._getContext();
-
-        if (context.constructor.name === 'Frame') {
-          // Currently there is no evalateHandle for the Frame object
-          // https://github.com/GoogleChrome/puppeteer/issues/1051
-          context = await context.executionContext();
-        }
-
-        return context.evaluateHandle(...args);
-      }
-
-      async _withinBegin(locator) {
-        if (this.withinLocator) {
-          throw new Error('Can\'t start within block inside another within block');
-        }
-
-        const frame = isFrameLocator(locator);
-
-        if (frame) {
-          if (Array.isArray(frame)) {
-            return this.switchTo(null)
-              .then(() => frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()));
-          }
-          await this.switchTo(locator);
-          this.withinLocator = new Locator(locator);
-          return;
-        }
-
-        const els = await this._locate(locator);
-        assertElementExists(els, locator);
-        this.context = els[0];
-
-        this.withinLocator = new Locator(locator);
-      }
-
-      async _withinEnd() {
-        this.withinLocator = null;
-        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;
-      }
-
-      /**
-       * {{> amOnPage }}
-       */
-      async amOnPage(url) {
-        if (!(/^\w+\:\/\//.test(url))) {
-          url = this.options.url + url;
-        }
-
-        if (this.config.basicAuth && (this.isAuthenticated !== true)) {
-          if (url.includes(this.options.url)) {
-            await this.page.authenticate(this.config.basicAuth);
-            this.isAuthenticated = true;
-          }
-        }
-
-        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();
-      }
-
-      /**
-       * {{> 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.
-       * It also can't maximize a window.
-       */
-      async resizeWindow(width, height) {
-        if (width === 'maximize') {
-          throw new Error('Puppeteer can\'t control windows, so it can\'t maximize it');
-        }
-
-        await this.page.setViewport({ width, height });
-        return this._waitForAction();
-      }
-
-      /**
-       * Set headers for all next requests
-       *
-       * ```js
-       * I.haveRequestHeaders({
-       *    'X-Sent-By': 'CodeceptJS',
-       * });
-       * ```
-       *
-       * @param {object} customHeaders headers to set
-       */
-      async haveRequestHeaders(customHeaders) {
-        if (!customHeaders) {
-          throw new Error('Cannot send empty headers.');
-        }
-        return this.page.setExtraHTTPHeaders(customHeaders);
-      }
-
-      /**
-       * {{> moveCursorTo }}
-       * {{ react }}
-       */
-      async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-        const els = await this._locate(locator);
-        assertElementExists(els, locator);
-
-        // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-        const { x, y } = await getClickablePoint(els[0]);
-        await this.page.mouse.move(x + offsetX, y + offsetY);
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> dragAndDrop }}
-       */
-      async dragAndDrop(srcElement, destElement) {
-        return proceedDragAndDrop.call(this, srcElement, destElement);
-      }
-
-      /**
-       * {{> refreshPage }}
-       */
-      async refreshPage() {
-        return this.page.reload({ timeout: this.options.getPageTimeout, waitUntil: this.options.waitForNavigation });
-      }
-
-      /**
-       * {{> scrollPageToTop }}
-       */
-      scrollPageToTop() {
-        return this.executeScript(() => {
-          window.scrollTo(0, 0);
-        });
-      }
-
-      /**
-       * {{> scrollPageToBottom }}
-       */
-      scrollPageToBottom() {
-        return this.executeScript(() => {
-          const body = document.body;
-          const html = document.documentElement;
-          window.scrollTo(0, Math.max(
-            body.scrollHeight, body.offsetHeight,
-            html.clientHeight, html.scrollHeight, html.offsetHeight,
-          ));
-        });
-      }
-
-      /**
-       * {{> scrollTo }}
-       */
-      async scrollTo(locator, offsetX = 0, offsetY = 0) {
-        if (typeof locator === 'number' && typeof offsetX === 'number') {
-          offsetY = offsetX;
-          offsetX = locator;
-          locator = null;
-        }
-
-        if (locator) {
-          const els = await this._locate(locator);
-          assertElementExists(els, locator, 'Element');
-          const el = els[0];
-          await el.evaluate((el) => el.scrollIntoView());
-          const elementCoordinates = await getClickablePoint(els[0]);
-          await this.executeScript((x, y) => window.scrollBy(x, y), elementCoordinates.x + offsetX, elementCoordinates.y + offsetY);
-        } else {
-          await this.executeScript((x, y) => window.scrollTo(x, y), offsetX, offsetY);
-        }
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> seeInTitle }}
-       */
-      async seeInTitle(text) {
-        const title = await this.page.title();
-        stringIncludes('web page title').assert(text, title);
-      }
-
-      /**
-       * {{> grabPageScrollPosition }}
-       */
-      async grabPageScrollPosition() {
-        /* eslint-disable comma-dangle */
-        function getScrollPosition() {
-          return {
-            x: window.pageXOffset,
-            y: window.pageYOffset
-          };
-        }
-        /* eslint-enable comma-dangle */
-        return this.executeScript(getScrollPosition);
-      }
-
-      /**
-       * {{> seeTitleEquals }}
-       */
-      async seeTitleEquals(text) {
-        const title = await this.page.title();
-        return equals('web page title').assert(title, text);
-      }
-
-      /**
-       * {{> dontSeeInTitle }}
-       */
-      async dontSeeInTitle(text) {
-        const title = await this.page.title();
-        stringIncludes('web page title').negate(text, title);
-      }
-
-      /**
-       * {{> grabTitle }}
-       */
-      async grabTitle() {
-        return this.page.title();
-      }
-
-      /**
-       * Get elements by different locator types, including strict locator
-       * Should be used in custom helpers:
-       *
-       * ```js
-       * const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
-       * ```
-       *
-       * {{ react }}
-       */
-      async _locate(locator) {
-        return findElements(await this.context, locator);
-      }
-
-      /**
-       * Find a checkbox by providing human readable text:
-       * NOTE: Assumes the checkable element exists
-       *
-       * ```js
-       * this.helpers['Puppeteer']._locateCheckable('I agree with terms and conditions').then // ...
-       * ```
-       */
-      async _locateCheckable(locator, providedContext = null) {
-        const context = providedContext || await this._getContext();
-        const els = await findCheckable.call(this, locator, context);
-        assertElementExists(els[0], locator, 'Checkbox or radio');
-        return els[0];
-      }
-
-      /**
-       * Find a clickable element by providing human readable text:
-       *
-       * ```js
-       * this.helpers['Puppeteer']._locateClickable('Next page').then // ...
-       * ```
-       */
-      async _locateClickable(locator) {
-        const context = await this._getContext();
-        return findClickable.call(this, context, locator);
-      }
-
-      /**
-       * Find field elements by providing human readable text:
-       *
-       * ```js
-       * this.helpers['Puppeteer']._locateFields('Your email').then // ...
-       * ```
-       */
-      async _locateFields(locator) {
-        return findFields.call(this, locator);
-      }
-
-      /**
-       * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
-       *
-       * ```js
-       * I.switchToNextTab();
-       * I.switchToNextTab(2);
-       * ```
-       *
-       * @param {number} [num=1]
-       */
-      async switchToNextTab(num = 1) {
-        const pages = await this.browser.pages();
-        const index = pages.indexOf(this.page);
-        this.withinLocator = null;
-        const page = pages[index + num];
-
-        if (!page) {
-          throw new Error(`There is no ability to switch to next tab with offset ${num}`);
-        }
-
-        await this._setPage(page);
-        return this._waitForAction();
-      }
-
-      /**
-       * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
-       *
-       * ```js
-       * I.switchToPreviousTab();
-       * I.switchToPreviousTab(2);
-       * ```
-       * @param {number} [num=1]
-       */
-      async switchToPreviousTab(num = 1) {
-        const pages = await this.browser.pages();
-        const index = pages.indexOf(this.page);
-        this.withinLocator = null;
-        const page = pages[index - num];
-
-        if (!page) {
-          throw new Error(`There is no ability to switch to previous tab with offset ${num}`);
-        }
-
-        await this._setPage(page);
-        return this._waitForAction();
-      }
-
-      /**
-       * Close current tab and switches to previous.
-       *
-       * ```js
-       * I.closeCurrentTab();
-       * ```
-       */
-      async closeCurrentTab() {
-        const oldPage = this.page;
-        await this.switchToPreviousTab();
-        await oldPage.close();
-        return this._waitForAction();
-      }
-
-      /**
-       * Close all tabs except for the current one.
-       *
-       * ```js
-       * I.closeOtherTabs();
-       * ```
-       */
-      async closeOtherTabs() {
-        const pages = await this.browser.pages();
-        const otherPages = pages.filter(page => page !== this.page);
-
-        let p = Promise.resolve();
-        otherPages.forEach((page) => {
-          p = p.then(() => page.close());
-        });
-        await p;
-        return this._waitForAction();
-      }
-
-      /**
-       * Open new tab and switch to it
-       *
-       * ```js
-       * I.openNewTab();
-       * ```
-       */
-      async openNewTab() {
-        await this._setPage(await this.browser.newPage());
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> grabNumberOfOpenTabs }}
-       */
-      async grabNumberOfOpenTabs() {
-        const pages = await this.browser.pages();
-        return pages.length;
-      }
-
-      /**
-       * {{> seeElement }}
-       * {{ react }}
-       */
-      async seeElement(locator) {
-        let els = await this._locate(locator);
-        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
-        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
-
-        return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'));
-      }
-
-      /**
-       * {{> dontSeeElement }}
-       * {{ react }}
-       */
-      async dontSeeElement(locator) {
-        let els = await this._locate(locator);
-        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
-        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
-
-        return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'));
-      }
-
-      /**
-       * {{> seeElementInDOM }}
-       */
-      async seeElementInDOM(locator) {
-        const els = await this._locate(locator);
-        return empty('elements on page').negate(els.filter(v => v).fill('ELEMENT'));
-      }
-
-      /**
-       * {{> dontSeeElementInDOM }}
-       */
-      async dontSeeElementInDOM(locator) {
-        const els = await this._locate(locator);
-        return empty('elements on a page').assert(els.filter(v => v).fill('ELEMENT'));
-      }
-
-      /**
-       * {{> click }}
-       *
-       * {{ react }}
-       */
-      async click(locator, context = null) {
-        return proceedClick.call(this, locator, context);
-      }
-
-      /**
-       * {{> forceClick }}
-       *
-       * {{ react }}
-       */
-      async forceClick(locator, context = null) {
-        let matcher = await this.context;
-        if (context) {
-          const els = await this._locate(context);
-          assertElementExists(els, context);
-          matcher = els[0];
-        }
-
-        const els = await findClickable.call(this, matcher, locator);
-        if (context) {
-          assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`);
-        } else {
-          assertElementExists(els, locator, 'Clickable element');
-        }
-        const elem = els[0];
-        return this.executeScript((el) => {
-          if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-          }
-          const event = document.createEvent('MouseEvent');
-          event.initEvent('click', true, true);
-          return el.dispatchEvent(event);
-        }, elem);
-      }
-
-      /**
-       * {{> clickLink }}
-       *
-       * {{ react }}
-       */
-      async clickLink(locator, context = null) {
-        return proceedClick.call(this, locator, context, { waitForNavigation: true });
-      }
-
-      /**
-       * 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);
-
-        try {
-          return this.page._client.send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath });
-        } catch (e) {
-          return this.page._client().send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath });
-        }
-      }
-
-      /**
-       * This method is **deprecated**.
-       *
-       * Please use `handleDownloads()` instead.
-       */
-      async downloadFile(locator, customName) {
-        let fileName;
-        await this.page.setRequestInterception(true);
-
-        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,
-          uri: xRequest._url,
-          body: xRequest._postData,
-          headers: xRequest._headers,
-        };
-
-        const cookies = await this.page.cookies();
-        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',
-          onDownloadProgress(e) {
-            console.log('+', e);
-          },
-        });
-
-        const outputFile = path.join(`${global.output_dir}/${fileName}`);
-
-        try {
-          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}`);
-            wstream.on('finish', () => { resolve(fileName); });
-            wstream.on('error', reject);
-          });
-        } catch (error) {
-          throw new Error(`There is something wrong with downloaded file. ${error}`);
-        }
-      }
-
-      /**
-       * {{> doubleClick }}
-       *
-       * {{ react }}
-       */
-      async doubleClick(locator, context = null) {
-        return proceedClick.call(this, locator, context, { clickCount: 2 });
-      }
-
-      /**
-       * {{> rightClick }}
-       *
-       * {{ react }}
-       */
-      async rightClick(locator, context = null) {
-        return proceedClick.call(this, locator, context, { button: 'right' });
-      }
-
-      /**
-       * {{> checkOption }}
-       */
-      async checkOption(field, context = null) {
-        const elm = await this._locateCheckable(field, context);
-        const curentlyChecked = await elm.getProperty('checked')
-          .then(checkedProperty => checkedProperty.jsonValue());
-        // Only check if NOT currently checked
-        if (!curentlyChecked) {
-          await elm.click();
-          return this._waitForAction();
-        }
-      }
-
-      /**
-       * {{> uncheckOption }}
-       */
-      async uncheckOption(field, context = null) {
-        const elm = await this._locateCheckable(field, context);
-        const curentlyChecked = await elm.getProperty('checked')
-          .then(checkedProperty => checkedProperty.jsonValue());
-        // Only uncheck if currently checked
-        if (curentlyChecked) {
-          await elm.click();
-          return this._waitForAction();
-        }
-      }
-
-      /**
-       * {{> seeCheckboxIsChecked }}
-       */
-      async seeCheckboxIsChecked(field) {
-        return proceedIsChecked.call(this, 'assert', field);
-      }
-
-      /**
-       * {{> dontSeeCheckboxIsChecked }}
-       */
-      async dontSeeCheckboxIsChecked(field) {
-        return proceedIsChecked.call(this, 'negate', field);
-      }
-
-      /**
-       * {{> pressKeyDown }}
-       */
-      async pressKeyDown(key) {
-        key = getNormalizedKey.call(this, key);
-        await this.page.keyboard.down(key);
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> pressKeyUp }}
-       */
-      async pressKeyUp(key) {
-        key = getNormalizedKey.call(this, key);
-        await this.page.keyboard.up(key);
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> pressKeyWithKeyNormalization }}
-       *
-       * _Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/puppeteer#1313](https://github.com/GoogleChrome/puppeteer/issues/1313)).
-       */
-      async pressKey(key) {
-        const modifiers = [];
-        if (Array.isArray(key)) {
-          for (let k of key) {
-            k = getNormalizedKey.call(this, k);
-            if (isModifierKey(k)) {
-              modifiers.push(k);
-            } else {
-              key = k;
-              break;
-            }
-          }
-        } else {
-          key = getNormalizedKey.call(this, key);
-        }
-        for (const modifier of modifiers) {
-          await this.page.keyboard.down(modifier);
-        }
-        await this.page.keyboard.press(key);
-        for (const modifier of modifiers) {
-          await this.page.keyboard.up(modifier);
-        }
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> type }}
-       */
-      async type(keys, delay = null) {
-        if (!Array.isArray(keys)) {
-          keys = keys.toString();
-          keys = keys.split('');
-        }
-
-        for (const key of keys) {
-          await this.page.keyboard.press(key);
-          if (delay) await this.wait(delay / 1000);
-        }
-      }
-
-      /**
-       * {{> fillField }}
-       * {{ react }}
-       */
-      async fillField(field, value) {
-        const els = await findVisibleFields.call(this, field);
-        assertElementExists(els, field, 'Field');
-        const el = els[0];
-        const tag = await el.getProperty('tagName').then(el => el.jsonValue());
-        const editable = await el.getProperty('contenteditable').then(el => el.jsonValue());
-        if (tag === 'INPUT' || tag === 'TEXTAREA') {
-          await this._evaluateHandeInContext(el => el.value = '', el);
-        } else if (editable) {
-          await this._evaluateHandeInContext(el => el.innerHTML = '', el);
-        }
-
-        if (this.options.highlightElement) {
-          highlightElement(el, this.page);
-        }
-
-        await el.type(value.toString(), { delay: this.options.pressKeyDelay });
-
-        if (this.options.highlightElement) {
-          unhighlightElement(el, this.page);
-        }
-
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> clearField }}
-       */
-      async clearField(field) {
-        return this.fillField(field, '');
-      }
-
-      /**
-       * {{> appendField }}
-       *
-       * {{ react }}
-       */
-      async appendField(field, value) {
-        const els = await findVisibleFields.call(this, field);
-        assertElementExists(els, field, 'Field');
-        await els[0].press('End');
-        await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> seeInField }}
-       */
-      async seeInField(field, value) {
-        return proceedSeeInField.call(this, 'assert', field, value);
-      }
-
-      /**
-       * {{> dontSeeInField }}
-       */
-      async dontSeeInField(field, value) {
-        return proceedSeeInField.call(this, 'negate', field, value);
-      }
-
-      /**
-       * {{> attachFile }}
-       *
-       * > ⚠ There is an [issue with file upload in Puppeteer 2.1.0 & 2.1.1](https://github.com/puppeteer/puppeteer/issues/5420), downgrade to 2.0.0 if you face it.
-       */
-      async attachFile(locator, pathToFile) {
-        const file = path.join(global.codecept_dir, pathToFile);
-
-        if (!fileExists(file)) {
-          throw new Error(`File at ${file} can not be found on local system`);
-        }
-        const els = await findFields.call(this, locator);
-        assertElementExists(els, locator, 'Field');
-        await els[0].uploadFile(file);
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> selectOption }}
-       */
-      async selectOption(select, option) {
-        const els = await findVisibleFields.call(this, select);
-        assertElementExists(els, select, 'Selectable field');
-        const el = els[0];
-        if (await el.getProperty('tagName').then(t => t.jsonValue()) !== 'SELECT') {
-          throw new Error('Element is not <select>');
-        }
-        if (!Array.isArray(option)) option = [option];
-
-        for (const key in option) {
-          const opt = xpathLocator.literal(option[key]);
-          let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) });
-          if (optEl.length) {
-            this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
-            continue;
-          }
-          optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) });
-          if (optEl.length) {
-            this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
-          }
-        }
-        await this._evaluateHandeInContext((element) => {
-          element.dispatchEvent(new Event('input', { bubbles: true }));
-          element.dispatchEvent(new Event('change', { bubbles: true }));
-        }, el);
-
-        return this._waitForAction();
-      }
-
-      /**
-       * {{> grabNumberOfVisibleElements }}
-       * {{ react }}
-       */
-      async grabNumberOfVisibleElements(locator) {
-        let els = await this._locate(locator);
-        els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v);
-        // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-        els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el));
-
-        return els.filter(v => v).length;
-      }
-
-      /**
-       * {{> seeInCurrentUrl }}
-       */
-      async seeInCurrentUrl(url) {
-        stringIncludes('url').assert(url, await this._getPageUrl());
-      }
-
-      /**
-       * {{> dontSeeInCurrentUrl }}
-       */
-      async dontSeeInCurrentUrl(url) {
-        stringIncludes('url').negate(url, await this._getPageUrl());
-      }
-
-      /**
-       * {{> seeCurrentUrlEquals }}
-       */
-      async seeCurrentUrlEquals(url) {
-        urlEquals(this.options.url).assert(url, await this._getPageUrl());
-      }
-
-      /**
-       * {{> dontSeeCurrentUrlEquals }}
-       */
-      async dontSeeCurrentUrlEquals(url) {
-        urlEquals(this.options.url).negate(url, await this._getPageUrl());
-      }
-
-      /**
-       * {{> see }}
-       *
-       * {{ react }}
-       */
-      async see(text, context = null) {
-        return proceedSee.call(this, 'assert', text, context);
-      }
-
-      /**
-       * {{> seeTextEquals }}
-       */
-      async seeTextEquals(text, context = null) {
-        return proceedSee.call(this, 'assert', text, context, true);
-      }
-
-      /**
-       * {{> dontSee }}
-       *
-       * {{ react }}
-       */
-      async dontSee(text, context = null) {
-        return proceedSee.call(this, 'negate', text, context);
-      }
-
-      /**
-       * {{> grabSource }}
-       */
-      async grabSource() {
-        return this.page.content();
-      }
-
-      /**
-       * Get JS log from browser.
-       *
-       * ```js
-       * let logs = await I.grabBrowserLogs();
-       * console.log(JSON.stringify(logs))
-       * ```
-       * @return {Promise<any[]>}
-       */
-      async grabBrowserLogs() {
-        const logs = consoleLogStore.entries;
-        consoleLogStore.clear();
-        return logs;
-      }
-
-      /**
-       * {{> grabCurrentUrl }}
-       */
-      async grabCurrentUrl() {
-        return this._getPageUrl();
-      }
-
-      /**
-       * {{> seeInSource }}
-       */
-      async seeInSource(text) {
-        const source = await this.page.content();
-        stringIncludes('HTML source of a page').assert(text, source);
-      }
-
-      /**
-       * {{> dontSeeInSource }}
-       */
-      async dontSeeInSource(text) {
-        const source = await this.page.content();
-        stringIncludes('HTML source of a page').negate(text, source);
-      }
-
-      /**
-       * {{> seeNumberOfElements }}
-       *
-       * {{ react }}
-       */
-      async seeNumberOfElements(locator, num) {
-        const elements = await this._locate(locator);
-        return equals(`expected number of elements (${(new Locator(locator))}) is ${num}, but found ${elements.length}`).assert(elements.length, num);
-      }
-
-      /**
-       * {{> seeNumberOfVisibleElements }}
-       *
-       * {{ react }}
-       */
-      async seeNumberOfVisibleElements(locator, num) {
-        const res = await this.grabNumberOfVisibleElements(locator);
-        return equals(`expected number of visible elements (${(new Locator(locator))}) is ${num}, but found ${res}`).assert(res, num);
-      }
-
-      /**
-       * {{> setCookie }}
-       */
-      async setCookie(cookie) {
-        if (Array.isArray(cookie)) {
-          return this.page.setCookie(...cookie);
-        }
-        return this.page.setCookie(cookie);
-      }
-
-      /**
-       * {{> seeCookie }}
-       *
-       */
-      async seeCookie(name) {
-        const cookies = await this.page.cookies();
-        empty(`cookie ${name} to be set`).negate(cookies.filter(c => c.name === name));
-      }
-
-      /**
-       * {{> dontSeeCookie }}
-       */
-      async dontSeeCookie(name) {
-        const cookies = await this.page.cookies();
-        empty(`cookie ${name} to be set`).assert(cookies.filter(c => c.name === name));
-      }
-
-      /**
-       * {{> grabCookie }}
-       *
-       * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
-       */
-      async grabCookie(name) {
-        const cookies = await this.page.cookies();
-        if (!name) return cookies;
-        const cookie = cookies.filter(c => c.name === name);
-        if (cookie[0]) return cookie[0];
-      }
-
-      /**
-       * {{> clearCookie }}
-       */
-      async clearCookie(name) {
-        const cookies = await this.page.cookies();
-        if (!name) {
-          return this.page.deleteCookie.apply(this.page, cookies);
-        }
-        const cookie = cookies.filter(c => c.name === name);
-        if (!cookie[0]) return;
-        return this.page.deleteCookie(cookie[0]);
-      }
-
-      /**
-       * {{> executeScript }}
-       *
-       * If a function returns a Promise It will wait for it resolution.
-       */
-      async executeScript(...args) {
-        let context = this.page;
-        if (this.context && this.context.constructor.name === 'Frame') {
-          context = this.context; // switching to iframe context
-        }
-        return context.evaluate.apply(context, args);
-      }
-
-      /**
-       * {{> executeAsyncScript }}
-       *
-       * Asynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
-       */
-      async executeAsyncScript(...args) {
-        const asyncFn = function () {
-          const args = Array.from(arguments);
-          const fn = eval(`(${args.shift()})`); // eslint-disable-line no-eval
-          return new Promise((done) => {
-            args.push(done);
-            fn.apply(null, args);
-          });
-        };
-        args[0] = args[0].toString();
-        args.unshift(asyncFn);
-        return this.page.evaluate.apply(this.page, args);
-      }
-
-      /**
-       * {{> grabTextFromAll }}
-       * {{ react }}
-       */
-      async grabTextFromAll(locator) {
-        const els = await this._locate(locator);
-        const texts = [];
-        for (const el of els) {
-          texts.push(await (await el.getProperty('innerText')).jsonValue());
-        }
-        return texts;
-      }
-
-      /**
-       * {{> grabTextFrom }}
-       * {{ react }}
-       */
-      async grabTextFrom(locator) {
-        const texts = await this.grabTextFromAll(locator);
-        assertElementExists(texts, locator);
-        if (texts.length > 1) {
-          this.debugSection('GrabText', `Using first element out of ${texts.length}`);
-        }
-
-        return texts[0];
-      }
-
-      /**
-       * {{> grabValueFromAll }}
-       */
-      async grabValueFromAll(locator) {
-        const els = await findFields.call(this, locator);
-        const values = [];
-        for (const el of els) {
-          values.push(await (await el.getProperty('value')).jsonValue());
-        }
-        return values;
-      }
-
-      /**
-       * {{> grabValueFrom }}
-       */
-      async grabValueFrom(locator) {
-        const values = await this.grabValueFromAll(locator);
-        assertElementExists(values, locator);
-        if (values.length > 1) {
-          this.debugSection('GrabValue', `Using first element out of ${values.length}`);
-        }
-
-        return values[0];
-      }
-
-      /**
-       * {{> grabHTMLFromAll }}
-       */
-      async grabHTMLFromAll(locator) {
-        const els = await this._locate(locator);
-        const values = await Promise.all(els.map(el => el.executionContext().evaluate(element => element.innerHTML, el)));
-        return values;
-      }
-
-      /**
-       * {{> grabHTMLFrom }}
-       */
-      async grabHTMLFrom(locator) {
-        const html = await this.grabHTMLFromAll(locator);
-        assertElementExists(html, locator);
-        if (html.length > 1) {
-          this.debugSection('GrabHTML', `Using first element out of ${html.length}`);
-        }
-
-        return html[0];
-      }
-
-      /**
-       * {{> grabCssPropertyFromAll }}
-       * {{ react }}
-       */
-      async grabCssPropertyFromAll(locator, cssProperty) {
-        const els = await this._locate(locator);
-        const res = await Promise.all(els.map(el => el.executionContext().evaluate(el => JSON.parse(JSON.stringify(getComputedStyle(el))), el)));
-        const cssValues = res.map(props => props[toCamelCase(cssProperty)]);
-
-        return cssValues;
-      }
-
-      /**
-       * {{> grabCssPropertyFrom }}
-       * {{ react }}
-       */
-      async grabCssPropertyFrom(locator, cssProperty) {
-        const cssValues = await this.grabCssPropertyFromAll(locator, cssProperty);
-        assertElementExists(cssValues, locator);
-
-        if (cssValues.length > 1) {
-          this.debugSection('GrabCSS', `Using first element out of ${cssValues.length}`);
-        }
-
-        return cssValues[0];
-      }
-
-      /**
-       * {{> seeCssPropertiesOnElements }}
-       * {{ react }}
-       */
-      async seeCssPropertiesOnElements(locator, cssProperties) {
-        const res = await this._locate(locator);
-        assertElementExists(res, locator);
-
-        const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
-        const elemAmount = res.length;
-        const commands = [];
-        res.forEach((el) => {
-          Object.keys(cssPropertiesCamelCase).forEach((prop) => {
-            commands.push(el.executionContext()
-              .evaluate((el) => {
-                const style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle;
-                return JSON.parse(JSON.stringify(style));
-              }, el)
-              .then((props) => {
-                if (isColorProperty(prop)) {
-                  return convertColorToRGBA(props[prop]);
-                }
-                return props[prop];
-              }));
-          });
-        });
-        let props = await Promise.all(commands);
-        const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
-        if (!Array.isArray(props)) props = [props];
-        let chunked = chunkArray(props, values.length);
-        chunked = chunked.filter((val) => {
-          for (let i = 0; i < val.length; ++i) {
-            if (val[i] !== values[i]) return false;
-          }
-          return true;
-        });
-        return equals(`all elements (${(new Locator(locator))}) to have CSS property ${JSON.stringify(cssProperties)}`).assert(chunked.length, elemAmount);
-      }
-
-      /**
-       * {{> seeAttributesOnElements }}
-       * {{ react }}
-       */
-      async seeAttributesOnElements(locator, attributes) {
-        const res = await this._locate(locator);
-        assertElementExists(res, locator);
-
-        const elemAmount = res.length;
-        const commands = [];
-        res.forEach((el) => {
-          Object.keys(attributes).forEach((prop) => {
-            commands.push(el
-              .executionContext()
-              .evaluateHandle((el, attr) => el[attr] || el.getAttribute(attr), el, prop)
-              .then(el => el.jsonValue()));
-          });
-        });
-        let attrs = await Promise.all(commands);
-        const values = Object.keys(attributes).map(key => attributes[key]);
-        if (!Array.isArray(attrs)) attrs = [attrs];
-        let chunked = chunkArray(attrs, values.length);
-        chunked = chunked.filter((val) => {
-          for (let i = 0; i < val.length; ++i) {
-            if (val[i] !== values[i]) return false;
-          }
-          return true;
-        });
-        return equals(`all elements (${(new Locator(locator))}) to have attributes ${JSON.stringify(attributes)}`).assert(chunked.length, elemAmount);
-      }
-
-      /**
-       * {{> dragSlider }}
-       * {{ react }}
-       */
-      async dragSlider(locator, offsetX = 0) {
-        const src = await this._locate(locator);
-        assertElementExists(src, locator, 'Slider Element');
-
-        // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
-        const sliderSource = await getClickablePoint(src[0]);
-
-        // Drag start point
-        await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
-        await this.page.mouse.down();
-
-        // Drag destination
-        await this.page.mouse.move(sliderSource.x + offsetX, sliderSource.y, { steps: 5 });
-        await this.page.mouse.up();
-
-        await this._waitForAction();
-      }
-
-      /**
-       * {{> grabAttributeFromAll }}
-       * {{ react }}
-       */
-      async grabAttributeFromAll(locator, attr) {
-        const els = await this._locate(locator);
-        const array = [];
-        for (let index = 0; index < els.length; index++) {
-          const a = await this._evaluateHandeInContext((el, attr) => el[attr] || el.getAttribute(attr), els[index], attr);
-          array.push(await a.jsonValue());
-        }
-        return array;
-      }
-
-      /**
-       * {{> grabAttributeFrom }}
-       * {{ react }}
-       */
-      async grabAttributeFrom(locator, attr) {
-        const attrs = await this.grabAttributeFromAll(locator, attr);
-        assertElementExists(attrs, locator);
-        if (attrs.length > 1) {
-          this.debugSection('GrabAttribute', `Using first element out of ${attrs.length}`);
-        }
-
-        return attrs[0];
-      }
-
-      /**
-       * {{> saveElementScreenshot }}
-       */
-      async saveElementScreenshot(locator, fileName) {
-        const outputFile = screenshotOutputFolder(fileName);
-
-        const res = await this._locate(locator);
-        assertElementExists(res, locator);
-        if (res.length > 1) this.debug(`[Elements] Using first element out of ${res.length}`);
-        const elem = res[0];
-        this.debug(`Screenshot of ${(new Locator(locator))} element has been saved to ${outputFile}`);
-        return elem.screenshot({ path: outputFile, type: 'png' });
-      }
-
-      /**
-       * {{> saveScreenshot }}
-       */
-      async saveScreenshot(fileName, fullPage) {
-        const fullPageOption = fullPage || this.options.fullPageScreenshots;
-        const outputFile = screenshotOutputFolder(fileName);
-
-        this.debug(`Screenshot is saving to ${outputFile}`);
-
-        if (this.activeSessionName) {
-          const activeSessionPage = this.sessionPages[this.activeSessionName];
-
-          if (activeSessionPage) {
-            return activeSessionPage.screenshot({
-              path: outputFile,
-              fullPage: fullPageOption,
-              type: 'png',
-            });
-          }
-        }
-
-        return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
-      }
-
-      async _failed() {
-        await this._withinEnd();
-      }
-
-      /**
-       * {{> wait }}
-       */
-      async wait(sec) {
-        return new Promise(((done) => {
-          setTimeout(done, sec * 1000);
-        }));
-      }
-
-      /**
-       * {{> waitForEnabled }}
-       */
-      async waitForEnabled(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-        await this.context;
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          const enabledFn = function (locator) {
-            const els = document.querySelectorAll(locator);
-            if (!els || els.length === 0) {
-              return false;
-            }
-            return Array.prototype.filter.call(els, el => !el.disabled).length > 0;
-          };
-          waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value);
-        } else {
-          const enabledFn = function (locator, $XPath) {
-            eval($XPath); // eslint-disable-line no-eval
-            return $XPath(null, locator).filter(el => !el.disabled).length > 0;
-          };
-          waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitForValue }}
-       */
-      async waitForValue(field, value, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        const locator = new Locator(field, 'css');
-        await this.context;
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          const valueFn = function (locator, value) {
-            const els = document.querySelectorAll(locator);
-            if (!els || els.length === 0) {
-              return false;
-            }
-            return Array.prototype.filter.call(els, el => (el.value.toString() || '').indexOf(value) !== -1).length > 0;
-          };
-          waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, value);
-        } else {
-          const valueFn = function (locator, $XPath, value) {
-            eval($XPath); // eslint-disable-line no-eval
-            return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0;
-          };
-          waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), value);
-        }
-        return waiter.catch((err) => {
-          const loc = locator.toString();
-          throw new Error(`element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitNumberOfVisibleElements }}
-       * {{ react }}
-       */
-      async waitNumberOfVisibleElements(locator, num, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-        await this.context;
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          const visibleFn = function (locator, num) {
-            const els = document.querySelectorAll(locator);
-            if (!els || els.length === 0) {
-              return false;
-            }
-            return Array.prototype.filter.call(els, el => el.offsetParent !== null).length === num;
-          };
-          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, num);
-        } else {
-          const visibleFn = function (locator, $XPath, num) {
-            eval($XPath); // eslint-disable-line no-eval
-            return $XPath(null, locator).filter(el => el.offsetParent !== null).length === num;
-          };
-          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), num);
-        }
-        return waiter.catch((err) => {
-          throw new Error(`The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitForClickable }}
-       */
-      async waitForClickable(locator, waitTimeout) {
-        const els = await this._locate(locator);
-        assertElementExists(els, locator);
-
-        return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
-          if (/failed: timeout/i.test(e.message)) {
-            throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`);
-          } else {
-            throw e;
-          }
-        });
-      }
-
-      /**
-       * {{> waitForElement }}
-       * {{ react }}
-       */
-      async waitForElement(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout });
-        } else {
-          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout });
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitForVisible }}
-       *
-       * This method accepts [React selectors](https://codecept.io/react).
-       */
-      async waitForVisible(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-        await this.context;
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, visible: true });
-        } else {
-          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, visible: true });
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitForInvisible }}
-       */
-      async waitForInvisible(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-        await this.context;
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, hidden: true });
-        } else {
-          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, hidden: true });
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * {{> waitToHide }}
-       */
-      async waitToHide(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          waiter = context.waitForSelector(locator.simplify(), { timeout: waitTimeout, hidden: true });
-        } else {
-          waiter = context.waitForXPath(locator.value, { timeout: waitTimeout, hidden: true });
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      async _getContext() {
-        if (this.context && this.context.constructor.name === 'Frame') {
-          return this.context;
-        }
-        return this.page;
-      }
-
-      /**
-       * {{> waitInUrl }}
-       */
-      async waitInUrl(urlPart, sec = null) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-
-        return this.page.waitForFunction((urlPart) => {
-          const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
-          return currUrl.indexOf(urlPart) > -1;
-        }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
-          const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
-          if (/failed: timeout/i.test(e.message)) {
-            throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`);
-          } else {
-            throw e;
-          }
-        });
-      }
-
-      /**
-       * {{> waitUrlEquals }}
-       */
-      async waitUrlEquals(urlPart, sec = null) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-
-        const baseUrl = this.options.url;
-        if (urlPart.indexOf('http') < 0) {
-          urlPart = baseUrl + urlPart;
-        }
-
-        return this.page.waitForFunction((urlPart) => {
-          const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)));
-          return currUrl.indexOf(urlPart) > -1;
-        }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
-          const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
-          if (/failed: timeout/i.test(e.message)) {
-            throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`);
-          } else {
-            throw e;
-          }
-        });
-      }
-
-      /**
-       * {{> waitForText }}
-       */
-      async waitForText(text, sec = null, context = null) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        let waiter;
-
-        const contextObject = await this._getContext();
-
-        if (context) {
-          const locator = new Locator(context, 'css');
-          if (locator.isCSS()) {
-            waiter = contextObject.waitForFunction((locator, text) => {
-              const el = document.querySelector(locator);
-              if (!el) return false;
-              return el.innerText.indexOf(text) > -1;
-            }, { timeout: waitTimeout }, locator.value, text);
-          }
-
-          if (locator.isXPath()) {
-            waiter = contextObject.waitForFunction((locator, text, $XPath) => {
-              eval($XPath); // eslint-disable-line no-eval
-              const el = $XPath(null, locator);
-              if (!el.length) return false;
-              return el[0].innerText.indexOf(text) > -1;
-            }, { timeout: waitTimeout }, locator.value, text, $XPath.toString());
-          }
-        } else {
-          waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, { timeout: waitTimeout }, text);
-        }
-
-        return waiter.catch((err) => {
-          throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      /**
-       * Waits for a network request.
-       *
-       * ```js
-       * I.waitForRequest('http://example.com/resource');
-       * I.waitForRequest(request => request.url() === 'http://example.com' && request.method() === 'GET');
-       * ```
-       *
-       * @param {string|function} urlOrPredicate
-       * @param {?number} [sec=null] seconds to wait
-       */
-      async waitForRequest(urlOrPredicate, sec = null) {
-        const timeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        return this.page.waitForRequest(urlOrPredicate, { timeout });
-      }
-
-      /**
-       * Waits for a network response.
-       *
-       * ```js
-       * I.waitForResponse('http://example.com/resource');
-       * I.waitForResponse(response => response.url() === 'http://example.com' && response.request().method() === 'GET');
-       * ```
-       *
-       * @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;
-        return this.page.waitForResponse(urlOrPredicate, { timeout });
-      }
-
-      /**
-       * {{> switchTo }}
-       */
-      async switchTo(locator) {
-        if (Number.isInteger(locator)) {
-          // Select by frame index of current context
-
-          let childFrames = null;
-          if (this.context && typeof this.context.childFrames === 'function') {
-            childFrames = this.context.childFrames();
-          } else {
-            childFrames = this.page.mainFrame().childFrames();
-          }
-
-          if (locator >= 0 && locator < childFrames.length) {
-            this.context = childFrames[locator];
-          } else {
-            throw new Error('Element #invalidIframeSelector was not found by text|CSS|XPath');
-          }
-          return;
-        }
-        if (!locator) {
-          this.context = await this.page.mainFrame().$('body');
-          return;
-        }
-
-        // iframe by selector
-        const els = await this._locate(locator);
-        assertElementExists(els, locator);
-        const contentFrame = await els[0].contentFrame();
-
-        if (contentFrame) {
-          this.context = contentFrame;
-        } else {
-          this.context = els[0];
-        }
-      }
-
-      /**
-       * {{> waitForFunction }}
-       */
-      async waitForFunction(fn, argsOrSec = null, sec = null) {
-        let args = [];
-        if (argsOrSec) {
-          if (Array.isArray(argsOrSec)) {
-            args = argsOrSec;
-          } else if (typeof argsOrSec === 'number') {
-            sec = argsOrSec;
-          }
-        }
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        const context = await this._getContext();
-        return context.waitForFunction(fn, { timeout: waitTimeout }, ...args);
-      }
-
-      /**
-       * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
-       *
-       * See [Pupeteer's reference](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions)
-       *
-       * @param {*} opts
-       */
-      async waitForNavigation(opts = {}) {
-        opts = {
-          timeout: this.options.getPageTimeout,
-          waitUntil: this.options.waitForNavigation,
-          ...opts,
-        };
-        return this.page.waitForNavigation(opts);
-      }
-
-      async waitUntilExists(locator, sec) {
-        console.log(`waitUntilExists deprecated:
-    * use 'waitForElement' to wait for element to be attached
-    * use 'waitForDetached to wait for element to be removed'`);
-        return this.waitForDetached(locator, sec);
-      }
-
-      /**
-       * {{> waitForDetached }}
-       */
-      async waitForDetached(locator, sec) {
-        const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
-        locator = new Locator(locator, 'css');
-
-        let waiter;
-        const context = await this._getContext();
-        if (locator.isCSS()) {
-          const visibleFn = function (locator) {
-            return document.querySelector(locator) === null;
-          };
-          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value);
-        } else {
-          const visibleFn = function (locator, $XPath) {
-            eval($XPath); // eslint-disable-line no-eval
-            return $XPath(null, locator).length === 0;
-          };
-          waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString());
-        }
-        return waiter.catch((err) => {
-          throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`);
-        });
-      }
-
-      async _waitForAction() {
-        return this.wait(this.options.waitForAction / 1000);
-      }
-
-      /**
-       * {{> grabDataFromPerformanceTiming }}
-       */
-      async grabDataFromPerformanceTiming() {
-        return perfTiming;
-      }
-
-      /**
-       * {{> grabElementBoundingRect }}
-       */
-      async grabElementBoundingRect(locator, prop) {
-        const els = await this._locate(locator);
-        assertElementExists(els, locator);
-        const rect = await els[0].boundingBox();
-        if (prop) return rect[prop];
-        return rect;
-      }
-    }
-
-    module.exports = Puppeteer;
-
-    async function findElements(matcher, locator) {
-      if (locator.react) return findReact(matcher.executionContext(), locator);
-      locator = new Locator(locator, 'css');
-      if (!locator.isXPath()) return matcher.$$(locator.simplify());
-      return matcher.$x(locator.value);
-    }
-
-    async function proceedClick(locator, context = null, options = {}) {
-      let matcher = await this.context;
-      if (context) {
-        const els = await this._locate(context);
-        assertElementExists(els, context);
-        matcher = els[0];
-      }
-      const els = await findClickable.call(this, matcher, locator);
-      if (context) {
-        assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`);
-      } else {
-        assertElementExists(els, locator, 'Clickable element');
-      }
-
-      if (this.options.highlightElement) {
-        highlightElement(els[0], this.page);
-      }
-
-      await els[0].click(options);
-      const promises = [];
-      if (options.waitForNavigation) {
-        promises.push(this.waitForNavigation());
-      }
-      promises.push(this._waitForAction());
-
-      if (this.options.highlightElement) {
-        unhighlightElement(els[0], this.page);
-      }
-
-      return Promise.all(promises);
-    }
-
-    async function findClickable(matcher, locator) {
-      if (locator.react) return findReact(matcher.executionContext(), locator);
-      locator = new Locator(locator);
-      if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);
-
-      let els;
-      const literal = xpathLocator.literal(locator.value);
-
-      els = await findElements.call(this, matcher, Locator.clickable.narrow(literal));
-      if (els.length) return els;
-
-      els = await findElements.call(this, matcher, Locator.clickable.wide(literal));
-      if (els.length) return els;
-
-      try {
-        els = await findElements.call(this, matcher, Locator.clickable.self(literal));
-        if (els.length) return els;
-      } catch (err) {
-        // Do nothing
-      }
-
-      return findElements.call(this, matcher, locator.value); // by css or xpath
-    }
-
-    async function proceedSee(assertType, text, context, strict = false) {
-      let description;
-      let allText;
-      if (!context) {
-        let el = await this.context;
-
-        if (el && !el.getProperty) {
-          // Fallback to body
-          el = await this.context.$('body');
-        }
-
-        allText = [await el.getProperty('innerText').then(p => p.jsonValue())];
-        description = 'web application';
-      } else {
-        const locator = new Locator(context, 'css');
-        description = `element ${locator.toString()}`;
-        const els = await this._locate(locator);
-        assertElementExists(els, locator.toString());
-        allText = await Promise.all(els.map(el => el.getProperty('innerText').then(p => p.jsonValue())));
-      }
-
-      if (strict) {
-        return allText.map(elText => equals(description)[assertType](text, elText));
-      }
-      return stringIncludes(description)[assertType](text, allText.join(' | '));
-    }
-
-    async function findCheckable(locator, context) {
-      let contextEl = await this.context;
-      if (typeof context === 'string') {
-        contextEl = await findElements.call(this, contextEl, (new Locator(context, 'css')).simplify());
-        contextEl = contextEl[0];
-      }
-
-      const matchedLocator = new Locator(locator);
-      if (!matchedLocator.isFuzzy()) {
-        return findElements.call(this, contextEl, matchedLocator.simplify());
-      }
-
-      const literal = xpathLocator.literal(locator);
-      let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal));
-      if (els.length) {
-        return els;
-      }
-      els = await findElements.call(this, contextEl, Locator.checkable.byName(literal));
-      if (els.length) {
-        return els;
-      }
-      return findElements.call(this, contextEl, locator);
-    }
-
-    async function proceedIsChecked(assertType, option) {
-      let els = await findCheckable.call(this, option);
-      assertElementExists(els, option, 'Checkable');
-      els = await Promise.all(els.map(el => el.getProperty('checked')));
-      els = await Promise.all(els.map(el => el.jsonValue()));
-      const selected = els.reduce((prev, cur) => prev || cur);
-      return truth(`checkable ${option}`, 'to be checked')[assertType](selected);
-    }
-
-    async function findVisibleFields(locator) {
-      const els = await findFields.call(this, locator);
-      const visible = await Promise.all(els.map(el => el.boundingBox()));
-      return els.filter((el, index) => visible[index]);
-    }
-
-    async function findFields(locator) {
-      const matchedLocator = new Locator(locator);
-      if (!matchedLocator.isFuzzy()) {
-        return this._locate(matchedLocator);
-      }
-      const literal = xpathLocator.literal(locator);
-
-      let els = await this._locate({ xpath: Locator.field.labelEquals(literal) });
-      if (els.length) {
-        return els;
-      }
-
-      els = await this._locate({ xpath: Locator.field.labelContains(literal) });
-      if (els.length) {
-        return els;
-      }
-      els = await this._locate({ xpath: Locator.field.byName(literal) });
-      if (els.length) {
-        return els;
-      }
-      return this._locate({ css: locator });
-    }
-
-    async function proceedDragAndDrop(sourceLocator, destinationLocator) {
-      const src = await this._locate(sourceLocator);
-      assertElementExists(src, sourceLocator, 'Source Element');
-
-      const dst = await this._locate(destinationLocator);
-      assertElementExists(dst, destinationLocator, 'Destination Element');
-
-      // Note: Using public api .getClickablePoint becaues the .BoundingBox does not take into account iframe offsets
-      const dragSource = await getClickablePoint(src[0]);
-      const dragDestination = await getClickablePoint(dst[0]);
-
-      // Drag start point
-      await this.page.mouse.move(dragSource.x, dragSource.y, { steps: 5 });
-      await this.page.mouse.down();
-
-      // Drag destination
-      await this.page.mouse.move(dragDestination.x, dragDestination.y, { steps: 5 });
-      await this.page.mouse.up();
-
-      await this._waitForAction();
-    }
-
-    async function proceedSeeInField(assertType, field, value) {
-      const els = await findVisibleFields.call(this, field);
-      assertElementExists(els, field, 'Field');
-      const el = els[0];
-      const tag = await el.getProperty('tagName').then(el => el.jsonValue());
-      const fieldType = await el.getProperty('type').then(el => el.jsonValue());
-
-      const proceedMultiple = async (elements) => {
-        const fields = Array.isArray(elements) ? elements : [elements];
-
-        const elementValues = [];
-        for (const element of fields) {
-          elementValues.push(await element.getProperty('value').then(el => el.jsonValue()));
-        }
-
-        if (typeof value === 'boolean') {
-          equals(`no. of items matching > 0: ${field}`)[assertType](value, !!elementValues.length);
-        } else {
-          if (assertType === 'assert') {
-            equals(`select option by ${field}`)[assertType](true, elementValues.length > 0);
-          }
-          elementValues.forEach(val => stringIncludes(`fields by ${field}`)[assertType](value, val));
-        }
-      };
-
-      if (tag === 'SELECT') {
-        const selectedOptions = await el.$$('option:checked');
-        // locate option by values and check them
-        if (value === '') {
-          return proceedMultiple(selectedOptions);
-        }
-
-        const options = await filterFieldsByValue(selectedOptions, value, true);
-        return proceedMultiple(options);
-      }
-
-      if (tag === 'INPUT') {
-        if (fieldType === 'checkbox' || fieldType === 'radio') {
-          if (typeof value === 'boolean') {
-            // Filter by values
-            const options = await filterFieldsBySelectionState(els, true);
-            return proceedMultiple(options);
-          }
-
-          const options = await filterFieldsByValue(els, value, true);
-          return proceedMultiple(options);
-        }
-        return proceedMultiple(els[0]);
-      }
-      const fieldVal = await el.getProperty('value').then(el => el.jsonValue());
-      return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal);
-    }
-
-    async function filterFieldsByValue(elements, value, onlySelected) {
-      const matches = [];
-      for (const element of elements) {
-        const val = await element.getProperty('value').then(el => el.jsonValue());
-        let isSelected = true;
-        if (onlySelected) {
-          isSelected = await elementSelected(element);
-        }
-        if ((value == null || val.indexOf(value) > -1) && isSelected) {
-          matches.push(element);
-        }
-      }
-      return matches;
-    }
-
-    async function filterFieldsBySelectionState(elements, state) {
-      const matches = [];
-      for (const element of elements) {
-        const isSelected = await elementSelected(element);
-        if (isSelected === state) {
-          matches.push(element);
-        }
-      }
-      return matches;
-    }
-
-    async function elementSelected(element) {
-      const type = await element.getProperty('type').then(el => el.jsonValue());
-
-      if (type === 'checkbox' || type === 'radio') {
-        return element.getProperty('checked').then(el => el.jsonValue());
-      }
-      return element.getProperty('selected').then(el => el.jsonValue());
-    }
-
-    function isFrameLocator(locator) {
-      locator = new Locator(locator);
-      if (locator.isFrame()) return locator.value;
-      return false;
-    }
-
-    function assertElementExists(res, locator, prefix, suffix) {
-      if (!res || res.length === 0) {
-        throw new ElementNotFound(locator, prefix, suffix);
-      }
-    }
-
-    function $XPath(element, selector) {
-      const found = document.evaluate(selector, element || document.body, null, 5, null);
-      const res = [];
-      let current = null;
-      while (current = found.iterateNext()) {
-        res.push(current);
-      }
-      return res;
-    }
-
-    async function targetCreatedHandler(page) {
-      if (!page) return;
-      this.withinLocator = null;
-      page.on('load', () => {
-        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);
-      });
-
-      if (this.options.userAgent) {
-        await page.setUserAgent(this.options.userAgent);
-      }
-      if (this.options.windowSize && this.options.windowSize.indexOf('x') > 0) {
-        const dimensions = this.options.windowSize.split('x');
-        const width = parseInt(dimensions[0], 10);
-        const height = parseInt(dimensions[1], 10);
-        await page.setViewport({ width, height });
-      }
-    }
-
-// BC compatibility for Puppeteer < 10
-    async function getClickablePoint(el) {
-      if (el.clickablePoint) return el.clickablePoint();
-      if (el._clickablePoint) return el._clickablePoint();
-      return null;
-    }
-
-// List of key values to key definitions
-// https://github.com/GoogleChrome/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js
-    const keyDefinitionMap = {
-      /* eslint-disable quote-props */
-      '0': 'Digit0',
-      '1': 'Digit1',
-      '2': 'Digit2',
-      '3': 'Digit3',
-      '4': 'Digit4',
-      '5': 'Digit5',
-      '6': 'Digit6',
-      '7': 'Digit7',
-      '8': 'Digit8',
-      '9': 'Digit9',
-      'a': 'KeyA',
-      'b': 'KeyB',
-      'c': 'KeyC',
-      'd': 'KeyD',
-      'e': 'KeyE',
-      'f': 'KeyF',
-      'g': 'KeyG',
-      'h': 'KeyH',
-      'i': 'KeyI',
-      'j': 'KeyJ',
-      'k': 'KeyK',
-      'l': 'KeyL',
-      'm': 'KeyM',
-      'n': 'KeyN',
-      'o': 'KeyO',
-      'p': 'KeyP',
-      'q': 'KeyQ',
-      'r': 'KeyR',
-      's': 'KeyS',
-      't': 'KeyT',
-      'u': 'KeyU',
-      'v': 'KeyV',
-      'w': 'KeyW',
-      'x': 'KeyX',
-      'y': 'KeyY',
-      'z': 'KeyZ',
-      ';': 'Semicolon',
-      '=': 'Equal',
-      ',': 'Comma',
-      '-': 'Minus',
-      '.': 'Period',
-      '/': 'Slash',
-      '`': 'Backquote',
-      '[': 'BracketLeft',
-      '\\': 'Backslash',
-      ']': 'BracketRight',
-      '\'': 'Quote',
-      /* eslint-enable quote-props */
-    };
-
-    function getNormalizedKey(key) {
-      const normalizedKey = getNormalizedKeyAttributeValue(key);
-      if (key !== normalizedKey) {
-        this.debugSection('Input', `Mapping key '${key}' to '${normalizedKey}'`);
-      }
-      // Use key definition to ensure correct key is displayed when Shift modifier is active
-      if (Object.prototype.hasOwnProperty.call(keyDefinitionMap, normalizedKey)) {
-        return keyDefinitionMap[normalizedKey];
-      }
-      return normalizedKey;
-    }
 
     if (this.options.highlightElement) {
       highlightElement(el, this.page);
     }
-
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
-
     if (this.options.highlightElement) {
       unhighlightElement(el, this.page);
     }
-
     return this._waitForAction();
   }
 
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 31b6ca7d7..10ea7ffba 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -5,6 +5,7 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('@codeceptjs/helper');
+const crypto = require('crypto');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals, equals } = require('../assert/equal');
 const { debug } = require('../output');
@@ -27,6 +28,7 @@ const {
 const ElementNotFound = require('./errors/ElementNotFound');
 const ConnectionRefused = require('./errors/ConnectionRefused');
 const Locator = require('../locator');
+const { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
 
 const SHADOW = 'shadow';
 const webRoot = 'body';
@@ -39,7 +41,7 @@ const webRoot = 'body';
  * @typedef WebDriverConfig
  * @type {object}
  * @prop {string} url - base url of website to be tested.
- * @prop {string} browser browser in which to perform testing.
+ * @prop {string} browser - Browser in which to perform testing.
  * @prop {string} [basicAuth] - (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  * @prop {string} [host=localhost] - WebDriver host to connect.
  * @prop {number} [port=4444] - WebDriver port to connect.
@@ -57,6 +59,7 @@ const webRoot = 'body';
  * @prop {object} [desiredCapabilities] Selenium's [desired capabilities](https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities).
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
  * @prop {object} [timeouts] [WebDriver timeouts](http://webdriver.io/docs/timeouts.html) defined as hash.
+ * @prop {boolean} [highlightElement] - highlight the interacting elements
  */
 const config = {};
 
@@ -822,7 +825,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Find a checkbox by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateCheckable('I agree with terms and conditions').then // ...
@@ -835,7 +838,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * const els = await this.helpers.WebDriver._locateClickable('Next page');
@@ -850,7 +853,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateFields('Your email').then // ...
@@ -914,6 +917,10 @@ class WebDriver extends Helper {
       assertElementExists(res, locator, 'Clickable element');
     }
     const elem = usingFirstElement(res);
+
+    if (this.options.highlightElement) {
+      highlightElement(elem, this.browser);
+    }
     return this.browser[clickMethod](getElementId(elem));
   }
 
@@ -1024,6 +1031,13 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    if (this.options.highlightElement) {
+      highlightElement(elem, this.browser);
+    }
+
+    if (this.options.highlightElement) {
+      unhighlightElement(elem, this.browser);
+    }
     return elem.setValue(value.toString());
   }
 
@@ -1035,6 +1049,12 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    if (this.options.highlightElement) {
+      highlightElement(elem, this.browser);
+    }
+    if (this.options.highlightElement) {
+      unhighlightElement(elem, this.browser);
+    }
     return elem.addValue(value.toString());
   }
 
@@ -1046,6 +1066,12 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    if (this.options.highlightElement) {
+      highlightElement(elem, this.browser);
+    }
+    if (this.options.highlightElement) {
+      unhighlightElement(elem, this.browser);
+    }
     return elem.clearValue(getElementId(elem));
   }
 
diff --git a/lib/helper/scripts/highlightElement.js b/lib/helper/scripts/highlightElement.js
index 0a4764be0..c9aa4346c 100644
--- a/lib/helper/scripts/highlightElement.js
+++ b/lib/helper/scripts/highlightElement.js
@@ -1,7 +1,15 @@
 module.exports.highlightElement = (element, context) => {
-  context.evaluate(el => el.style.border = '2px solid red', element);
+  try {
+    context.evaluate(el => el.style.border = '2px solid red', element);
+  } catch (e) {
+    context.execute(el => el.style.border = '2px solid red', element);
+  }
 };
 
 module.exports.unhighlightElement = (element, context) => {
-  context.evaluate(el => el.style.border = '', element);
+  try {
+    context.evaluate(el => el.style.border = '', element);
+  } catch (e) {
+    context.execute(el => el.style.border = '', element);
+  }
 };
diff --git a/typings/tslint.json b/typings/tslint.json
index 1180f682c..9cf38c96e 100644
--- a/typings/tslint.json
+++ b/typings/tslint.json
@@ -14,7 +14,8 @@
     "array-type": false,
     "trim-file": false,
     "no-consecutive-blank-lines": false,
-    "no-redundant-jsdoc": false
+    "no-redundant-jsdoc": false,
+    "adjacent-overload-signatures": false
   },
   "linterOptions": {
     "exclude": [