codeceptjs 3.4.1 → 3.5.1-2.beta.7

package/lib/helper/Playwright.js

@@ -2,7 +2,10 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('@codeceptjs/helper');
+const { v4: uuidv4 } = require('uuid');
+const assert = require('assert');
 const Locator = require('../locator');
+const store = require('../store');
 const recorder = require('../recorder');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals } = require('../assert/equal');
@@ -20,6 +23,7 @@ const {
   isModifierKey,
   clearString,
   requireWithFallback,
+  normalizeSpacesInString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -29,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;
@@ -49,13 +53,13 @@ const pathSeparator = path.sep;
 /**
  * ## Configuration
  *
- * This helper should be configured in codecept.conf.js
+ * This helper should be configured in codecept.conf.(js|ts)
  *
  * @typedef PlaywrightConfig
  * @type {object}
- * @prop {string} url - base url of website to be tested
- * @prop {string} [browser] - a browser to test on, either: `chromium`, `firefox`, `webkit`, `electron`. Default: chromium.
- * @prop {boolean} [show=false] - show browser window.
+ * @prop {string} [url] - base url of website to be tested
+ * @prop {'chromium' | 'firefox'| 'webkit' | 'electron'} [browser='chromium'] - a browser to test on, either: `chromium`, `firefox`, `webkit`, `electron`. Default: chromium.
+ * @prop {boolean} [show=true] - show browser window.
  * @prop {string|boolean} [restart=false] - restart strategy between tests. Possible values:
  *   * 'context' or **false** - restarts [browser context](https://playwright.dev/docs/api/class-browsercontext) but keeps running browser. Recommended by Playwright team to keep tests isolated.
  *   * 'browser' or **true** - closes browser and opens it again between tests.
@@ -72,13 +76,13 @@ const pathSeparator = path.sep;
  * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to 'session'.
  * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to 'session'.
  * @prop {number} [waitForAction] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
- * @prop {string} [waitForNavigation] - When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `networkidle`. Choose one of those options is possible. See [Playwright API](https://playwright.dev/docs/api/class-page#page-wait-for-navigation).
+ * @prop {'load' | 'domcontentloaded' | 'commit'} [waitForNavigation] - When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `commit`. Choose one of those options is possible. See [Playwright API](https://playwright.dev/docs/api/class-page#page-wait-for-url).
  * @prop {number} [pressKeyDelay=10] - Delay between key presses in ms. Used when calling Playwrights page.type(...) in fillField/appendField
  * @prop {number} [getPageTimeout] - config option to set maximum navigation time in milliseconds.
  * @prop {number} [waitForTimeout] - default wait* timeout in ms. Default: 1000.
  * @prop {object} [basicAuth] - the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  * @prop {string} [windowSize] - default window size. Set a dimension like `640x480`.
- * @prop {string} [colorScheme] - default color scheme. Possible values: `dark` | `light` | `no-preference`.
+ * @prop {'dark' | 'light' | 'no-preference'} [colorScheme] - default color scheme. Possible values: `dark` | `light` | `no-preference`.
  * @prop {string} [userAgent] - user-agent string.
  * @prop {string} [locale] - locale string. Example: 'en-GB', 'de-DE', 'fr-FR', ...
  * @prop {boolean} [manualStart] - do not start browser before a test, start it manually inside a helper with `this.helpers["Playwright"]._startBrowser()`.
@@ -88,6 +92,9 @@ const pathSeparator = path.sep;
  * @prop {any} [channel] - (While Playwright can operate against the stock Google Chrome and Microsoft Edge browsers available on the machine. In particular, current Playwright version will support Stable and Beta channels of these browsers. See [Google Chrome & Microsoft Edge](https://playwright.dev/docs/browsers/#google-chrome--microsoft-edge).
  * @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. Default: false. Note: only activate under verbose mode (--verbose).
+ * @prop {object} [recordHar] - record HAR and will be saved to `output/har`. See more of [HAR options](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-har).
  */
 const config = {};
 
@@ -110,6 +117,10 @@ const config = {};
  * npm i playwright-core@^1.18 --save
  * ```
  *
+ * Breaking Changes: if you use Playwright v1.38 and later, it will no longer download browsers automatically.
+ *
+ * Run `npx playwright install` to download browsers after `npm install`.
+ *
  * Using playwright-core package, will prevent the download of browser binaries and allow connecting to an existing browser installation or for connecting to a remote one.
  *
  *
@@ -125,12 +136,27 @@ const config = {};
  *
  * #### Trace Recording Customization
  *
- * Trace recording provides a complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
+ * Trace recording provides complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
  * Traces will be saved to `output/trace`
  *
  * * `trace`: enables trace recording for failed tests; trace are saved into `output/trace` folder
  * * `keepTraceForPassedTests`: - save trace for passed tests
  *
+ * #### HAR Recording Customization
+ *
+ * A HAR file is an HTTP Archive file that contains a record of all the network requests that are made when a page is loaded.
+ * It contains information about the request and response headers, cookies, content, timings, and more. You can use HAR files to mock network requests in your tests.
+ * HAR will be saved to `output/har`. More info could be found here https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-har.
+ *
+ * ```
+ * ...
+ * recordHar: {
+ *     mode: 'minimal', // possible values: 'minimal'|'full'.
+ *     content: 'embed' // possible values:  "omit"|"embed"|"attach".
+ * }
+ * ...
+ *```
+ *
  * #### Example #1: Wait for 0 network connections.
  *
  * ```js
@@ -201,6 +227,7 @@ const config = {};
  *      url: "http://localhost",
  *      show: true // headless mode not supported for extensions
  *      chromium: {
+ *        // Note: due to this would launch persistent context, so to avoid the error when running tests with run-workers a timestamp would be appended to the defined folder name. For instance: playwright-tmp_1692715649511
  *        userDataDir: '/tmp/playwright-tmp', // necessary to launch the browser in normal mode instead of incognito,
  *        args: [
  *           `--disable-extensions-except=${pathToExtension}`,
@@ -255,6 +282,22 @@ const config = {};
  * }
  * ```
  *
+ * * #### Example #9: Launch electron test
+ *
+ * ```js
+ * {
+ *  helpers: {
+ *     Playwright: {
+ *       browser: 'electron',
+ *       electron: {
+ *         executablePath: require("electron"),
+ *         args: [path.join('../', "main.js")],
+ *       },
+ *     }
+ *   },
+ * }
+ * ```
+ *
  * Note: When connecting to remote browser `show` and specific `chrome` options (e.g. `headless` or `devtools`) are ignored.
  *
  * ## Access From Helpers
@@ -290,6 +333,17 @@ class Playwright extends Helper {
     this.electronSessions = [];
     this.storageState = null;
 
+    // for network stuff
+    this.requests = [];
+    this.recording = false;
+    this.recordedAtLeastOnce = false;
+
+    // for websocket messages
+    this.webSocketMessages = [];
+    this.recordingWebSocketMessages = false;
+    this.recordedWebSocketMessagesAtLeastOnce = false;
+    this.cdpSession = null;
+
     // override defaults with config
     this._setConfig(config);
   }
@@ -308,7 +362,7 @@ class Playwright extends Helper {
       ignoreLog: ['warning', 'log'],
       uniqueScreenshotNames: false,
       manualStart: false,
-      getPageTimeout: 0,
+      getPageTimeout: 30000,
       waitForNavigation: 'load',
       restart: false,
       keepCookies: false,
@@ -316,7 +370,8 @@ class Playwright extends Helper {
       show: false,
       defaultPopupAction: 'accept',
       use: { actionTimeout: 0 },
-      ignoreHTTPSErrors: false, // Adding it here o that context can be set up to ignore the SSL errors
+      ignoreHTTPSErrors: false, // Adding it here o that context can be set up to ignore the SSL errors,
+      highlightElement: false,
     };
 
     config = Object.assign(defaults, config);
@@ -361,22 +416,31 @@ class Playwright extends Helper {
     }
     this.isRemoteBrowser = !!this.playwrightOptions.browserWSEndpoint;
     this.isElectron = this.options.browser === 'electron';
-    this.userDataDir = this.playwrightOptions.userDataDir;
+    this.userDataDir = this.playwrightOptions.userDataDir ? `${this.playwrightOptions.userDataDir}_${Date.now().toString()}` : undefined;
     this.isCDPConnection = this.playwrightOptions.cdpConnection;
     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: 'browser',
         message: 'Browser in which testing will be performed. Possible options: chromium, firefox, webkit or electron',
         default: 'chromium',
       },
+      {
+        name: 'url',
+        message: 'Base url of site to be tested',
+        default: 'http://localhost',
+        when: (answers) => answers.Playwright_browser !== 'electron',
+      },
+      {
+        name: 'show',
+        message: 'Show browser window',
+        default: true,
+        type: 'confirm',
+        when: (answers) => answers.Playwright_browser !== 'electron',
+      },
     ];
   }
 
@@ -407,9 +471,10 @@ class Playwright extends Helper {
     }
   }
 
-  async _before() {
+  async _before(test) {
+    this.currentRunningTest = test;
     recorder.retry({
-      retries: 5,
+      retries: process.env.FAILED_STEP_RETRIES || 3,
       when: err => {
         if (!err || typeof (err.message) !== 'string') {
           return false;
@@ -425,7 +490,7 @@ class Playwright extends Helper {
     this.isAuthenticated = false;
     if (this.isElectron) {
       this.browserContext = this.browser.context();
-    } else if (this.userDataDir) {
+    } else if (this.playwrightOptions.userDataDir) {
       this.browserContext = this.browser;
     } else {
       const contextOptions = {
@@ -437,13 +502,24 @@ class Playwright extends Helper {
         contextOptions.httpCredentials = this.options.basicAuth;
         this.isAuthenticated = true;
       }
+      if (this.options.bypassCSP) contextOptions.bypassCSP = this.options.bypassCSP;
       if (this.options.recordVideo) contextOptions.recordVideo = this.options.recordVideo;
+      if (this.options.recordHar) {
+        const harExt = this.options.recordHar.content && this.options.recordHar.content === 'attach' ? 'zip' : 'har';
+        const fileName = `${`${global.output_dir}${path.sep}har${path.sep}${uuidv4()}_${clearString(this.currentRunningTest.title)}`.slice(0, 245)}.${harExt}`;
+        const dir = path.dirname(fileName);
+        if (!fileExists(dir)) fs.mkdirSync(dir);
+        this.options.recordHar.path = fileName;
+        this.currentRunningTest.artifacts.har = fileName;
+        contextOptions.recordHar = this.options.recordHar;
+      }
       if (this.storageState) contextOptions.storageState = this.storageState;
       if (this.options.userAgent) contextOptions.userAgent = this.options.userAgent;
       if (this.options.locale) contextOptions.locale = this.options.locale;
       if (this.options.colorScheme) contextOptions.colorScheme = this.options.colorScheme;
+      this.contextOptions = contextOptions;
       if (!this.browserContext || !restartsSession()) {
-        this.browserContext = await this.browser.newContext(contextOptions); // Adding the HTTPSError ignore in the context so that we can ignore those errors
+        this.browserContext = await this.browser.newContext(this.contextOptions); // Adding the HTTPSError ignore in the context so that we can ignore those errors
       }
     }
 
@@ -451,8 +527,17 @@ class Playwright extends Helper {
     if (this.isElectron) {
       mainPage = await this.browser.firstWindow();
     } else {
-      const existingPages = await this.browserContext.pages();
-      mainPage = existingPages[0] || await this.browserContext.newPage();
+      try {
+        const existingPages = await this.browserContext.pages();
+        mainPage = existingPages[0] || await this.browserContext.newPage();
+      } catch (e) {
+        if (this.playwrightOptions.userDataDir) {
+          this.browser = await playwright[this.options.browser].launchPersistentContext(this.userDataDir, this.playwrightOptions);
+          this.browserContext = this.browser;
+          const existingPages = await this.browserContext.pages();
+          mainPage = existingPages[0];
+        }
+      }
     }
     await targetCreatedHandler.call(this, mainPage);
 
@@ -483,13 +568,15 @@ class Playwright extends Helper {
 
     // close other sessions
     try {
-      const contexts = await this.browser.contexts();
-      const currentContext = contexts[0];
-      if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
-        this.storageState = await currentContext.storageState();
-      }
+      if ((await this.browser)._type === 'Browser') {
+        const contexts = await this.browser.contexts();
+        const currentContext = contexts[0];
+        if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
+          this.storageState = await currentContext.storageState();
+        }
 
-      await Promise.all(contexts.map(c => c.close()));
+        await Promise.all(contexts.map(c => c.close()));
+      }
     } catch (e) {
       console.log(e);
     }
@@ -519,8 +606,16 @@ class Playwright extends Helper {
           browserContext = browser.context();
           page = await browser.firstWindow();
         } else {
-          browserContext = await this.browser.newContext(Object.assign(this.options, config));
-          page = await browserContext.newPage();
+          try {
+            browserContext = await this.browser.newContext(Object.assign(this.contextOptions, config));
+            page = await browserContext.newPage();
+          } catch (e) {
+            if (this.playwrightOptions.userDataDir) {
+              browserContext = await playwright[this.options.browser].launchPersistentContext(`${this.userDataDir}_${this.activeSessionName}`, this.playwrightOptions);
+              this.browser = browserContext;
+              page = await browserContext.pages()[0];
+            }
+          }
         }
 
         if (this.options.trace) await browserContext.tracing.start({ screenshots: true, snapshots: true });
@@ -533,10 +628,12 @@ class Playwright extends Helper {
         // is closed by _after
       },
       loadVars: async (context) => {
-        this.browserContext = context;
-        const existingPages = await context.pages();
-        this.sessionPages[this.activeSessionName] = existingPages[0];
-        return this._setPage(this.sessionPages[this.activeSessionName]);
+        if (context) {
+          this.browserContext = context;
+          const existingPages = await context.pages();
+          this.sessionPages[this.activeSessionName] = existingPages[0];
+          return this._setPage(this.sessionPages[this.activeSessionName]);
+        }
       },
       restoreVars: async (session) => {
         this.withinLocator = null;
@@ -570,7 +667,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);
@@ -727,7 +824,7 @@ class Playwright extends Helper {
         }
         throw err;
       }
-    } else if (this.userDataDir) {
+    } else if (this.playwrightOptions.userDataDir) {
       this.browser = await playwright[this.options.browser].launchPersistentContext(this.userDataDir, this.playwrightOptions);
     } else {
       this.browser = await playwright[this.options.browser].launch(this.playwrightOptions);
@@ -760,9 +857,11 @@ class Playwright extends Helper {
 
   async _stopBrowser() {
     this.withinLocator = null;
-    this._setPage(null);
+    await this._setPage(null);
     this.context = null;
+    this.frame = null;
     popupStore.clear();
+    if (this.options.recordHar) await this.browserContext.close();
     await this.browser.close();
   }
 
@@ -783,14 +882,14 @@ class Playwright extends Helper {
         await this.switchTo(null);
         return frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve());
       }
-      await this.switchTo(locator);
-      this.withinLocator = new Locator(locator);
+      await this.switchTo(frame);
+      this.withinLocator = new Locator(frame);
       return;
     }
 
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    this.context = els[0];
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
+    this.context = el;
     this.contextLocator = locator;
 
     this.withinLocator = new Locator(locator);
@@ -800,6 +899,7 @@ class Playwright extends Helper {
     this.withinLocator = null;
     this.context = await this.page;
     this.contextLocator = null;
+    this.frame = null;
   }
 
   _extractDataFromPerformanceTiming(timing, ...dataNames) {
@@ -847,10 +947,9 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> resizeWindow }}
    *
    * 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:
@@ -860,6 +959,8 @@ class Playwright extends Helper {
    * // @codeceptjs/configure package must be installed
    * { setWindowSize } = require('@codeceptjs/configure');
    * ````
+   *
+   * {{> resizeWindow }}
    */
   async resizeWindow(width, height) {
     if (width === 'maximize') {
@@ -874,14 +975,14 @@ class Playwright extends Helper {
    * Set headers for all next requests
    *
    * ```js
-   * I.haveRequestHeaders({
+   * I.setPlaywrightRequestHeaders({
    *    'X-Sent-By': 'CodeceptJS',
    * });
    * ```
    *
    * @param {object} customHeaders headers to set
    */
-  async haveRequestHeaders(customHeaders) {
+  async setPlaywrightRequestHeaders(customHeaders) {
     if (!customHeaders) {
       throw new Error('Cannot send empty headers.');
     }
@@ -893,32 +994,103 @@ class Playwright extends Helper {
    *
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-    const { x, y } = await clickablePoint(els[0]);
+    const { x, y } = await clickablePoint(el);
     await this.page.mouse.move(x + offsetX, y + offsetY);
     return this._waitForAction();
   }
 
   /**
-   * {{> dragAndDrop }}
+   * {{> focus }}
    *
-   * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-drag-and-drop) can be passed as 3rd argument.
+   */
+  async focus(locator, options = {}) {
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to focus');
+
+    await el.focus(options);
+    return this._waitForAction();
+  }
+
+  /**
+   * {{> blur }}
+   *
+   */
+  async blur(locator, options = {}) {
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to blur');
+
+    await el.blur(options);
+    return this._waitForAction();
+  }
+  /**
+   * Return the checked status of given element.
+   *
+   * @param {CodeceptJS.LocatorOrString} 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>}
+   *
+   */
+
+  async grabCheckedElementStatus(locator, options = {}) {
+    const supportedTypes = ['checkbox', 'radio'];
+    const el = await this._locateElement(locator);
+    const type = await el.getAttribute('type');
+
+    if (supportedTypes.includes(type)) {
+      return el.isChecked(options);
+    }
+    throw new Error(`Element is not a ${supportedTypes.join(' or ')} input`);
+  }
+  /**
+   * Return the disabled status of given element.
+   *
+   * @param {CodeceptJS.LocatorOrString} 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>}
+   *
+   */
+
+  async grabDisabledElementStatus(locator, options = {}) {
+    const el = await this._locateElement(locator);
+    return el.isDisabled(options);
+  }
+
+  /**
    *
    * ```js
    * // specify coordinates for source position
    * I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
    * ```
    *
-   * > By default option `force: true` is set
+   * > 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`
+   *
+   * {{> dragAndDrop }}
+   * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-drag-and-drop) can be passed as 3rd argument.
+   *
    */
-  async dragAndDrop(srcElement, destElement, options = { force: true }) {
-    const src = new Locator(srcElement, 'css');
-    const dst = new Locator(destElement, 'css');
+  async dragAndDrop(srcElement, destElement, options) {
+    const src = new Locator(srcElement);
+    const dst = new Locator(destElement);
+
+    if (options) {
+      return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    }
+
+    const _smallWaitInMs = 600;
+    await this.page.locator(buildLocatorString(src)).hover();
+    await this.page.mouse.down();
+    await this.page.waitForTimeout(_smallWaitInMs);
+
+    const destElBox = await this.page.locator(buildLocatorString(dst)).boundingBox();
 
-    return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    await this.page.mouse.move(destElBox.x + destElBox.width / 2, destElBox.y + destElBox.height / 2);
+    await this.page.locator(buildLocatorString(dst)).hover({ position: { x: 10, y: 10 } });
+    await this.page.waitForTimeout(_smallWaitInMs);
+    await this.page.mouse.up();
   }
 
   /**
@@ -948,6 +1120,33 @@ class Playwright extends Helper {
     return this.page.reload({ timeout: this.options.getPageTimeout, waitUntil: this.options.waitForNavigation });
   }
 
+  /**
+   * Replaying from HAR
+   *
+   * ```js
+   *  // Replay API requests from HAR.
+   *  // Either use a matching response from the HAR,
+   *  // or abort the request if nothing matches.
+   *    I.replayFromHar('./output/har/something.har', { url: "*\/**\/api/v1/fruits" });
+   *    I.amOnPage('https://demo.playwright.dev/api-mocking');
+   *    I.see('CodeceptJS');
+   * ```
+   *
+   * @param {string} harFilePath Path to recorded HAR file
+   * @param {object} [opts] [Options for replaying from HAR](https://playwright.dev/docs/api/class-page#page-route-from-har)
+   *
+   * @returns Promise<void>
+   */
+  async replayFromHar(harFilePath, opts) {
+    const file = path.join(global.codecept_dir, harFilePath);
+
+    if (!fileExists(file)) {
+      throw new Error(`File at ${file} cannot be found on local system`);
+    }
+
+    await this.page.routeFromHAR(harFilePath, opts);
+  }
+
   /**
    * {{> scrollPageToTop }}
    */
@@ -965,8 +1164,11 @@ class Playwright extends Helper {
       const body = document.body;
       const html = document.documentElement;
       window.scrollTo(0, Math.max(
-        body.scrollHeight, body.offsetHeight,
-        html.clientHeight, html.scrollHeight, html.offsetHeight,
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight,
       ));
     });
   }
@@ -982,10 +1184,10 @@ class Playwright extends Helper {
     }
 
     if (locator) {
-      const els = await this._locate(locator);
-      assertElementExists(els, locator, 'Element');
-      await els[0].scrollIntoViewIfNeeded();
-      const elementCoordinates = await clickablePoint(els[0]);
+      const el = await this._locateElement(locator);
+      assertElementExists(el, locator, 'Element');
+      await el.scrollIntoViewIfNeeded();
+      const elementCoordinates = await clickablePoint(el);
       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 });
@@ -1049,11 +1251,27 @@ class Playwright extends Helper {
    */
   async _locate(locator) {
     const context = await this.context || await this._getContext();
+
+    if (this.frame) return findElements(this.frame, locator);
+
     return findElements(context, locator);
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Get the first element by different locator types, including strict locator
+   * Should be used in custom helpers:
+   *
+   * ```js
+   * const element = await this.helpers['Playwright']._locateElement({name: 'password'});
+   * ```
+   */
+  async _locateElement(locator) {
+    const context = await this.context || await this._getContext();
+    return findElement(context, locator);
+  }
+
+  /**
+   * Find a checkbox by providing human-readable text:
    * NOTE: Assumes the checkable element exists
    *
    * ```js
@@ -1068,7 +1286,7 @@ class Playwright extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * this.helpers['Playwright']._locateClickable('Next page').then // ...
@@ -1080,7 +1298,7 @@ class Playwright extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['Playwright']._locateFields('Your email').then // ...
@@ -1090,6 +1308,22 @@ class Playwright extends Helper {
     return findFields.call(this, locator);
   }
 
+  /**
+   * {{> grabWebElements }}
+   *
+   */
+  async grabWebElements(locator) {
+    return this._locate(locator);
+  }
+
+  /**
+   * {{> grabWebElement }}
+   *
+   */
+  async grabWebElement(locator) {
+    return this._locateElement(locator);
+  }
+
   /**
    * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
    *
@@ -1282,9 +1516,9 @@ class Playwright extends Helper {
   /**
    * {{> click }}
    *
-   * @param {any} [opts] [Additional options](https://playwright.dev/docs/api/class-page#page-click) for click available as 3rd argument.
+   * @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
@@ -1295,8 +1529,8 @@ class Playwright extends Helper {
    * ```
    *
    */
-  async click(locator, context = null, opts = {}) {
-    return proceedClick.call(this, locator, context, opts);
+  async click(locator, context = null, options = {}) {
+    return proceedClick.call(this, locator, context, options);
   }
 
   /**
@@ -1317,8 +1551,6 @@ class Playwright extends Helper {
 
   /**
    * {{> doubleClick }}
-   *
-   *
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
@@ -1326,15 +1558,12 @@ class Playwright extends Helper {
 
   /**
    * {{> rightClick }}
-   *
-   *
    */
   async rightClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { button: 'right' });
   }
 
   /**
-   * {{> checkOption }}
    *
    * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-check) for check available as 3rd argument.
    *
@@ -1345,6 +1574,9 @@ class Playwright extends Helper {
    * I.checkOption('Agree', '.signup', { position: { x: 5, y: 5 } })
    * ```
    * > ⚠️ To avoid flakiness, option `force: true` is set by default
+   *
+   * {{> checkOption }}
+   *
    */
   async checkOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context);
@@ -1353,7 +1585,6 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> uncheckOption }}
    *
    * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-uncheck) for uncheck available as 3rd argument.
    *
