codeceptjs 3.5.10 → 3.5.11

package/docs/build/Playwright.js

@@ -33,7 +33,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
-const findReact = require('./extras/React');
+const { findReact, findVue } = require('./extras/PlaywrightReactVueLocator');
 
 let playwright;
 let perfTiming;
@@ -666,7 +666,7 @@ class Playwright extends Helper {
    * ```
    *
    * @param {string} description used to show in logs.
-   * @param {function} fn async function that executed with Playwright helper as argumen
+   * @param {function} fn async function that executed with Playwright helper as arguments
    */
   usePlaywrightTo(description, fn) {
     return this._useTo(...arguments);
@@ -965,16 +965,9 @@ class Playwright extends Helper {
   }
 
   /**
-   * Resize the current window to provided width and height.
-   * First parameter can be set to `maximize`.
-   * 
-   * @param {number} width width in pixels or `maximize`.
-   * @param {number} height height in pixels.
-   * @returns {void} automatically synchronized promise through #recorder
-   * 
    *
    * Unlike other drivers Playwright changes the size of a viewport, not the window!
-   * Playwright does not control the window of a browser so it can't adjust its real size.
+   * Playwright does not control the window of a browser, so it can't adjust its real size.
    * It also can't maximize a window.
    *
    * Update configuration to change real window size on start:
@@ -984,6 +977,14 @@ class Playwright extends Helper {
    * // @codeceptjs/configure package must be installed
    * { setWindowSize } = require('@codeceptjs/configure');
    * ````
+   *
+   * Resize the current window to provided width and height.
+   * First parameter can be set to `maximize`.
+   * 
+   * @param {number} width width in pixels or `maximize`.
+   * @param {number} height height in pixels.
+   * @returns {void} automatically synchronized promise through #recorder
+   * 
    */
   async resizeWindow(width, height) {
     if (width === 'maximize') {
@@ -1021,7 +1022,7 @@ class Playwright extends Helper {
    * I.moveCursorTo('#submit', 5,5);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @param {number} [offsetX=0] (optional, `0` by default) X-axis offset.
    * @param {number} [offsetY=0] (optional, `0` by default) Y-axis offset.
    * @returns {void} automatically synchronized promise through #recorder
@@ -1049,7 +1050,7 @@ class Playwright extends Helper {
    * I.see('#add-to-cart-bnt');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @param {any} [options] Playwright only: [Additional options](https://playwright.dev/docs/api/class-locator#locator-focus) for available options object as 2nd argument.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -1079,7 +1080,7 @@ class Playwright extends Helper {
    * I.dontSee('#add-to-cart-btn');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @param {any} [options] Playwright only: [Additional options](https://playwright.dev/docs/api/class-locator#locator-blur) for available options object as 2nd argument.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -1095,7 +1096,7 @@ class Playwright extends Helper {
   /**
    * Return the checked status of given element.
    *
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {object} [options] See https://playwright.dev/docs/api/class-locator#locator-is-checked
    * @return {Promise<boolean>}
    *
@@ -1114,7 +1115,7 @@ class Playwright extends Helper {
   /**
    * Return the disabled status of given element.
    *
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {object} [options] See https://playwright.dev/docs/api/class-locator#locator-is-disabled
    * @return {Promise<boolean>}
    *
@@ -1126,24 +1127,26 @@ class Playwright extends Helper {
   }
 
   /**
+   *
+   * ```js
+   * // specify coordinates for source position
+   * I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
+   * ```
+   *
+   * > When no option is set, custom drag and drop would be used, to use the dragAndDrop API from Playwright, please set options, for example `force: true`
+   *
    * Drag an item to a destination element.
    * 
    * ```js
    * I.dragAndDrop('#dragHandle', '#container');
    * ```
    * 
-   * @param {LocatorOrString} srcElement located by CSS|XPath|strict locator.
-   * @param {LocatorOrString} destElement located by CSS|XPath|strict locator.
+   * @param {string | object} srcElement located by CSS|XPath|strict locator.
+   * @param {string | object} destElement located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-drag-and-drop) can be passed as 3rd argument.
    *
-   * ```js
-   * // specify coordinates for source position
-   * I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
-   * ```
-   *
-   * > When no option is set, custom drag and drop would be used, to use the dragAndDrop API from Playwright, please set options, for example `force: true`
    */
   async dragAndDrop(srcElement, destElement, options) {
     const src = new Locator(srcElement);
@@ -1273,7 +1276,7 @@ class Playwright extends Helper {
    * I.scrollTo('#submit', 5, 5);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @param {number} [offsetX=0] (optional, `0` by default) X-axis offset.
    * @param {number} [offsetY=0] (optional, `0` by default) Y-axis offset.
    * @returns {void} automatically synchronized promise through #recorder
@@ -1458,7 +1461,7 @@ class Playwright extends Helper {
    * const webElements = await I.grabWebElements('#button');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @returns {Promise<*>} WebElement of being used Web helper
    * 
    *
@@ -1475,7 +1478,7 @@ class Playwright extends Helper {
    * const webElement = await I.grabWebElement('#button');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @returns {Promise<*>} WebElement of being used Web helper
    * 
    *
@@ -1619,7 +1622,7 @@ class Playwright extends Helper {
    * ```js
    * I.seeElement('#modal');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
@@ -1637,7 +1640,7 @@ class Playwright extends Helper {
    * I.dontSeeElement('.modal'); // modal is not shown
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|Strict locator.
+   * @param {string | object} locator located by CSS|XPath|Strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
@@ -1655,7 +1658,7 @@ class Playwright extends Helper {
    * ```js
    * I.seeElementInDOM('#modal');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -1671,7 +1674,7 @@ class Playwright extends Helper {
    * I.dontSeeElementInDOM('.nav'); // checks that element is not on page visible or not
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|Strict locator.
+   * @param {string | object} locator located by CSS|XPath|Strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -1736,14 +1739,14 @@ class Playwright extends Helper {
    * I.click({css: 'nav a.login'});
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
-   * @param {?CodeceptJS.LocatorOrString | null} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+   * @param {string | object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+   * @param {?string | object | null} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-click) for click available as 3rd argument.
    *
-   * Examples:
+   * @example
    *
    * ```js
    * // click on element at position
@@ -1793,8 +1796,8 @@ class Playwright extends Helper {
    * I.forceClick({css: 'nav a.login'});
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+   * @param {string | object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+   * @param {?string | object} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -1813,12 +1816,10 @@ class Playwright extends Helper {
    * I.doubleClick('.btn.edit');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
+   * @param {string | object} locator clickable link or button located by text, or any element located by CSS|XPath|strict locator.
+   * @param {?string | object} [context=null] (optional, `null` by default) element to search in CSS|XPath|Strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   *
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
@@ -1836,18 +1837,27 @@ class Playwright extends Helper {
    * I.rightClick('Click me', '.context');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator clickable element located by CSS|XPath|strict locator.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element located by CSS|XPath|strict locator.
+   * @param {string | object} locator clickable element located by CSS|XPath|strict locator.
+   * @param {?string | object} [context=null] (optional, `null` by default) element located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   *
    */
   async rightClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { button: 'right' });
   }
 
   /**
+   *
+   * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-check) for check available as 3rd argument.
+   *
+   * Examples:
+   *
+   * ```js
+   * // click on element at position
+   * I.checkOption('Agree', '.signup', { position: { x: 5, y: 5 } })
+   * ```
+   * > ⚠️ To avoid flakiness, option `force: true` is set by default
+   *
    * Selects a checkbox or radio button.
    * Element is located by label or name or CSS or XPath.
    * 
@@ -1858,20 +1868,11 @@ class Playwright extends Helper {
    * I.checkOption('I Agree to Terms and Conditions');
    * I.checkOption('agree', '//form');
    * ```
-   * @param {CodeceptJS.LocatorOrString} field checkbox located by label | name | CSS | XPath | strict locator.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element located by CSS | XPath | strict locator.
+   * @param {string | object} field checkbox located by label | name | CSS | XPath | strict locator.
+   * @param {?string | object} [context=null] (optional, `null` by default) element located by CSS | XPath | strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
-   * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-check) for check available as 3rd argument.
-   *
-   * Examples:
-   *
-   * ```js
-   * // click on element at position
-   * I.checkOption('Agree', '.signup', { position: { x: 5, y: 5 } })
-   * ```
-   * > ⚠️ To avoid flakiness, option `force: true` is set by default
    */
   async checkOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context);
@@ -1880,6 +1881,17 @@ class Playwright extends Helper {
   }
 
   /**
+   *
+   * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-uncheck) for uncheck available as 3rd argument.
+   *
+   * Examples:
+   *
+   * ```js
+   * // click on element at position
+   * I.uncheckOption('Agree', '.signup', { position: { x: 5, y: 5 } })
+   * ```
+   * > ⚠️ To avoid flakiness, option `force: true` is set by default
+   *
    * Unselects a checkbox or radio button.
    * Element is located by label or name or CSS or XPath.
    * 
@@ -1890,20 +1902,10 @@ class Playwright extends Helper {
    * I.uncheckOption('I Agree to Terms and Conditions');
    * I.uncheckOption('agree', '//form');
    * ```
-   * @param {CodeceptJS.LocatorOrString} field checkbox located by label | name | CSS | XPath | strict locator.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element located by CSS | XPath | strict locator.
+   * @param {string | object} field checkbox located by label | name | CSS | XPath | strict locator.
+   * @param {?string | object} [context=null] (optional, `null` by default) element located by CSS | XPath | strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-uncheck) for uncheck available as 3rd argument.
-   *
-   * Examples:
-   *
-   * ```js
-   * // click on element at position
-   * I.uncheckOption('Agree', '.signup', { position: { x: 5, y: 5 } })
-   * ```
-   * > ⚠️ To avoid flakiness, option `force: true` is set by default
    */
   async uncheckOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context);
@@ -1920,7 +1922,7 @@ class Playwright extends Helper {
    * I.seeCheckboxIsChecked({css: '#signup_form input[type=checkbox]'});
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -1937,7 +1939,7 @@ class Playwright extends Helper {
    * I.dontSeeCheckboxIsChecked('agree'); // located by name
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -1988,6 +1990,9 @@ class Playwright extends Helper {
   }
 
   /**
+   *
+   * _Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/Puppeteer#1313](https://github.com/GoogleChrome/puppeteer/issues/1313)).
+   *
    * Presses a key in the browser (on a focused element).
    * 
    * _Hint:_ For populating text field or textarea, it is recommended to use [`fillField`](#fillfield).
@@ -2049,8 +2054,6 @@ class Playwright extends Helper {
    * @param {string|string[]} key key or array of keys to press.
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   * _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 = [];
@@ -2127,8 +2130,8 @@ class Playwright extends Helper {
    * // or by strict locator
    * I.fillField({css: 'form#login input[name=username]'}, 'John');
    * ```
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator.
-   * @param {CodeceptJS.StringOrSecret} value text value to fill.
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} value text value to fill.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
@@ -2161,7 +2164,7 @@ class Playwright extends Helper {
   * ```
   * Use `force` to bypass the [actionability](https://playwright.dev/docs/actionability) checks.
   *
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-locator#locator-clear) for available options object as 2nd argument.
    */
   async clearField(locator, options = {}) {
@@ -2186,12 +2189,10 @@ class Playwright extends Helper {
    * // typing secret
    * I.appendField('password', secret('123456'));
    * ```
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator
    * @param {string} value text value to append.
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   *
    */
   async appendField(field, value) {
     const els = await findFields.call(this, field);
@@ -2212,8 +2213,8 @@ class Playwright extends Helper {
    * I.seeInField('form input[type=hidden]','hidden_value');
    * I.seeInField('#searchform input','Search');
    * ```
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator.
-   * @param {CodeceptJS.StringOrSecret} value value to check.
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} value value to check.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -2231,8 +2232,8 @@ class Playwright extends Helper {
    * I.dontSeeInField({ css: 'form input.email' }, 'user@user.com'); // field by CSS
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} field located by label|name|CSS|XPath|strict locator.
-   * @param {CodeceptJS.StringOrSecret} value value to check.
+   * @param {string | object} field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} value value to check.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -2251,7 +2252,7 @@ class Playwright extends Helper {
    * I.attachFile('form input[name=avatar]', 'data/avatar.jpg');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @param {string} pathToFile local file path relative to codecept.conf.ts or codecept.conf.js config file.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2288,7 +2289,7 @@ class Playwright extends Helper {
    * ```js
    * I.selectOption('Which OS do you use?', ['Android', 'iOS']);
    * ```
-   * @param {LocatorOrString} select field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} select field located by label|name|CSS|XPath|strict locator.
    * @param {string|Array<*>} option visible text or value of option.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2321,7 +2322,7 @@ class Playwright extends Helper {
    * let numOfElements = await I.grabNumberOfVisibleElements('p');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @returns {Promise<number>} number of visible elements
    *
    */
@@ -2402,7 +2403,7 @@ class Playwright extends Helper {
    * I.see('Register', {css: 'form.register'}); // use strict locator
    * ```
    * @param {string} text expected on page.
-   * @param {?CodeceptJS.LocatorOrString} [context=null] (optional, `null` by default) element located by CSS|Xpath|strict locator in which to search for text.
+   * @param {?string | object} [context=null] (optional, `null` by default) element located by CSS|Xpath|strict locator in which to search for text.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
@@ -2420,7 +2421,7 @@ class Playwright extends Helper {
    * ```
    * 
    * @param {string} text element value to check.
-   * @param {CodeceptJS.LocatorOrString?} [context=null]  element located by CSS|XPath|strict locator.
+   * @param {(string | object)?} [context=null]  element located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -2438,7 +2439,7 @@ class Playwright extends Helper {
    * ```
    * 
    * @param {string} text which is not present.
-   * @param {CodeceptJS.LocatorOrString} [context] (optional) element located by CSS|XPath|strict locator in which to perfrom search.
+   * @param {string | object} [context] (optional) element located by CSS|XPath|strict locator in which to perfrom search.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    *
@@ -2534,7 +2535,7 @@ class Playwright extends Helper {
    * I.seeNumberOfElements('#submitBtn', 1);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} num number of elements.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2554,7 +2555,7 @@ class Playwright extends Helper {
    * I.seeNumberOfVisibleElements('.buttons', 3);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} num number of elements.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2626,6 +2627,8 @@ class Playwright extends Helper {
   }
 
   /**
+   * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
+   *
    * 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.
@@ -2638,8 +2641,6 @@ class Playwright extends Helper {
    * @param {?string} [name=null] cookie name.
    * @returns {any} attribute value
    * 
-   *
-   * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
    */
   async grabCookie(name) {
     const cookies = await this.browserContext.cookies();
@@ -2679,8 +2680,8 @@ class Playwright extends Helper {
    * ```js
    * I.executeScript(({x, y}) => x + y, {x, y});
    * ```
-   * You can pass only one parameter into a function
-   * but you can pass in array or object.
+   * You can pass only one parameter into a function,
+   * or you can pass in array or object.
    *
    * ```js
    * I.executeScript(([x, y]) => x + y, [x, y]);
@@ -2724,7 +2725,7 @@ class Playwright extends Helper {
    * ```
    * If multiple elements found returns first element.
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @returns {Promise<string>} attribute value
    * 
    *
@@ -2745,7 +2746,7 @@ class Playwright extends Helper {
    * let pins = await I.grabTextFromAll('#pin li');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @returns {Promise<string[]>} attribute value
    * 
    *
@@ -2768,7 +2769,7 @@ class Playwright extends Helper {
    * ```js
    * let email = await I.grabValueFrom('input[name=email]');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @returns {Promise<string>} attribute value
    * 
    */
@@ -2786,7 +2787,7 @@ class Playwright extends Helper {
    * ```js
    * let inputs = await I.grabValueFromAll('//form/input');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator field located by label|name|CSS|XPath|strict locator.
    * @returns {Promise<string[]>} attribute value
    * 
    */
@@ -2805,7 +2806,7 @@ class Playwright extends Helper {
    * let postHTML = await I.grabHTMLFrom('#post');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} element located by CSS|XPath|strict locator.
+   * @param {string | object} element located by CSS|XPath|strict locator.
    * @returns {Promise<string>} HTML code for an element
    * 
    */
@@ -2824,7 +2825,7 @@ class Playwright extends Helper {
    * let postHTMLs = await I.grabHTMLFromAll('.post');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} element located by CSS|XPath|strict locator.
+   * @param {string | object} element located by CSS|XPath|strict locator.
    * @returns {Promise<string[]>} HTML code for an element
    * 
    */
@@ -2843,7 +2844,7 @@ class Playwright extends Helper {
    * const value = await I.grabCssPropertyFrom('h3', 'font-weight');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string} cssProperty CSS property name.
    * @returns {Promise<string>} CSS value
    * 
@@ -2864,7 +2865,7 @@ class Playwright extends Helper {
    * const values = await I.grabCssPropertyFromAll('h3', 'font-weight');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string} cssProperty CSS property name.
    * @returns {Promise<string[]>} CSS value
    * 
@@ -2885,7 +2886,7 @@ class Playwright extends Helper {
    * I.seeCssPropertiesOnElements('h3', { 'font-weight': "bold"});
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @param {object} cssProperties object with CSS properties and their values to check.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2930,7 +2931,7 @@ class Playwright extends Helper {
    * I.seeAttributesOnElements('//form', { method: "post"});
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
+   * @param {string | object} locator located by CSS|XPath|strict locator.
    * @param {object} attributes attributes and their values to check.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -2954,7 +2955,8 @@ class Playwright extends Helper {
     let chunked = chunkArray(attrs, values.length);
     chunked = chunked.filter((val) => {
       for (let i = 0; i < val.length; ++i) {
-        if (!val[i].includes(values[i])) return false;
+        // if the attribute doesn't exist, returns false as well
+        if (!val[i] || !val[i].includes(values[i])) return false;
       }
       return true;
     });
@@ -2970,7 +2972,7 @@ class Playwright extends Helper {
    * I.dragSlider('#slider', -70);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator located by label|name|CSS|XPath|strict locator.
+   * @param {string | object} locator located by label|name|CSS|XPath|strict locator.
    * @param {number} offsetX position to drag.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3002,7 +3004,7 @@ class Playwright extends Helper {
    * ```js
    * let hint = await I.grabAttributeFrom('#tooltip', 'title');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string} attr attribute name.
    * @returns {Promise<string>} attribute value
    * 
@@ -3022,7 +3024,7 @@ class Playwright extends Helper {
    * ```js
    * let hints = await I.grabAttributeFromAll('.tooltip', 'title');
    * ```
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string} attr attribute name.
    * @returns {Promise<string[]>} attribute value
    * 
@@ -3048,7 +3050,7 @@ class Playwright extends Helper {
    * I.saveElementScreenshot(`#submit`,'debug.png');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string} fileName file name to save.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3235,7 +3237,7 @@ class Playwright extends Helper {
    * Waits for element to become enabled (by default waits for 1sec).
    * Element can be located by CSS or XPath.
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec=1] (optional) time in seconds to wait, 1 by default.
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3270,7 +3272,7 @@ class Playwright extends Helper {
    * I.waitForValue('//input', "GoodValue");
    * ```
    * 
-   * @param {LocatorOrString} field input field.
+   * @param {string | object} field input field.
    * @param {string }value expected value.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
@@ -3307,7 +3309,7 @@ class Playwright extends Helper {
    * I.waitNumberOfVisibleElements('a', 3);
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} num number of elements.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
@@ -3350,7 +3352,7 @@ class Playwright extends Helper {
    * I.waitForClickable('.btn.continue', 5); // wait for 5 secs
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3369,7 +3371,7 @@ class Playwright extends Helper {
    * I.waitForElement('.btn.continue', 5); // wait for 5 secs
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3388,6 +3390,8 @@ class Playwright extends Helper {
   }
 
   /**
+   * This method accepts [React selectors](https://codecept.io/react).
+   *
    * Waits for an element to become visible on a page (by default waits for 1sec).
    * Element can be located by CSS or XPath.
    * 
@@ -3395,12 +3399,10 @@ class Playwright extends Helper {
    * I.waitForVisible('#popup');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
-   *
-   * This method accepts [React selectors](https://codecept.io/react).
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -3436,7 +3438,7 @@ class Playwright extends Helper {
    * I.waitForInvisible('#popup');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3476,7 +3478,7 @@ class Playwright extends Helper {
    * I.waitToHide('#popup');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3587,7 +3589,7 @@ class Playwright extends Helper {
    * 
    * @param {string }text to wait for.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
-   * @param {CodeceptJS.LocatorOrString} [context] (optional) element located by CSS|XPath|strict locator.
+   * @param {string | object} [context] (optional) element located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -3672,7 +3674,7 @@ class Playwright extends Helper {
    * I.switchTo(); // switch back to main page
    * ```
    * 
-   * @param {?CodeceptJS.LocatorOrString} [locator=null] (optional, `null` by default) element located by CSS|XPath|strict locator.
+   * @param {?string | object} [locator=null] (optional, `null` by default) element located by CSS|XPath|strict locator.
    * @returns {void} automatically synchronized promise through #recorder
    * 
    */
@@ -3812,7 +3814,7 @@ class Playwright extends Helper {
    * I.waitForDetached('#popup');
    * ```
    * 
-   * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {number} [sec=1] (optional, `1` by default) time in seconds to wait
    * @returns {void} automatically synchronized promise through #recorder
    * 
@@ -3890,7 +3892,7 @@ class Playwright extends Helper {
    * const width = await I.grabElementBoundingRect('h3', 'width');
    * // width == 527
    * ```
-   * @param {LocatorOrString} locator element located by CSS|XPath|strict locator.
+   * @param {string | object} locator element located by CSS|XPath|strict locator.
    * @param {string=} elementSize x, y, width or height of the given element.
    * @returns {Promise<DOMRect>|Promise<number>} Element bounding rectangle
    * 
@@ -4293,7 +4295,7 @@ class Playwright extends Helper {
   /**
    * Returns all URLs of all network requests recorded so far during execution of test scenario.
    *
-   * @return {string} List of URLs recorded as a string, seperaeted by new lines after each URL
+   * @return {string} List of URLs recorded as a string, separated by new lines after each URL
    * @private
    */
   _getTrafficDump() {
@@ -4475,6 +4477,7 @@ function buildLocatorString(locator) {
 
 async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
+  if (locator.vue) return findVue(matcher, locator);
   locator = new Locator(locator, 'css');
 
   return matcher.locator(buildLocatorString(locator)).all();
@@ -4536,6 +4539,7 @@ async function proceedClick(locator, context = null, options = {}) {
 
 async function findClickable(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
+  if (locator.vue) return findVue(matcher, locator);
 
   locator = new Locator(locator);
   if (!locator.isFuzzy()) return findElements.call(this, matcher, locator);