codeceptjs 2.6.7 → 2.6.11

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 2.6.11
+
+* [Playwright] Playwright 1.4 compatibility
+* [Playwright] Added `ignoreHTTPSErrors` config option (default: false). See #2566 by gurjeetbains 
+* Added French translation by @vimar 
+* [WebDriver] Updated `dragSlider` to work in WebDriver W3C protocol. Fixes #2557 by suniljaiswal01  
+
+## 2.6.10
+
+* Fixed saving options for suite via `Feature('title', {key: value})` by @Diokuz. See #2553 and [Docs](https://codecept.io/advanced/#dynamic-configuration)
+
+## 2.6.9
+
+* [Puppeteer][Playwright] SessionStorage is now cleared in after hook. See #2524
+* When helper load failed the error stack is now logged by @SkReD. See #2541
+* Small documentation fixes.
+
+## 2.6.8
+
+* [WebDriver][Protractor][Playwright][Puppeteer][Nightmare] `saveElementScreenshot` method added to make screenshot of an element. By @suniljaiswal01
+* [Playwright][Puppeteer] Added `type` method to type a text using keyboard with an optional delay.
+* [WebDriver] Added optional `delay` argument to `type` method to slow down typing.
+* [Puppeteer] Fixed `amOnPage` freeze when `getPageTimeout` is 0"; set 30 sec as default timeout by @Vorobeyko.
+* Fixed printing step with null argument in custom helper by @sjana-aj. See #2494
+* Fix missing screenshot on failure when REST helper is in use #2513 by @PeterNgTr
+* Improve error logging in the `screenshotOnFail` plugin #2512 by @pablopaul
+
 ## 2.6.7
 
 * Add REST helper into `standardActingHelpers` array #2474 by @PeterNgTr
@@ -164,7 +191,7 @@ I.see('You are logged out');
   * works with WebDriver helper
 * Avoid failiure report on successful retry in worker by @koushikmohan1996
 * Added translation ability to Scenario, Feature and other context methods by @koushikmohan1996