@@ -1364,6 +1595,8 @@ class Playwright extends Helper {
    * I.uncheckOption('Agree', '.signup', { position: { x: 5, y: 5 } })
    * ```
    * > ⚠️ To avoid flakiness, option `force: true` is set by default
+   *
+   * {{> uncheckOption }}
    */
   async uncheckOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context);
@@ -1404,9 +1637,10 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> pressKeyWithKeyNormalization }}
    *
    * _Note:_ Shortcuts like `'Meta'` + `'A'` do not work on macOS ([GoogleChrome/Puppeteer#1313](https://github.com/GoogleChrome/puppeteer/issues/1313)).
+   *
+   * {{> pressKeyWithKeyNormalization }}
    */
   async pressKey(key) {
     const modifiers = [];
@@ -1438,6 +1672,7 @@ class Playwright extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
 
@@ -1455,34 +1690,55 @@ class Playwright extends Helper {
     const els = await findFields.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);
-    }
+
+    await el.clear();
+
+    await highlightActiveElement.call(this, el);
+
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
     return this._waitForAction();
   }
 
   /**
-   * {{> clearField }}
+   * Clears the text input element: `<input>`, `<textarea>` or `[contenteditable]` .
+   *
+  *
+  * Examples:
+  *
+  * ```js
+  * I.clearField('.text-area')
+  *
+  * // if this doesn't work use force option
+  * I.clearField('#submit', { force: true })
+  * ```
+  * 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 {any} [options] [Additional options](https://playwright.dev/docs/api/class-locator#locator-clear) for available options object as 2nd argument.
    */
-  async clearField(field) {
-    return this.fillField(field, '');
+  async clearField(locator, options = {}) {
+    const els = await findFields.call(this, locator);
+    assertElementExists(els, locator, 'Field to clear');
+
+    const el = els[0];
+
+    await highlightActiveElement.call(this, el);
+
+    await el.clear();
+
+    return this._waitForAction();
   }
 
   /**
    * {{> appendField }}
-   *
-   *
    */
   async appendField(field, value) {
     const els = await findFields.call(this, field);
     assertElementExists(els, field, 'Field');
+    await highlightActiveElement.call(this, els[0]);
     await els[0].press('End');
-    await els[0].type(value, { delay: this.options.pressKeyDelay });
+    await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
   }
 
@@ -1490,14 +1746,16 @@ class Playwright extends Helper {
    * {{> seeInField }}
    */
   async seeInField(field, value) {
-    return proceedSeeInField.call(this, 'assert', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeInField.call(this, 'assert', field, _value);
   }
 
   /**
    * {{> dontSeeInField }}
    */
   async dontSeeInField(field, value) {
-    return proceedSeeInField.call(this, 'negate', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeInField.call(this, 'negate', field, _value);
   }
 
   /**
@@ -1523,28 +1781,19 @@ class Playwright extends Helper {
     const els = await findFields.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 highlightActiveElement.call(this, el);
+    let optionToSelect = '';
+
+    try {
+      optionToSelect = await el.locator('option', { hasText: option }).textContent();
+    } catch (e) {
+      optionToSelect = option;
     }
-    await this._evaluateHandeInContext((element) => {
-      element.dispatchEvent(new Event('input', { bubbles: true }));
-      element.dispatchEvent(new Event('change', { bubbles: true }));
-    }, el);
 
+    if (!Array.isArray(option)) option = [optionToSelect];
+
+    await el.selectOption(option);
     return this._waitForAction();
   }
 
@@ -1706,9 +1955,9 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> grabCookie }}
-   *
    * Returns cookie in JSON format. If name not passed returns all cookies for this domain.
+   *
+   * {{> grabCookie }}
    */
   async grabCookie(name) {
     const cookies = await this.browserContext.cookies();
@@ -1722,7 +1971,7 @@ class Playwright extends Helper {
    */
   async clearCookie() {
     // Playwright currently doesn't support to delete a certain cookie
-    // https://github.com/microsoft/playwright/blob/main/docs/api.md#class-browsercontext
+    // https://github.com/microsoft/playwright/blob/main/docs/src/api/class-browsercontext.md#async-method-browsercontextclearcookies
     if (!this.browserContext) return;
     return this.browserContext.clearCookies();
   }
@@ -1739,8 +1988,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]);
@@ -1752,11 +2001,11 @@ class Playwright extends Helper {
    * @returns {Promise<any>}
    */
   async executeScript(fn, arg) {
-    let context = this.page;
-    if (this.context && this.context.constructor.name === 'Frame') {
-      context = this.context; // switching to iframe context
+    if (this.context && this.context.constructor.name === 'FrameLocator') {
+      // switching to iframe context
+      return this.context.locator(':root').evaluate(fn, arg);
     }
-    return context.evaluate.apply(context, [fn, arg]);
+    return this.page.evaluate.apply(this.page, [fn, arg]);
   }
 
   /**
@@ -1795,7 +2044,7 @@ class Playwright extends Helper {
     const els = await this._locate(locator);
     const texts = [];
     for (const el of els) {
-      texts.push(await (await el.getProperty('innerText')).jsonValue());
+      texts.push(await (await el.innerText()));
     }
     this.debug(`Matched ${els.length} elements`);
     return texts;
@@ -1817,7 +2066,7 @@ class Playwright extends Helper {
   async grabValueFromAll(locator) {
     const els = await findFields.call(this, locator);
     this.debug(`Matched ${els.length} elements`);
-    return Promise.all(els.map(el => el.getProperty('value').then(t => t.jsonValue())));
+    return Promise.all(els.map(el => el.inputValue()));
   }
 
   /**
@@ -1836,7 +2085,7 @@ class Playwright extends Helper {
   async grabHTMLFromAll(locator) {
     const els = await this._locate(locator);
     this.debug(`Matched ${els.length} elements`);
-    return Promise.all(els.map(el => el.$eval('xpath=.', element => element.innerHTML, el)));
+    return Promise.all(els.map(el => el.innerHTML()));
   }
 
   /**
@@ -1857,7 +2106,7 @@ class Playwright extends Helper {
   async grabCssPropertyFromAll(locator, cssProperty) {
     const els = await this._locate(locator);
     this.debug(`Matched ${els.length} elements`);
-    const cssValues = await Promise.all(els.map(el => el.$eval('xpath=.', (el, cssProperty) => getComputedStyle(el).getPropertyValue(cssProperty), cssProperty)));
+    const cssValues = await Promise.all(els.map(el => el.evaluate((el, cssProperty) => getComputedStyle(el).getPropertyValue(cssProperty), cssProperty)));
 
     return cssValues;
   }
@@ -1872,28 +2121,26 @@ class Playwright extends Helper {
 
     const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
     const elemAmount = res.length;
-    const commands = [];
-    res.forEach((el) => {
-      Object.keys(cssPropertiesCamelCase).forEach((prop) => {
-        commands.push(el.$eval('xpath=.', (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);
+    let props = [];
+
+    for (const element of res) {
+      for (const prop of Object.keys(cssProperties)) {
+        const cssProp = await this.grabCssPropertyFrom(locator, prop);
+        if (isColorProperty(prop)) {
+          props.push(convertColorToRGBA(cssProp));
+        } else {
+          props.push(cssProp);
+        }
+      }
+    }
+
     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;
+        // eslint-disable-next-line eqeqeq
+        if (val[i] != values[i]) return false;
       }
       return true;
     });
@@ -1913,7 +2160,7 @@ class Playwright extends Helper {
     res.forEach((el) => {
       Object.keys(attributes).forEach((prop) => {
         commands.push(el
-          .$eval('xpath=.', (el, attr) => el[attr] || el.getAttribute(attr), prop));
+          .evaluate((el, attr) => el[attr] || el.getAttribute(attr), prop));
       });
     });
     let attrs = await Promise.all(commands);
@@ -1922,7 +2169,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] !== 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;
     });
@@ -1934,11 +2182,11 @@ class Playwright extends Helper {
    *
    */
   async dragSlider(locator, offsetX = 0) {
-    const src = await this._locate(locator);
+    const src = await this._locateElement(locator);
     assertElementExists(src, locator, 'Slider Element');
 
     // Note: Using clickablePoint private api because the .BoundingBox does not take into account iframe offsets!
-    const sliderSource = await clickablePoint(src[0]);
+    const sliderSource = await clickablePoint(src);
 
     // Drag start point
     await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
@@ -1972,8 +2220,7 @@ class Playwright extends Helper {
     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());
+      array.push(await els[index].getAttribute(attr));
     }
 
     return array;
@@ -1986,10 +2233,9 @@ class Playwright extends Helper {
   async saveElementScreenshot(locator, fileName) {
     const outputFile = screenshotOutputFolder(fileName);
 
-    const res = await this._locate(locator);
+    const res = await this._locateElement(locator);
     assertElementExists(res, locator);
-    if (res.length > 1) this.debug(`[Elements] Using first element out of ${res.length}`);
-    const elem = res[0];
+    const elem = res;
     this.debug(`Screenshot of ${(new Locator(locator))} element has been saved to ${outputFile}`);
     return elem.screenshot({ path: outputFile, type: 'png' });
   }
@@ -1999,23 +2245,32 @@ class Playwright extends Helper {
    */
   async saveScreenshot(fileName, fullPage) {
     const fullPageOption = fullPage || this.options.fullPageScreenshots;
-    const outputFile = screenshotOutputFolder(fileName);
+    let outputFile = screenshotOutputFolder(fileName);
 
     this.debug(`Screenshot is saving to ${outputFile}`);
 
+    await this.page.screenshot({
+      path: outputFile,
+      fullPage: fullPageOption,
+      type: 'png',
+    });
+
     if (this.activeSessionName) {
-      const activeSessionPage = this.sessionPages[this.activeSessionName];
+      for (const sessionName in this.sessionPages) {
+        const activeSessionPage = this.sessionPages[sessionName];
+        outputFile = screenshotOutputFolder(`${sessionName}_${fileName}`);
 
-      if (activeSessionPage) {
-        return activeSessionPage.screenshot({
-          path: outputFile,
-          fullPage: fullPageOption,
-          type: 'png',
-        });
+        this.debug(`${sessionName} - Screenshot is saving to ${outputFile}`);
+
+        if (activeSessionPage) {
+          await activeSessionPage.screenshot({
+            path: outputFile,
+            fullPage: fullPageOption,
+            type: 'png',
+          });
+        }
       }
     }
-
-    return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
   }
 
   /**
@@ -2083,9 +2338,13 @@ class Playwright extends Helper {
       test.artifacts.trace = await saveTraceForContext(this.browserContext, `${test.title}.failed`);
       for (const sessionName in this.sessionPages) {
         if (!this.sessionPages[sessionName].context) continue;
-        test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context(), `${test.title}_${sessionName}.failed`);
+        test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context, `${test.title}_${sessionName}.failed`);
       }
     }
+
+    if (this.options.recordHar) {
+      test.artifacts.har = this.currentRunningTest.artifacts.har;
+    }
   }
 
   async _passed(test) {
@@ -2106,13 +2365,17 @@ class Playwright extends Helper {
           test.artifacts.trace = await saveTraceForContext(this.browserContext, `${test.title}.passed`);
           for (const sessionName in this.sessionPages) {
             if (!this.sessionPages[sessionName].context) continue;
-            test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context(), `${test.title}_${sessionName}.passed`);
+            test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context, `${test.title}_${sessionName}.passed`);
           }
         }
       } else {
         await this.browserContext.tracing.stop();
       }
     }
+
+    if (this.options.recordHar) {
+      test.artifacts.har = this.currentRunningTest.artifacts.har;
+    }
   }
 
   /**
@@ -2225,25 +2488,42 @@ class Playwright extends Helper {
     locator = new Locator(locator, 'css');
 
     const context = await this._getContext();
-    const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'attached' });
-    return waiter.catch((err) => {
-      throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`);
-    });
+    try {
+      await context.locator(buildLocatorString(locator)).first().waitFor({ timeout: waitTimeout, state: 'attached' });
+    } catch (e) {
+      throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${e.message}`);
+    }
   }
 
   /**
-   * {{> waitForVisible }}
-   *
    * This method accepts [React selectors](https://codecept.io/react).
+   *
+   * {{> waitForVisible }}
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'visible' });
-    return waiter.catch((err) => {
-      throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`);
-    });
+    let count = 0;
+
+    // we have this as https://github.com/microsoft/playwright/issues/26829 is not yet implemented
+    let waiter;
+    if (this.frame) {
+      do {
+        waiter = await this.frame.locator(buildLocatorString(locator)).first().isVisible();
+        await this.wait(1);
+        count += 1000;
+        if (waiter) break;
+      } while (count <= waitTimeout);
+
+      if (!waiter) throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec.`);
+    }
+
+    try {
+      await context.locator(buildLocatorString(locator)).first().waitFor({ timeout: waitTimeout, state: 'visible' });
+    } catch (e) {
+      throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${e.message}`);
+    }
   }
 
   /**
@@ -2253,10 +2533,27 @@ class Playwright extends Helper {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    const waiter = context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'hidden' });
-    return waiter.catch((err) => {
-      throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`);
-    });
+    let waiter;
+    let count = 0;
+
+    // we have this as https://github.com/microsoft/playwright/issues/26829 is not yet implemented
+    if (this.frame) {
+      do {
+        waiter = await this.frame.locator(buildLocatorString(locator)).first().isHidden();
+        await this.wait(1);
+        count += 1000;
+        if (waiter) break;
+      } while (count <= waitTimeout);
+
+      if (!waiter) throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec.`);
+      return;
+    }
+
+    try {
+      await context.locator(buildLocatorString(locator)).first().waitFor({ timeout: waitTimeout, state: 'hidden' });
+    } catch (e) {
+      throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${e.message}`);
+    }
   }
 
   /**
@@ -2266,13 +2563,47 @@ class Playwright extends Helper {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
     locator = new Locator(locator, 'css');
     const context = await this._getContext();
-    return context.waitForSelector(buildLocatorString(locator), { timeout: waitTimeout, state: 'hidden' }).catch((err) => {
+    let waiter;
+    let count = 0;
+
+    // we have this as https://github.com/microsoft/playwright/issues/26829 is not yet implemented
+    if (this.frame) {
+      do {
+        waiter = await this.frame.locator(buildLocatorString(locator)).first().isHidden();
+        await this.wait(1);
+        count += 1000;
+        if (waiter) break;
+      } while (count <= waitTimeout);
+
+      if (!waiter) throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec.`);
+      return;
+    }
+
+    return context.locator(buildLocatorString(locator)).first().waitFor({ timeout: waitTimeout, state: 'hidden' }).catch((err) => {
       throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`);
     });
   }
 
+  /**
+   * {{> waitForNumberOfTabs }}
+   */
+  async waitForNumberOfTabs(expectedTabs, sec) {
+    const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
+    let currentTabs;
+    let count = 0;
+
+    do {
+      currentTabs = await this.grabNumberOfOpenTabs();
+      await this.wait(1);
+      count += 1000;
+      if (currentTabs >= expectedTabs) return;
+    } while (count <= waitTimeout);
+
+    throw new Error(`Expected ${expectedTabs} tabs are not met after ${waitTimeout / 1000} sec.`);
+  }
+
   async _getContext() {
-    if (this.context && this.context.constructor.name === 'Frame') {
+    if (this.context && this.context.constructor.name === 'FrameLocator') {
       return this.context;
     }
     return this.page;
@@ -2333,7 +2664,12 @@ class Playwright extends Helper {
     if (context) {
       const locator = new Locator(context, 'css');
       if (!locator.isXPath()) {
-        waiter = contextObject.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> text=${text}`, { timeout: waitTimeout, state: 'visible' });
+        try {
+          await contextObject.locator(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()} >> text=${text}`).first().waitFor({ timeout: waitTimeout, state: 'visible' });
+        } catch (e) {
+          console.log(e);
+          throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${e.message}`);
+        }
       }
 
       if (locator.isXPath()) {
@@ -2345,11 +2681,19 @@ class Playwright extends Helper {
         }, [locator.value, text, $XPath.toString()], { timeout: waitTimeout });
       }
     } else {
-      waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, text, { timeout: waitTimeout });
+      // we have this as https://github.com/microsoft/playwright/issues/26829 is not yet implemented
+      // eslint-disable-next-line no-lonely-if
+      const _contextObject = this.frame ? this.frame : contextObject;
+      let count = 0;
+      do {
+        waiter = await _contextObject.locator(`:has-text("${text}")`).first().isVisible();
+        if (waiter) break;
+        await this.wait(1);
+        count += 1000;
+      } while (count <= waitTimeout);
+
+      if (!waiter) throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec`);
     }
-    return waiter.catch((err) => {
-      throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`);
-    });
   }
 
   /**
@@ -2399,29 +2743,42 @@ class Playwright extends Helper {
       }
 
       if (locator >= 0 && locator < childFrames.length) {
-        this.context = childFrames[locator];
+        this.context = await this.page.frameLocator('iframe').nth(locator);
         this.contextLocator = locator;
       } else {
         throw new Error('Element #invalidIframeSelector was not found by text|CSS|XPath');
       }
       return;
     }
+
     if (!locator) {
       this.context = this.page;
       this.contextLocator = null;
+      this.frame = null;
       return;
     }
 
     // iframe by selector
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    const contentFrame = await els[0].contentFrame();
+    locator = buildLocatorString(new Locator(locator, 'css'));
+    const frame = await this._locateElement(locator);
+
+    if (!frame) {
+      throw new Error(`Frame ${JSON.stringify(locator)} was not found by text|CSS|XPath`);
+    }
+
+    if (this.frame) {
+      this.frame = await this.frame.frameLocator(locator);
+    } else {
+      this.frame = await this.page.frameLocator(locator);
+    }
+
+    const contentFrame = this.frame;
 
     if (contentFrame) {
       this.context = contentFrame;
       this.contextLocator = null;
     } else {
-      this.context = els[0];
+      this.context = this.page.frame(this.page.frames()[1].name());
       this.contextLocator = locator;
     }
   }
@@ -2444,19 +2801,38 @@ class Playwright extends Helper {
   }
 
   /**
-   * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
+   * Waits for navigation to finish. By default, it takes configured `waitForNavigation` option.
    *
    * See [Playwright's reference](https://playwright.dev/docs/api/class-page?_highlight=waitfornavi#pagewaitfornavigationoptions)
    *
-   * @param {*} opts
+   * @param {*} options
+   */
+  async waitForNavigation(options = {}) {
+    console.log(`waitForNavigation deprecated:
+    * This method is inherently racy, please use 'waitForURL' instead.`);
+    options = {
+      timeout: this.options.getPageTimeout,
+      waitUntil: this.options.waitForNavigation,
+      ...options,
+    };
+    return this.page.waitForNavigation(options);
+  }
+
+  /**
+   * Waits for page navigates to a new URL or reloads. By default, it takes configured `waitForNavigation` option.
+   *
+   * See [Playwright's reference](https://playwright.dev/docs/api/class-page#page-wait-for-url)
+   *
+   * @param {string|RegExp} url - A glob pattern, regex pattern or predicate receiving URL to match while waiting for the navigation. Note that if the parameter is a string without wildcard characters, the method will wait for navigation to URL that is exactly equal to the string.
+   * @param {*} options
    */
-  async waitForNavigation(opts = {}) {
-    opts = {
+  async waitForURL(url, options = {}) {
+    options = {
       timeout: this.options.getPageTimeout,
       waitUntil: this.options.waitForNavigation,
-      ...opts,
+      ...options,
     };
-    return this.page.waitForNavigation(opts);
+    return this.page.waitForURL(url, options);
   }
 
   async waitUntilExists(locator, sec) {
@@ -2476,17 +2852,21 @@ class Playwright extends Helper {
     let waiter;
     const context = await this._getContext();
     if (!locator.isXPath()) {
-      waiter = context.waitForSelector(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`, { timeout: waitTimeout, state: 'detached' });
+      try {
+        await context.locator(`${locator.isCustom() ? `${locator.type}=${locator.value}` : locator.simplify()}`).first().waitFor({ timeout: waitTimeout, state: 'detached' });
+      } catch (e) {
+        throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${e.message}`);
+      }
     } else {
       const visibleFn = function ([locator, $XPath]) {
         eval($XPath); // eslint-disable-line no-eval
         return $XPath(null, locator).length === 0;
       };
       waiter = context.waitForFunction(visibleFn, [locator.value, $XPath.toString()], { timeout: waitTimeout });
+      return waiter.catch((err) => {
+        throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`);
+      });
     }
-    return waiter.catch((err) => {
-      throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`);
-    });
   }
 
   async _waitForAction() {
@@ -2504,9 +2884,9 @@ class Playwright extends Helper {
    * {{> grabElementBoundingRect }}
    */
   async grabElementBoundingRect(locator, prop) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    const rect = await els[0].boundingBox();
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
+    const rect = await el.boundingBox();
     if (prop) return rect[prop];
     return rect;
   }
@@ -2541,24 +2921,559 @@ class Playwright extends Helper {
   async stopMockingRoute(url, handler) {
     return this.browserContext.unroute(...arguments);
   }
-}
 
-module.exports = Playwright;
+  /**
+   * Starts recording the network traffics.
+   * This also resets recorded network requests.
+   *
+   * ```js
+   * I.startRecordingTraffic();
+   * ```
+   *
+   * @return {void}
+   */
+  startRecordingTraffic() {
+    this.flushNetworkTraffics();
+    this.recording = true;
+    this.recordedAtLeastOnce = true;
 
-function buildLocatorString(locator) {
-  if (locator.isCustom()) {
-    return `${locator.type}=${locator.value}`;
-  } if (locator.isXPath()) {
-    // dont rely on heuristics of playwright for figuring out xpath
-    return `xpath=${locator.value}`;
+    this.page.on('requestfinished', async (request) => {
+      const information = {
+        url: request.url(),
+        method: request.method(),
+        requestHeaders: request.headers(),
+        requestPostData: request.postData(),
+        response: request.response(),
+      };
+
+      this.debugSection('REQUEST: ', JSON.stringify(information));
+
+      if (typeof information.requestPostData === 'object') {
+        information.requestPostData = JSON.parse(information.requestPostData);
+      }
+
+      this.requests.push(information);
+    });
+  }
+
+  /**
+  *  Grab the recording network traffics
+  *
+  * ```js
+  * const traffics = await I.grabRecordedNetworkTraffics();
+  * expect(traffics[0].url).to.equal('https://reqres.in/api/comments/1');
+  * expect(traffics[0].response.status).to.equal(200);
+  * expect(traffics[0].response.body).to.contain({ name: 'this was mocked' });
+  * ```
+  *
+  * @return { Promise<Array<any>> }
+  *
+  */
+  async grabRecordedNetworkTraffics() {
+    if (!this.recording || !this.recordedAtLeastOnce) {
+      throw new Error('Failure in test automation. You use "I.grabRecordedNetworkTraffics", but "I.startRecordingTraffic" was never called before.');
+    }
+
+    const promises = this.requests.map(async (request) => {
+      const resp = await request.response;
+      let body;
+      try {
+        // There's no 'body' for some requests (redirect etc...)
+        body = JSON.parse((await resp.body()).toString());
+      } catch (e) {
+        // only interested in JSON, not HTML responses.
+      }
+
+      return {
+        url: resp.url(),
+        response: {
+          status: resp.status(),
+          statusText: resp.statusText(),
+          body,
+        },
+      };
+    });
+
+    return Promise.all(promises);
+  }
+
+  /**
+   * Blocks traffic of a given URL or a list of URLs.
+   *
+   * Examples:
+   *
+   * ```js
+   * I.blockTraffic('http://example.com/css/style.css');
+   * I.blockTraffic('http://example.com/css/*.css');
+   * I.blockTraffic('http://example.com/**');
+   * I.blockTraffic(/\.css$/);
+   * ```
+   *
+   * ```js
+   * I.blockTraffic(['http://example.com/css/style.css', 'http://example.com/css/*.css']);
+   * ```
+   *
+   * @param {string|Array|RegExp} urls URL or a list of URLs to block . URL can contain * for wildcards. Example: https://www.example.com** to block all traffic for that domain. Regexp are also supported.
+   */
+  blockTraffic(urls) {
+    if (Array.isArray(urls)) {
+      urls.forEach(url => {
+        this.page.route(url, (route) => {
+          route
+            .abort()
+            // Sometimes it happens that browser has been closed in the meantime. It is ok to ignore error then.
+            .catch((e) => {});
+        });
+      });
+    } else {
+      this.page.route(urls, (route) => {
+        route
+          .abort()
+          // Sometimes it happens that browser has been closed in the meantime. It is ok to ignore error then.
+          .catch((e) => {});
+      });
+    }
+  }
+
+  /**
+   * Mocks traffic for URL(s).
+   * This is a powerful feature to manipulate network traffic. Can be used e.g. to stabilize your tests, speed up your tests or as a last resort to make some test scenarios even possible.
+   *
+   * Examples:
+   *
+   * ```js
+   * I.mockTraffic('/api/users/1', '{ id: 1, name: 'John Doe' }');
+   * I.mockTraffic('/api/users/*', JSON.stringify({ id: 1, name: 'John Doe' }));
+   * I.mockTraffic([/^https://api.example.com/v1/, 'https://api.example.com/v2/**'], 'Internal Server Error', 'text/html');
+   * ```
+   *
+   * @param urls string|Array These are the URL(s) to mock, e.g. "/fooapi/*" or "['/fooapi_1/*', '/barapi_2/*']". Regular expressions are also supported.
+   * @param responseString string The string to return in fake response's body.
+   * @param contentType Content type of fake response. If not specified default value 'application/json' is used.
+   */
+  mockTraffic(urls, responseString, contentType = 'application/json') {
+    // Required to mock cross-domain requests
+    const headers = { 'access-control-allow-origin': '*' };
+
+    if (typeof urls === 'string') {
+      urls = [urls];
+    }
+
+    urls.forEach((url) => {
+      this.page.route(url, (route) => {
+        if (this.page.isClosed()) {
+          // Sometimes it happens that browser has been closed in the meantime.
+          // In this case we just don't fulfill to prevent error in test scenario.
+          return;
+        }
+        route.fulfill({
+          contentType,
+          headers,
+          body: responseString,
+        });
+      });
+    });
+  }
+
+  /**
+   * Resets all recorded network requests.
+   */
+  flushNetworkTraffics() {
+    this.requests = [];
+  }
+
+  /**
+   * Stops recording of network traffic. Recorded traffic is not flashed.
+   *
+   * ```js
+   * I.stopRecordingTraffic();
+   * ```
+   */
+  stopRecordingTraffic() {
+    this.page.removeAllListeners('request');
+    this.recording = false;
+  }
+
+  /**
+   * Verifies that a certain request is part of network traffic.
+   *
+   * ```js
+   * // checking the request url contains certain query strings
+   * I.amOnPage('https://openai.com/blog/chatgpt');
+   * I.startRecordingTraffic();
+   * await I.seeTraffic({
+   *    name: 'sentry event',
+   *    url: 'https://images.openai.com/blob/cf717bdb-0c8c-428a-b82b-3c3add87a600',
+   *    parameters: {
+   *       width: '1919',
+   *       height: '1138',
+   *     },
+   * });
+   * ```
+   *
+   * ```js
+   * // checking the request url contains certain post data
+   * I.amOnPage('https://openai.com/blog/chatgpt');
+   * I.startRecordingTraffic();
+   * await I.seeTraffic({
+   *    name: 'event',
+   *    url: 'https://cloudflareinsights.com/cdn-cgi/rum',
+   *    requestPostData: {
+   *       st: 2,
+   *     },
+   * });
+   * ```
+   *
+   * @param {Object} opts - options when checking the traffic network.
+   * @param {string} opts.name A name of that request. Can be any value. Only relevant to have a more meaningful error message in case of fail.
+   * @param {string} opts.url Expected URL of request in network traffic
+   * @param {Object} [opts.parameters] Expected parameters of that request in network traffic
+   * @param {Object} [opts.requestPostData] Expected that request contains post data in network traffic
+   * @param {number} [opts.timeout] Timeout to wait for request in seconds. Default is 10 seconds.
+   * @return { Promise<*> }
+   */
+  async seeTraffic({
+    name, url, parameters, requestPostData, timeout = 10,
+  }) {
+    if (!name) {
+      throw new Error('Missing required key "name" in object given to "I.seeTraffic".');
+    }
+
+    if (!url) {
+      throw new Error('Missing required key "url" in object given to "I.seeTraffic".');
+    }
+
+    if (!this.recording || !this.recordedAtLeastOnce) {
+      throw new Error('Failure in test automation. You use "I.seeTraffic", but "I.startRecordingTraffic" was never called before.');
+    }
+
+    for (let i = 0; i <= timeout * 2; i++) {
+      const found = this._isInTraffic(url, parameters);
+      if (found) {
+        return true;
+      }
+      await new Promise((done) => {
+        setTimeout(done, 1000);
+      });
+    }
+
+    // check request post data
+    if (requestPostData && this._isInTraffic(url)) {
+      const advancedTestResults = createAdvancedTestResults(url, requestPostData, this.requests);
+
+      assert.equal(advancedTestResults, true, `Traffic named "${name}" found correct URL ${url}, BUT the post data did not match:\n ${advancedTestResults}`);
+    } else if (parameters && this._isInTraffic(url)) {
+      const advancedTestResults = createAdvancedTestResults(url, parameters, this.requests);
+
+      assert.fail(
+        `Traffic named "${name}" found correct URL ${url}, BUT the query parameters did not match:\n`
+        + `${advancedTestResults}`,
+      );
+    } else {
+      assert.fail(
+        `Traffic named "${name}" not found in recorded traffic within ${timeout} seconds.\n`
+        + `Expected url: ${url}.\n`
+        + `Recorded traffic:\n${this._getTrafficDump()}`,
+      );
+    }
+  }
+
+  /**
+   * Returns full URL of request matching parameter "urlMatch".
+   *
+   * @param {string|RegExp} urlMatch Expected URL of request in network traffic. Can be a string or a regular expression.
+   *
+   * Examples:
+   *
+   * ```js
+   * I.grabTrafficUrl('https://api.example.com/session');
+   * I.grabTrafficUrl(/session.*start/);
+   * ```
+   *
+   * @return {Promise<*>}
+   */
+  grabTrafficUrl(urlMatch) {
+    if (!this.recordedAtLeastOnce) {
+      throw new Error('Failure in test automation. You use "I.grabTrafficUrl", but "I.startRecordingTraffic" was never called before.');
+    }
+
+    for (const i in this.requests) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (this.requests.hasOwnProperty(i)) {
+        const request = this.requests[i];
+
+        if (request.url && request.url.match(new RegExp(urlMatch))) {
+          return request.url;
+        }
+      }
+    }
+
+    assert.fail(`Method "getTrafficUrl" failed: No request found in traffic that matches ${urlMatch}`);
+  }
+
+  /**
+   * Verifies that a certain request is not part of network traffic.
+   *
+   * Examples:
+   *
+   * ```js
+   * I.dontSeeTraffic({ name: 'Unexpected API Call', url: 'https://api.example.com' });
+   * I.dontSeeTraffic({ name: 'Unexpected API Call of "user" endpoint', url: /api.example.com.*user/ });
+   * ```
+   *
+   * @param {Object} opts - options when checking the traffic network.
+   * @param {string} opts.name A name of that request. Can be any value. Only relevant to have a more meaningful error message in case of fail.
+   * @param {string|RegExp} opts.url Expected URL of request in network traffic. Can be a string or a regular expression.
+   *
+   */
+  dontSeeTraffic({ name, url }) {
+    if (!this.recordedAtLeastOnce) {
+      throw new Error('Failure in test automation. You use "I.dontSeeTraffic", but "I.startRecordingTraffic" was never called before.');
+    }
+
+    if (!name) {
+      throw new Error('Missing required key "name" in object given to "I.dontSeeTraffic".');
+    }
+
+    if (!url) {
+      throw new Error('Missing required key "url" in object given to "I.dontSeeTraffic".');
+    }
+
+    if (this._isInTraffic(url)) {
+      assert.fail(`Traffic with name "${name}" (URL: "${url}') found, but was not expected to be found.`);
+    }
+  }
+
+  /**
+   * Checks if URL with parameters is part of network traffic. Returns true or false. Internal method for this helper.
+   *
+   * @param url URL to look for.
+   * @param [parameters] Parameters that this URL needs to contain
+   * @return {boolean} Whether or not URL with parameters is part of network traffic.
+   * @private
+   */
+  _isInTraffic(url, parameters) {
+    let isInTraffic = false;
+    this.requests.forEach((request) => {
+      if (isInTraffic) {
+        return; // We already found traffic. Continue with next request
+      }
+
+      if (!request.url.match(new RegExp(url))) {
+        return; // url not found in this request. continue with next request
+      }
+
+      // URL has matched. Now we check the parameters
+
+      if (parameters) {
+        const advancedReport = allParameterValuePairsMatchExtreme(extractQueryObjects(request.url), parameters);
+        if (advancedReport === true) {
+          isInTraffic = true;
+        }
+      } else {
+        isInTraffic = true;
+      }
+    });
+
+    return isInTraffic;
+  }
+
+  /**
+   * Returns all URLs of all network requests recorded so far during execution of test scenario.
+   *
+   * @return {string} List of URLs recorded as a string, separated by new lines after each URL
+   * @private
+   */
+  _getTrafficDump() {
+    let dumpedTraffic = '';
+    this.requests.forEach((request) => {
+      dumpedTraffic += `${request.method} - ${request.url}\n`;
+    });
+    return dumpedTraffic;
+  }
+
+  /**
+   * Starts recording of websocket messages.
+   * This also resets recorded websocket messages.
+   *
+   * ```js
+   * await I.startRecordingWebSocketMessages();
+   * ```
+   *
+   */
+  async startRecordingWebSocketMessages() {
+    this.flushWebSocketMessages();
+    this.recordingWebSocketMessages = true;
+    this.recordedWebSocketMessagesAtLeastOnce = true;
+
+    this.cdpSession = await this.getNewCDPSession();
+    await this.cdpSession.send('Network.enable');
+    await this.cdpSession.send('Page.enable');
+
+    this.cdpSession.on(
+      'Network.webSocketFrameReceived',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('RECEIVED', payload));
+      },
+    );
+
+    this.cdpSession.on(
+      'Network.webSocketFrameSent',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('SENT', payload));
+      },
+    );
+
+    this.cdpSession.on(
+      'Network.webSocketFrameError',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('ERROR', payload));
+      },
+    );
+  }
+
+  /**
+   * Stops recording WS messages. Recorded WS messages is not flashed.
+   *
+   * ```js
+   * await I.stopRecordingWebSocketMessages();
+   * ```
+   */
+  async stopRecordingWebSocketMessages() {
+    await this.cdpSession.send('Network.disable');
+    await this.cdpSession.send('Page.disable');
+    this.page.removeAllListeners('Network');
+    this.recordingWebSocketMessages = false;
+  }
+
+  /**
+   *  Grab the recording WS messages
+   *
+   * @return { Array<any> }
+   *
+   */
+  grabWebSocketMessages() {
+    if (!this.recordingWebSocketMessages) {
+      if (!this.recordedWebSocketMessagesAtLeastOnce) {
+        throw new Error('Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.');
+      }
+    }
+    return this.webSocketMessages;
+  }
+
+  /**
+   * Resets all recorded WS messages.
+   */
+  flushWebSocketMessages() {
+    this.webSocketMessages = [];
+  }
+
+  /**
+   * Return a performance metric from the chrome cdp session.
+   * Note: Chrome-only
+   *
+   * Examples:
+   *
+   * ```js
+   * const metrics = await I.grabMetrics();
+   *
+   * // returned metrics
+   *
+   * [
+   *   { name: 'Timestamp', value: 1584904.203473 },
+   *   { name: 'AudioHandlers', value: 0 },
+   *   { name: 'AudioWorkletProcessors', value: 0 },
+   *   { name: 'Documents', value: 22 },
+   *   { name: 'Frames', value: 10 },
+   *   { name: 'JSEventListeners', value: 366 },
+   *   { name: 'LayoutObjects', value: 1240 },
+   *   { name: 'MediaKeySessions', value: 0 },
+   *   { name: 'MediaKeys', value: 0 },
+   *   { name: 'Nodes', value: 4505 },
+   *   { name: 'Resources', value: 141 },
+   *   { name: 'ContextLifecycleStateObservers', value: 34 },
+   *   { name: 'V8PerContextDatas', value: 4 },
+   *   { name: 'WorkerGlobalScopes', value: 0 },
+   *   { name: 'UACSSResources', value: 0 },
+   *   { name: 'RTCPeerConnections', value: 0 },
+   *   { name: 'ResourceFetchers', value: 22 },
+   *   { name: 'AdSubframes', value: 0 },
+   *   { name: 'DetachedScriptStates', value: 2 },
+   *   { name: 'ArrayBufferContents', value: 1 },
+   *   { name: 'LayoutCount', value: 0 },
+   *   { name: 'RecalcStyleCount', value: 0 },
+   *   { name: 'LayoutDuration', value: 0 },
+   *   { name: 'RecalcStyleDuration', value: 0 },
+   *   { name: 'DevToolsCommandDuration', value: 0.000013 },
+   *   { name: 'ScriptDuration', value: 0 },
+   *   { name: 'V8CompileDuration', value: 0 },
+   *   { name: 'TaskDuration', value: 0.000014 },
+   *   { name: 'TaskOtherDuration', value: 0.000001 },
+   *   { name: 'ThreadTime', value: 0.000046 },
+   *   { name: 'ProcessTime', value: 0.616852 },
+   *   { name: 'JSHeapUsedSize', value: 19004908 },
+   *   { name: 'JSHeapTotalSize', value: 26820608 },
+   *   { name: 'FirstMeaningfulPaint', value: 0 },
+   *   { name: 'DomContentLoaded', value: 1584903.690491 },
+   *   { name: 'NavigationStart', value: 1584902.841845 }
+   * ]
+   *
+   * ```
+   *
+   * @return {Promise<Array<Object>>}
+   */
+  async grabMetrics() {
+    const client = await this.page.context().newCDPSession(this.page);
+    await client.send('Performance.enable');
+    const perfMetricObject = await client.send('Performance.getMetrics');
+    return perfMetricObject?.metrics;
+  }
+
+  _getWebSocketMessage(payload) {
+    if (payload.errorMessage) {
+      return payload.errorMessage;
+    }
+
+    return payload.response.payloadData;
+  }
+
+  _getWebSocketLog(prefix, payload) {
+    return `${prefix} ID: ${payload.requestId} TIMESTAMP: ${payload.timestamp} (${new Date().toISOString()})\n\n${this._getWebSocketMessage(payload)}\n\n`;
+  }
+
+  async getNewCDPSession() {
+    return this.page.context().newCDPSession(this.page);
+  }
+
+  _logWebsocketMessages(message) {
+    this.webSocketMessages += message;
+  }
+}
+
+module.exports = Playwright;
+
+function buildLocatorString(locator) {
+  if (locator.isCustom()) {
+    return `${locator.type}=${locator.value}`;
+  } if (locator.isXPath()) {
+    return `xpath=${locator.value}`;
   }
   return locator.simplify();
 }
 
 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.$$(buildLocatorString(locator));