-  * 📢 Please help us translate context methods to your language! See [italian translation](https://github.com/Codeception/CodeceptJS/blob/master/translations/it-IT.js#L3) as an example and send [patches to vocabularies](https://github.com/Codeception/CodeceptJS/tree/master/translations).
+  * 📢 Please help us translate context methods to your language! See [italian translation](https://github.com/codeceptjs/CodeceptJS/blob/master/translations/it-IT.js#L3) as an example and send [patches to vocabularies](https://github.com/codeceptjs/CodeceptJS/tree/master/translations).
 * allurePlugin: Added `say` comments to allure reports by @PeterNgTr.
 * Fixed no custom output folder created when executed with run-worker. Fix by @PeterNgTr
 * [Puppeteer] Fixed error description for context element not found. See #2065. Fix by @PeterNgTr
@@ -249,7 +276,7 @@ I.click('$register_button');
 Changed pressKey method to resolve issues and extend functionality.
   * Did not properly recognize 'Meta' (or 'Command') as modifier key.
   * Right modifier keys did not work in WebDriver using JsonWireProtocol.
-  * 'Shift' + <key> combination would not reflect actual keyboard behavior.
+  * 'Shift' + 'key' combination would not reflect actual keyboard behavior.
   * Respect sequence with multiple modifier keys passed to pressKey.
   * Added support to automatic change operation modifier key based on operating system.
 * [Puppeteer][WebDriver] Added `pressKeyUp` and `pressKeyDown` to press and release modifier keys like `Control` or `Shift`. By @martomo.
@@ -369,7 +396,7 @@ I.mockRequest('POST', '/users', { user: { name: 'fake' }});
 
 ## 2.1.5
 
-* **EXPERIMENTAL** [Wix Detox support](https://github.com/Codeception/detox-helper) introduced as standalone helper. Provides a faster alternative to Appium for mobile testing.
+* **EXPERIMENTAL** [Wix Detox support](https://github.com/codeceptjs/detox-helper) introduced as standalone helper. Provides a faster alternative to Appium for mobile testing.
 * Saving successful commands inside interactive pause into `_output/cli-history` file. By @hubidu
 * Fixed hanging error handler inside scenario. See #1721 by @haily-lgc.
 * Fixed by @Vorobeyko: tests did not fail when an exception was raised in async bootstrap.
@@ -602,7 +629,7 @@ Use it with `FileSystem` helper to test availability of a file:
 * **Using `codecept.conf.js` as default configuration format**
 * Fixed "enametoolong" error when saving screenshots for data driven tests by @PeterNgTr
 * Updated NodeJS to 10 in Docker image
-* [Pupeteer] Add support to use WSEndpoint. Allows to execute tests remotely. [See #1350] by @gabrielcaires (https://github.com/Codeception/CodeceptJS/pull/1350)
+* [Pupeteer] Add support to use WSEndpoint. Allows to execute tests remotely. [See #1350] by @gabrielcaires (https://github.com/codeceptjs/CodeceptJS/pull/1350)
 * In interactive shell [Enter] goes to next step. Improvement by @PeterNgTr.
 * `I.say` accepts second parameter as color to print colorful comments. Improvement by @PeterNgTr.
 
@@ -1334,7 +1361,7 @@ codeceptjs run users_test.js -c tests
 
 * Protractor ^5.0.0 support (while keeping ^4.0.9 compatibility)
 * Fix 'fullTitle() is not a function' in exit.js by @hubidu. See #388.
-* [Nightmare] Fix for `waitTimeout` by @HughZurname. See #391. Resolves #236* Dockerized CodeceptJS setup by @artiomnist. [See reference](https://github.com/Codeception/CodeceptJS/blob/master/docker/README.md)
+* [Nightmare] Fix for `waitTimeout` by @HughZurname. See #391. Resolves #236* Dockerized CodeceptJS setup by @artiomnist. [See reference](https://github.com/codeceptjs/CodeceptJS/blob/master/docker/README.md)
 
 ## 0.4.16
 
@@ -1433,7 +1460,7 @@ codeceptjs run -o '{ "bootstrap": "bootstrap.js"}'
 codeceptjs run -o '{ "helpers": {"WebDriverIO": {"browser": "chrome"}}}'
 ```
 
-* Added [regression tests](https://github.com/Codeception/CodeceptJS/tree/master/test/runner) for codeceptjs tests runner.
+* Added [regression tests](https://github.com/codeceptjs/CodeceptJS/tree/master/test/runner) for codeceptjs tests runner.
 
 ## 0.4.11
 

package/README.md

@@ -2,7 +2,7 @@
 
 # CodeceptJS
 
-Reference: [Helpers API](https://github.com/Codeception/CodeceptJS/blob/master/docs) | [Demo](https://github.com/Codeception/codeceptjs-demo)
+Reference: [Helpers API](https://github.com/codeceptjs/CodeceptJS/blob/master/docs) | [Demo](https://github.com/codeceptjs/codeceptjs-demo)
 
 ## Supercharged E2E Testing
 
@@ -27,13 +27,13 @@ CodeceptJS tests are:
 
 CodeceptJS uses **Helper** modules to provide actions to `I` object. Currently CodeceptJS has these helpers:
 
-* [**Puppeteer**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/Puppeteer.md) - uses Google Chrome's Puppeteer for fast headless testing.
-* [**WebDriver**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/WebDriver.md) - uses [webdriverio](http://webdriver.io/) to run tests via WebDriver protocol.
-* [**Protractor**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/Protractor.md) - helper empowered by [Protractor](http://protractortest.org/) to run tests via WebDriver protocol.
-* [**TestCafe**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/TestCafe.md) - cheap and fast cross-browser test automation.
-* [**Nightmare**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/Nightmare.md) - uses Electron and NightmareJS to run tests.
-* [**Appium**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/Appium.md) - for **mobile testing** with Appium
-* [**Detox**](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/Detox.md) - This is a wrapper on top of Detox library, aimied to unify testing experience for CodeceptJS framework. Detox provides a grey box testing for mobile applications, playing especially good for React Native apps.
+* [**Puppeteer**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/Puppeteer.md) - uses Google Chrome's Puppeteer for fast headless testing.
+* [**WebDriver**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/WebDriver.md) - uses [webdriverio](http://webdriver.io/) to run tests via WebDriver protocol.
+* [**Protractor**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/Protractor.md) - helper empowered by [Protractor](http://protractortest.org/) to run tests via WebDriver protocol.
+* [**TestCafe**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/TestCafe.md) - cheap and fast cross-browser test automation.
+* [**Nightmare**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/Nightmare.md) - uses Electron and NightmareJS to run tests.
+* [**Appium**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/Appium.md) - for **mobile testing** with Appium
+* [**Detox**](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/Detox.md) - This is a wrapper on top of Detox library, aimied to unify testing experience for CodeceptJS framework. Detox provides a grey box testing for mobile applications, playing especially good for React Native apps.
 
 And more to come...
 
@@ -113,7 +113,7 @@ Scenario('test some forms', (I) => {
 ```
 
 All actions are performed by I object; assertions functions start with `see` function.
-In this examples all methods of `I` are taken from WebDriver helper, see [reference](https://github.com/Codeception/CodeceptJS/blob/master/docs/helpers/WebDriver.md) to learn how to use them.
+In this examples all methods of `I` are taken from WebDriver helper, see [reference](https://github.com/codeceptjs/CodeceptJS/blob/master/docs/helpers/WebDriver.md) to learn how to use them.
 
 Let's execute this test with `run` command. Additional option `--steps` will show us the running process. We recommend use `--steps` or `--debug` during development.
 
@@ -268,8 +268,8 @@ When using typescript, replace `module.exports` with `export` for autocompletion
 
 ## Contributing
 
- - ### [Contributing Guide](https://github.com/Codeception/CodeceptJS/blob/master/.github/CONTRIBUTING.md)
- - ### [Code of conduct](https://github.com/Codeception/CodeceptJS/blob/master/.github/CODE_OF_CONDUCT.md) 
+ - ### [Contributing Guide](https://github.com/codeceptjs/CodeceptJS/blob/master/.github/CONTRIBUTING.md)
+ - ### [Code of conduct](https://github.com/codeceptjs/CodeceptJS/blob/master/.github/CODE_OF_CONDUCT.md) 
 
 
 ## Contributors

package/docs/advanced.md

@@ -159,6 +159,27 @@ Feature('My feature', {key: val});
 Scenario('My scenario', {key: val}, (I) => {});
 ```
 
+You can use this options for build your own [plugins](https://codecept.io/hooks/#plugins) with [event listners](https://codecept.io/hooks/#api). Example: 
+
+```js
+  // for test
+  event.dispatcher.on(event.test.before, (test) => {
+    ...
+    if (test.opts.key) {
+      ...
+    }
+    ...
+  });
+  // or for suite
+  event.dispatcher.on(event.suite.before, (suite) => {
+    ...
+    if (suite.opts.key) {
+      ...
+    }
+    ...
+  });
+```
+
 ### Timeout
 
 By default there is no timeout for tests, however you can change this value for a specific suite:

package/docs/basics.md

@@ -213,7 +213,7 @@ I.fillField('password', secret('123456'));
 
 ### Assertions
 
-In order to verify the expected behavior of a web application, it's content should be checked.
+In order to verify the expected behavior of a web application, its content should be checked.
 CodeceptJS provides built-in assertions for that. They start with a `see` (or `dontSee`) prefix.
 
 The most general and common assertion is `see`, which checks visilibility of a text on a page:
@@ -296,7 +296,7 @@ Tests are written in a synchronous way. This improves the readability and mainta
 While writing tests you should not think about promises, and instead should focus on the test scenario.
 
 However, behind the scenes **all actions are wrapped in promises**, inside of the `I` object.
-[Global promise](https://github.com/codecept-js/CodeceptJS/blob/master/lib/recorder.js) chain is initialized before each test and all `I.*` calls will be appended to it, as well as setup and teardown.
+[Global promise](https://github.com/codeceptjs/CodeceptJS/blob/master/lib/recorder.js) chain is initialized before each test and all `I.*` calls will be appended to it, as well as setup and teardown.
 
 > 📺 [Learn how CodeceptJS](https://www.youtube.com/watch?v=MDLLpHAwy_s) works with promises by watching video on YouTube
 
@@ -402,7 +402,7 @@ You can have multiple configuration files for a the same project, in this case y
 npx codeceptjs run -c codecept.ci.conf.js
 ```
 
-Tuning configuration for helpers like WebDriver, Puppeteer can be hard, as it requires good understanding of how these technologies work. Use the [`@codeceptjs/configure`](https://github.com/codecept-js/configure) package with common configuration recipes.
+Tuning configuration for helpers like WebDriver, Puppeteer can be hard, as it requires good understanding of how these technologies work. Use the [`@codeceptjs/configure`](https://github.com/codeceptjs/configure) package with common configuration recipes.
 
 For instance, you can set the window size or toggle headless mode, no matter of which helpers are actually used.
 
@@ -419,7 +419,7 @@ exports.config = {
 }
 ```
 
-> ▶ See more [configuration recipes](https://github.com/codecept-js/configure)
+> ▶ See more [configuration recipes](https://github.com/codeceptjs/configure)
 
 ## Debug
 
@@ -616,7 +616,7 @@ AfterSuite((I) => {
 });
 ```
 
-[Here are some ideas](https://github.com/codecept-js/CodeceptJS/pull/231#issuecomment-249554933) on where to use BeforeSuite hooks.
+[Here are some ideas](https://github.com/codeceptjs/CodeceptJS/pull/231#issuecomment-249554933) on where to use BeforeSuite hooks.
 
 ## Within
 
@@ -637,6 +637,7 @@ I.see('There were problems creating your account.');
 ```
 
 > ⚠ `within` can cause problems when used incorrectly. If you see a weird behavior of a test try to refactor it to not use `within`. It is recommended to keep within for simplest cases when possible.
+> Since `within` returns a Promise, it may be necessary to `await` the result even when you're not intending to use the return value.
 
 `within` can also work with IFrames. A special `frame` locator is required to locate the iframe and get into its context.
 

package/docs/bdd.md

@@ -265,7 +265,7 @@ If we use hashes() with the previous exemple :
 Given('I have products in my cart', (table) => { // eslint-disable-line
   //parse the table by header
   const tableByHeader = table.parse().hashes();
-  for (const row in tableByHeader) {
+  for (const row of tableByHeader) {
 
     // take values
     const name = row.name;
@@ -416,4 +416,3 @@ To run only tests without features use `--tests` option:
 ```
 npx codeceptjs run --tests
 ```
-

package/docs/books.md

@@ -7,7 +7,7 @@ editLink: false
 ---
 
 # Books & Posts
-> Add your own books or posts to our [Wiki Page](https://github.com/Codeception/CodeceptJS/wiki/Books-&-Posts)
+> Add your own books or posts to our [Wiki Page](https://github.com/codeceptjs/CodeceptJS/wiki/Books-&-Posts)
 ### [Practical End 2 End Testing with CodeceptJS](https://leanpub.com/codeceptjs/)
 
 A book by **Paul Vincent Beigang**

package/docs/build/Appium.js

@@ -1,13 +1,12 @@
 let webdriverio;
 let wdioV4;
-let SCREEN_SIZE;
 
 const fs = require('fs');
 const requireg = require('requireg');
 
 const Webdriver = require('./WebDriver');
 const AssertionFailedError = require('../assert/error');
-const truth = require('../assert/truth').truth;
+const { truth } = require('../assert/truth');
 const recorder = require('../recorder');
 const Locator = require('../locator');
 const ConnectionRefused = require('./errors/ConnectionRefused');

package/docs/build/FileSystem.js

@@ -3,9 +3,9 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('../helper');
-const fileExists = require('../utils').fileExists;
-const fileIncludes = require('../assert/include').fileIncludes;
-const fileEquals = require('../assert/equal').fileEquals;
+const { fileExists } = require('../utils');
+const { fileIncludes } = require('../assert/include');
+const { fileEquals } = require('../assert/equal');
 
 /**
  * Helper for testing filesystem.

package/docs/build/Mochawesome.js

@@ -5,7 +5,7 @@ let currentSuite;
 const requireg = require('requireg');
 
 const Helper = require('../helper');
-const clearString = require('../utils').clearString;
+const { clearString } = require('../utils');
 
 class Mochawesome extends Helper {
   constructor(config) {

package/docs/build/Nightmare.js

@@ -3,11 +3,11 @@ const requireg = require('requireg');
 const urlResolve = require('url').resolve;
 
 const Helper = require('../helper');
-const stringIncludes = require('../assert/include').includes;
-const urlEquals = require('../assert/equal').urlEquals;
-const equals = require('../assert/equal').equals;
-const empty = require('../assert/empty').empty;
-const truth = require('../assert/truth').truth;
+const { includes: stringIncludes } = require('../assert/include');
+const { urlEquals } = require('../assert/equal');
+const { equals } = require('../assert/equal');
+const { empty } = require('../assert/empty');
+const { truth } = require('../assert/truth');
 const Locator = require('../locator');
 const ElementNotFound = require('./errors/ElementNotFound');
 const {
@@ -1600,6 +1600,82 @@ class Nightmare extends Helper {
     return this.browser.refresh();
   }
 
+  /**
+   * Saves screenshot of the specified locator to ouput folder (set in codecept.json or codecept.conf.js).
+   * Filename is relative to output folder.
+   * 
+   * ```js
+   * I.saveElementScreenshot(`#submit`,'debug.png');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.  
+   * @param {string} fileName file name to save.
+   *
+   */
+  async saveElementScreenshot(locator, fileName) {
+    const outputFile = screenshotOutputFolder(fileName);
+
+    const rect = await this.grabElementBoundingRect(locator);
+
+    const button_clip = {
+      x: Math.floor(rect.x),
+      y: Math.floor(rect.y),
+      width: Math.floor(rect.width),
+      height: Math.floor(rect.height),
+    };
+
+    this.debug(`Screenshot of ${locator} element has been saved to ${outputFile}`);
+    // take the screenshot
+    await this.browser.screenshot(outputFile, button_clip);
+  }
+
+  /**
+   * 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
+   * ```
+   * @param {string|object} locator element located by CSS|XPath|strict locator.
+   * @param {string} elementSize x, y, width or height of the given element.
+   * @returns {object} Element bounding rectangle
+   */
+  async grabElementBoundingRect(locator, prop) {
+    locator = new Locator(locator, 'css');
+
+    const rect = await this.browser.evaluate(async (by, locator) => {
+      // store the button in a variable
+
+      const build_cluster_btn = await window.codeceptjs.findElement(by, locator);
+
+      // use the getClientRects() function on the button to determine
+      // the size and location
+      const rect = build_cluster_btn.getBoundingClientRect();
+
+      // convert the rectangle to a clip object and return it
+      return {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+      };
+    }, locator.type, locator.value);
+
+    if (prop) return rect[prop];
+    return rect;
+  }
+
   /**
    * Saves a screenshot to ouput folder (set in codecept.json or codecept.conf.js).
    * Filename is relative to output folder.

package/docs/build/Playwright.js

@@ -1,7 +1,6 @@
 const requireg = require('requireg');
 const path = require('path');
 const fs = require('fs');
-const fsExtra = require('fs-extra');
 
 const Helper = require('../helper');
 const Locator = require('../locator');
@@ -11,7 +10,7 @@ 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,
@@ -160,7 +159,7 @@ const { createValueEngine, createDisabledEngine } = require('./extras/Playwright
  * }
  * ```
  *
- * #### Example #6: Lunach tests emulating iPhone 6
+ * #### Example #6: Launch tests emulating iPhone 6
  *
  *
  *
@@ -234,6 +233,7 @@ class Playwright extends Helper {
       keepBrowserState: false,
       show: false,
       defaultPopupAction: 'accept',
+      ignoreHTTPSErrors: false, // Adding it here o that context can be set up to ignore the SSL errors
     };
 
     config = Object.assign(defaults, config);
@@ -348,6 +348,9 @@ class Playwright extends Helper {
       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;
@@ -546,7 +549,7 @@ class Playwright extends Helper {
     this.browser.on('targetchanged', (target) => {
       this.debugSection('Url', target.url());
     });
-    this.browserContext = await this.browser.newContext({ acceptDownloads: true, ...this.options.emulate });
+    this.browserContext = await this.browser.newContext({ ignoreHTTPSErrors: this.options.ignoreHTTPSErrors, acceptDownloads: true, ...this.options.emulate });// Adding the HTTPSError ignore in the context so that we can ignore those errors
 
     const existingPages = await this.browserContext.pages();
 
@@ -722,7 +725,7 @@ class Playwright extends Helper {
     assertElementExists(els);
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-    const { x, y } = await els[0]._clickablePoint();
+    const { x, y } = await clickablePoint(els[0]);
     await this.page.mouse.move(x + offsetX, y + offsetY);
     return this._waitForAction();
   }
@@ -810,7 +813,7 @@ class Playwright extends Helper {
       const els = await this._locate(locator);
       assertElementExists(els, locator, 'Element');
       await els[0].scrollIntoViewIfNeeded();
-      const elementCoordinates = await els[0]._clickablePoint();
+      const elementCoordinates = await clickablePoint(els[0]);
       await this.executeScript((offsetX, offsetY) => window.scrollBy(offsetX, offsetY), { offsetX: elementCoordinates.x + offsetX, offsetY: elementCoordinates.y + offsetY });
     } else {
       await this.executeScript(({ offsetX, offsetY }) => window.scrollTo(offsetX, offsetY), { offsetX, offsetY });
@@ -1432,7 +1435,7 @@ class Playwright extends Helper {
    * @param {string|string[]} key key or array of keys to press.
    * 
    *
-   * _Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/Playwright#1313](https://github.com/GoogleChrome/Playwright/issues/1313)).
+   * _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 = [];
@@ -1459,6 +1462,37 @@ class Playwright extends Helper {
     return this._waitForAction();
   }
 
+  /**
+   * 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`](#fillfield) 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']);
+   * ```
+   * 
+   * @param {string|string[]} key or array of keys to type.
+   * @param {?number} [delay=null] (optional) delay in ms between key presses
+   * 
+   */
+  async type(keys, delay = null) {
+    if (!Array.isArray(keys)) {
+      keys = keys.split('');
+    }
+
+    for (const key of keys) {
+      await this.page.keyboard.press(key);
+      if (delay) await this.wait(delay / 1000);
+    }
+  }
+
   /**
    * Fills a text field or textarea, after clearing its value, with the given string.
    * Field is located by name, label, CSS, or XPath.
@@ -2176,8 +2210,8 @@ class Playwright extends Helper {
     const src = await this._locate(locator);
     assertElementExists(src, locator, 'Slider Element');
 
-    // Note: Using private api ._clickablePoint because the .BoundingBox does not take into account iframe offsets!
-    const sliderSource = await src[0]._clickablePoint();
+    // Note: Using clickablePoint private api because the .BoundingBox does not take into account iframe offsets!
+    const sliderSource = await clickablePoint(src[0]);
 
     // Drag start point
     await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
@@ -2216,6 +2250,29 @@ class Playwright extends Helper {
     return array.length === 1 ? array[0] : array;
   }
 
+  /**
+   * Saves screenshot of the specified locator to ouput folder (set in codecept.json or codecept.conf.js).
+   * Filename is relative to output folder.
+   * 
+   * ```js
+   * I.saveElementScreenshot(`#submit`,'debug.png');
+   * ```
+   * 
+   * @param {string|object} locator element located by CSS|XPath|strict locator.  
+   * @param {string} fileName file name to save.
+   *
+   */
+  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 ${locator} element has been saved to ${outputFile}`);
+    return elem.screenshot({ path: outputFile, type: 'png' });
+  }
+
   /**
    * Saves a screenshot to ouput folder (set in codecept.json or codecept.conf.js).
    * Filename is relative to output folder.
@@ -2674,7 +2731,7 @@ class Playwright extends Helper {
   /**
    * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
    *
-   * See [Pupeteer's reference](https://github.com/GoogleChrome/Playwright/blob/master/docs/api.md#pagewaitfornavigationoptions)
+   * See [Pupeteer's reference](https://github.com/microsoft/Playwright/blob/master/docs/api.md#pagewaitfornavigationoptions)
    *
    * @param {*} opts
    */
@@ -2835,7 +2892,14 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
-  await els[0].click(options);
+  /*
+    using the force true options itself but instead dispatching a click
+  */
+  if (options.force) {
+    await els[0].dispatchEvent('click');
+  } else {
+    await els[0].click(options);
+  }
   const promises = [];
   if (options.waitForNavigation) {
     promises.push(this.waitForNavigation());
@@ -2957,9 +3021,9 @@ async function proceedDragAndDrop(sourceLocator, destinationLocator, options = {
   const dst = await this._locate(destinationLocator);
   assertElementExists(dst, destinationLocator, 'Destination Element');
 
-  // Note: Using private api ._clickablePoint becaues the .BoundingBox does not take into account iframe offsets!
-  const dragSource = await src[0]._clickablePoint();
-  const dragDestination = await dst[0]._clickablePoint();
+  // Note: Using clickablePoint private api becaues the .BoundingBox does not take into account iframe offsets!
+  const dragSource = await clickablePoint(src[0]);
+  const dragDestination = await clickablePoint(dst[0]);
 
   // Drag start point
   await this.page.mouse.move(dragSource.x, dragSource.y, { steps: 5 });
@@ -3084,10 +3148,20 @@ function $XPath(element, selector) {
 async function targetCreatedHandler(page) {
   if (!page) return;
   this.withinLocator = null;
-  page.on('load', (frame) => {
+  page.on('load', () => {
     page.$('body')
       .catch(() => null)
-      .then(context => this.context = context);
+      .then(async context => {
+        if (this.context._type === 'Frame') {
+          // we are inside iframe?
+          const frameEl = await this.context.frameElement();
+          this.context = await frameEl.contentFrame();
+          return;
+        }
+        // if context element was in iframe - keep it
+        // if (await this.context.ownerFrame()) return;
+        this.context = context;
+      });
   });
   page.on('console', (msg) => {
     this.debugSection(`Browser:${ucfirst(msg.type())}`, (msg._text || '') + msg.args().join(' '));
@@ -3106,7 +3180,7 @@ async function targetCreatedHandler(page) {
 }
 
 // List of key values to key definitions
-// https://github.com/GoogleChrome/Playwright/blob/v1.20.0/lib/USKeyboardLayout.js
+// https://github.com/puppeteer/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js
 const keyDefinitionMap = {
   /* eslint-disable quote-props */
   '0': 'Digit0',
@@ -3170,3 +3244,12 @@ function getNormalizedKey(key) {
   }
   return normalizedKey;
 }
+
+async function clickablePoint(el) {
+  const rect = await el.boundingBox();
+  if (!rect) throw new ElementNotFound(el);
+  const {
+    x, y, width, height,
+  } = rect;
+  return { x: x + width / 2, y: y + height / 2 };
+}