+
+  return matcher.locator(buildLocatorString(locator)).all();
+}
+
+async function findElement(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
+  locator = new Locator(locator, 'css');
+
+  return matcher.locator(buildLocatorString(locator)).first();
 }
 
 async function getVisibleElements(elements) {
@@ -2587,6 +3502,9 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
+
+  await highlightActiveElement.call(this, els[0]);
+
   /*
     using the force true options itself but instead dispatching a click
   */
@@ -2598,14 +3516,16 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   const promises = [];
   if (options.waitForNavigation) {
-    promises.push(this.waitForNavigation());
+    promises.push(this.waitForURL(/.*/, { waitUntil: options.waitForNavigation }));
   }
   promises.push(this._waitForAction());
+
   return Promise.all(promises);
 }
 
 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);
@@ -2632,28 +3552,25 @@ async function findClickable(matcher, locator) {
 async function proceedSee(assertType, text, context, strict = false) {
   let description;
   let allText;
+
   if (!context) {
-    let el = await this.context;
+    const el = await this.context;
 
-    if (el && !el.getProperty) {
-      // Fallback to body
-      el = await this.context.$('body');
-    }
+    allText = el.constructor.name !== 'Locator' ? [await el.locator('body').innerText()] : [await el.innerText()];
 
-    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())));
+    allText = await Promise.all(els.map(el => el.innerText()));
   }
 
   if (strict) {
     return allText.map(elText => equals(description)[assertType](text, elText));
   }
-  return stringIncludes(description)[assertType](text, allText.join(' | '));
+  return stringIncludes(description)[assertType](normalizeSpacesInString(text), normalizeSpacesInString(allText.join(' | ')));
 }
 
 async function findCheckable(locator, context) {
@@ -2715,15 +3632,15 @@ async function proceedSeeInField(assertType, field, value) {
   const els = await findFields.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 tag = await el.evaluate(e => e.tagName);
+  const fieldType = await el.getAttribute('type');
 
   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()));
+      elementValues.push(await element.inputValue());
     }
 
     if (typeof value === 'boolean') {
@@ -2737,8 +3654,8 @@ async function proceedSeeInField(assertType, field, value) {
   };
 
   if (tag === 'SELECT') {
-    if (await el.getProperty('multiple')) {
-      const selectedOptions = await el.$$('option:checked');
+    if (await el.getAttribute('multiple')) {
+      const selectedOptions = await el.all('option:checked');
       if (!selectedOptions.length) return null;
 
       const options = await filterFieldsByValue(selectedOptions, value, true);
@@ -2762,14 +3679,23 @@ async function proceedSeeInField(assertType, field, value) {
     return proceedMultiple(els[0]);
   }
 
-  const fieldVal = await el.inputValue();
+  let fieldVal;
+
+  try {
+    fieldVal = await el.inputValue();
+  } catch (e) {
+    if (e.message.includes('Error: Node is not an <input>, <textarea> or <select> element')) {
+      fieldVal = await el.innerText();
+    }
+  }
+
   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());
+    const val = await element.getAttribute('value');
     let isSelected = true;
     if (onlySelected) {
       isSelected = await elementSelected(element);
@@ -2793,17 +3719,19 @@ async function filterFieldsBySelectionState(elements, state) {
 }
 
 async function elementSelected(element) {
-  const type = await element.getProperty('type').then(el => !!el && el.jsonValue());
+  const type = await element.getAttribute('type');
 
   if (type === 'checkbox' || type === 'radio') {
     return element.isChecked();
   }
-  return element.getProperty('selected').then(el => el.jsonValue());
+  return element.getAttribute('selected');
 }
 
 function isFrameLocator(locator) {
   locator = new Locator(locator);
-  if (locator.isFrame()) return locator.value;
+  if (locator.isFrame()) {
+    return locator.value;
+  }
   return false;
 }
 
@@ -2982,7 +3910,7 @@ async function refreshContextSession() {
 
 async function saveVideoForPage(page, name) {
   if (!page.video()) return null;
-  const fileName = `${`${global.output_dir}${pathSeparator}videos${pathSeparator}${Date.now()}_${clearString(name)}`.slice(0, 245)}.webm`;
+  const fileName = `${`${global.output_dir}${pathSeparator}videos${pathSeparator}${uuidv4()}_${clearString(name)}`.slice(0, 245)}.webm`;
   page.video().saveAs(fileName).then(() => {
     if (!page) return;
     page.video().delete().catch(e => {});
@@ -2993,7 +3921,148 @@ async function saveVideoForPage(page, name) {
 async function saveTraceForContext(context, name) {
   if (!context) return;
   if (!context.tracing) return;
-  const fileName = `${`${global.output_dir}${pathSeparator}trace${pathSeparator}${Date.now()}_${clearString(name)}`.slice(0, 245)}.zip`;
+  const fileName = `${`${global.output_dir}${pathSeparator}trace${pathSeparator}${uuidv4()}_${clearString(name)}`.slice(0, 245)}.zip`;
   await context.tracing.stop({ path: fileName });
   return fileName;
 }
+
+async function highlightActiveElement(element) {
+  if (this.options.highlightElement && global.debugMode) {
+    await element.evaluate(el => {
+      const prevStyle = el.style.boxShadow;
+      el.style.boxShadow = '0px 0px 4px 3px rgba(255, 0, 0, 0.7)';
+      setTimeout(() => el.style.boxShadow = prevStyle, 2000);
+    });
+  }
+}
+
+const createAdvancedTestResults = (url, dataToCheck, requests) => {
+  // Creates advanced test results for a network traffic check.
+  // Advanced test results only applies when expected parameters are set
+  if (!dataToCheck) return '';
+
+  let urlFound = false;
+  let advancedResults;
+  requests.forEach((request) => {
+    // url not found in this request. continue with next request
+    if (urlFound || !request.url.match(new RegExp(url))) return;
+    urlFound = true;
+
+    // Url found. Now we create advanced test report for that URL and show which parameters failed
+    if (!request.requestPostData) {
+      advancedResults = allParameterValuePairsMatchExtreme(extractQueryObjects(request.url), dataToCheck);
+    } else if (request.requestPostData) {
+      advancedResults = allRequestPostDataValuePairsMatchExtreme(request.requestPostData, dataToCheck);
+    }
+  });
+  return advancedResults;
+};
+
+const extractQueryObjects = (queryString) => {
+  // Converts a string of GET parameters into an array of parameter objects. Each parameter object contains the properties "name" and "value".
+  if (queryString.indexOf('?') === -1) {
+    return [];
+  }
+  const queryObjects = [];
+
+  const queryPart = queryString.split('?')[1];
+
+  const queryParameters = queryPart.split('&');
+
+  queryParameters.forEach((queryParameter) => {
+    const keyValue = queryParameter.split('=');
+    const queryObject = {};
+    // eslint-disable-next-line prefer-destructuring
+    queryObject.name = keyValue[0];
+    queryObject.value = decodeURIComponent(keyValue[1]);
+    queryObjects.push(queryObject);
+  });
+
+  return queryObjects;
+};
+
+const allParameterValuePairsMatchExtreme = (queryStringObject, advancedExpectedParameterValuePairs) => {
+  // More advanced check if all request parameters match with the expectations
+  let littleReport = '\nQuery parameters:\n';
+  let success = true;
+
+  for (const expectedKey in advancedExpectedParameterValuePairs) {
+    if (!Object.prototype.hasOwnProperty.call(advancedExpectedParameterValuePairs, expectedKey)) {
+      continue;
+    }
+    let parameterFound = false;
+    const expectedValue = advancedExpectedParameterValuePairs[expectedKey];
+
+    for (const queryParameter of queryStringObject) {
+      if (queryParameter.name === expectedKey) {
+        parameterFound = true;
+        if (expectedValue === undefined) {
+          littleReport += `   ${expectedKey.padStart(10, ' ')}\n`;
+        } else if (typeof expectedValue === 'object' && expectedValue.base64) {
+          const decodedActualValue = Buffer.from(queryParameter.value, 'base64').toString('utf8');
+          if (decodedActualValue === expectedValue.base64) {
+            littleReport += `   ${expectedKey.padStart(10, ' ')} = base64(${expectedValue.base64})\n`;
+          } else {
+            littleReport += ` ✖ ${expectedKey.padStart(10, ' ')} = base64(${expectedValue.base64})     -> actual value: "base64(${decodedActualValue})"\n`;
+            success = false;
+          }
+        } else if (queryParameter.value === expectedValue) {
+          littleReport += `   ${expectedKey.padStart(10, ' ')} = ${expectedValue}\n`;
+        } else {
+          littleReport += ` ✖ ${expectedKey.padStart(10, ' ')} = ${expectedValue}      -> actual value: "${queryParameter.value}"\n`;
+          success = false;
+        }
+      }
+    }
+
+    if (parameterFound === false) {
+      littleReport += ` ✖ ${expectedKey.padStart(10, ' ')}${expectedValue ? ` = ${JSON.stringify(expectedValue)}` : ''}      -> parameter not found in request\n`;
+      success = false;
+    }
+  }
+
+  return success ? true : littleReport;
+};
+
+const allRequestPostDataValuePairsMatchExtreme = (RequestPostDataObject, advancedExpectedRequestPostValuePairs) => {
+  // More advanced check if all request post data match with the expectations
+  let littleReport = '\nRequest Post Data:\n';
+  let success = true;
+
+  for (const expectedKey in advancedExpectedRequestPostValuePairs) {
+    if (!Object.prototype.hasOwnProperty.call(advancedExpectedRequestPostValuePairs, expectedKey)) {
+      continue;
+    }
+    let keyFound = false;
+    const expectedValue = advancedExpectedRequestPostValuePairs[expectedKey];
+
+    for (const [key, value] of Object.entries(RequestPostDataObject)) {
+      if (key === expectedKey) {
+        keyFound = true;
+        if (expectedValue === undefined) {
+          littleReport += `   ${expectedKey.padStart(10, ' ')}\n`;
+        } else if (typeof expectedValue === 'object' && expectedValue.base64) {
+          const decodedActualValue = Buffer.from(value, 'base64').toString('utf8');
+          if (decodedActualValue === expectedValue.base64) {
+            littleReport += `   ${expectedKey.padStart(10, ' ')} = base64(${expectedValue.base64})\n`;
+          } else {
+            littleReport += ` ✖ ${expectedKey.padStart(10, ' ')} = base64(${expectedValue.base64})     -> actual value: "base64(${decodedActualValue})"\n`;
+            success = false;
+          }
+        } else if (value === expectedValue) {
+          littleReport += `   ${expectedKey.padStart(10, ' ')} = ${expectedValue}\n`;
+        } else {
+          littleReport += ` ✖ ${expectedKey.padStart(10, ' ')} = ${expectedValue}      -> actual value: "${value}"\n`;
+          success = false;
+        }
+      }
+    }
+
+    if (keyFound === false) {
+      littleReport += ` ✖ ${expectedKey.padStart(10, ' ')}${expectedValue ? ` = ${JSON.stringify(expectedValue)}` : ''}      -> key not found in request\n`;
+      success = false;
+    }
+  }
+
+  return success ? true : littleReport;
+};