codeceptjs 3.5.0 → 3.5.1-2.beta.7

package/lib/helper/Playwright.js

@@ -3,6 +3,7 @@ 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');
@@ -22,6 +23,7 @@ const {
   isModifierKey,
   clearString,
   requireWithFallback,
+  normalizeSpacesInString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -31,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;
@@ -45,20 +47,19 @@ const {
   setRestartStrategy, restartsSession, restartsContext, restartsBrowser,
 } = require('./extras/PlaywrightRestartOpts');
 const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
-const { highlightElement } = require('./scripts/highlightElement');
 
 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} [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=false] - show browser window.
+ * @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.
@@ -75,7 +76,7 @@ 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 {'load' | 'domcontentloaded' | 'networkidle'} [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.
@@ -92,7 +93,8 @@ const pathSeparator = path.sep;
  * @prop {string[]} [ignoreLog] - An array with console message types that are not logged to debug log. Default value is `['warning', 'log']`. E.g. you can set `[]` to log all messages. See all possible [values](https://playwright.dev/docs/api/class-consolemessage#console-message-type).
  * @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
  * @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
- * @prop {boolean} [highlightElement] - highlight the interacting elements
+ * @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 = {};
 
@@ -115,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.
  *
  *
@@ -136,6 +142,21 @@ const config = {};
  * * `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
@@ -206,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}`,
@@ -260,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
@@ -295,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);
   }
@@ -313,7 +362,7 @@ class Playwright extends Helper {
       ignoreLog: ['warning', 'log'],
       uniqueScreenshotNames: false,
       manualStart: false,
-      getPageTimeout: 0,
+      getPageTimeout: 30000,
       waitForNavigation: 'load',
       restart: false,
       keepCookies: false,
@@ -321,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);
@@ -366,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',
+      },
     ];
   }
 
@@ -412,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;
@@ -430,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 = {
@@ -442,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
       }
     }
 
@@ -456,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);
 
@@ -488,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);
     }
@@ -524,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 });
@@ -538,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;
@@ -575,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);
@@ -732,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);
@@ -765,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();
   }
 
@@ -788,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);
@@ -805,6 +899,7 @@ class Playwright extends Helper {
     this.withinLocator = null;
     this.context = await this.page;
     this.contextLocator = null;
+    this.frame = null;
   }
 
   _extractDataFromPerformanceTiming(timing, ...dataNames) {
@@ -852,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:
@@ -865,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') {
@@ -879,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.');
     }
@@ -898,70 +994,72 @@ 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();
   }
 
   /**
-   * Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the matching element.
-   * @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-focus) for available options object as 2nd argument.
-   *
-   * Examples:
-   *
-   * ```js
-   * I.dontSee('#add-to-cart-btn');
-   * I.focus('#product-tile')
-   * I.see('#add-to-cart-bnt');
-   * ```
+   * {{> focus }}
    *
    */
   async focus(locator, options = {}) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator, 'Element to focus');
-    const el = els[0];
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to focus');
 
     await el.focus(options);
     return this._waitForAction();
   }
 
   /**
-   * Remove focus from a text input, button, etc
-   * Calls [blur](https://playwright.dev/docs/api/class-locator#locator-blur) on the element.
-   * @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-blur) for available options object as 2nd argument.
-   *
-   * Examples:
-   *
-   * ```js
-   * I.blur('.text-area')
-   * ```
-   * ```js
-   * //element `#product-tile` is focused
-   * I.see('#add-to-cart-btn');
-   * I.blur('#product-tile')
-   * I.dontSee('#add-to-cart-btn');
-   * ```
+   * {{> blur }}
    *
    */
   async blur(locator, options = {}) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator, 'Element to blur');
-    // TODO: locator change required after #3677 implementation
-    const elXpath = await getXPathForElement(els[0]);
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to blur');
 
-    await this.page.locator(elXpath).blur(options);
+    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);
+  }
 
   /**
-   * {{> dragAndDrop }}
-   * @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
@@ -969,6 +1067,10 @@ class Playwright extends Helper {
    * ```
    *
    * > 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) {
     const src = new Locator(srcElement);
@@ -1018,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 }}
    */
@@ -1035,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,
       ));
     });
   }
@@ -1052,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 });
@@ -1119,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
@@ -1138,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 // ...
@@ -1150,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 // ...
@@ -1160,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
    *
@@ -1354,7 +1518,7 @@ class Playwright extends Helper {
    *
    * @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
@@ -1387,8 +1551,6 @@ class Playwright extends Helper {
 
   /**
    * {{> doubleClick }}
-   *
-   *
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
@@ -1396,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.
    *
@@ -1415,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);
@@ -1423,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.
    *
@@ -1434,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);
@@ -1474,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 = [];
@@ -1526,15 +1690,10 @@ 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);
-    }
 
-    highlightActiveElement.call(this, el, this.page);
+    await el.clear();
+
+    await highlightActiveElement.call(this, el);
 
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
 
@@ -1542,46 +1701,42 @@ class Playwright extends Helper {
   }
 
   /**
-   * Clear the <input>, <textarea> or [contenteditable] .
+   * 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.
-   *
-   * Examples:
-   *
-   * ```js
-   * I.clearField('.text-area')
-   * ```
-   * ```js
-   * I.clearField('#submit', { force: true }) // force to bypass the [actionability](https://playwright.dev/docs/actionability) checks.
-   * ```
    */
   async clearField(locator, options = {}) {
-    let result;
-    const isNewClearMethodPresent = typeof this.page.locator().clear === 'function';
+    const els = await findFields.call(this, locator);
+    assertElementExists(els, locator, 'Field to clear');
+
+    const el = els[0];
 
-    if (isNewClearMethodPresent) {
-      const els = await findFields.call(this, locator);
-      assertElementExists(els, locator, 'Field to clear');
-      // TODO: locator change required after #3677 implementation
-      const elXpath = await getXPathForElement(els[0]);
+    await highlightActiveElement.call(this, el);
 
-      await this.page.locator(elXpath).clear(options);
-      result = await this._waitForAction();
-    } else {
-      result = await this.fillField(locator, '');
-    }
-    return result;
+    await el.clear();
+
+    return this._waitForAction();
   }
 
   /**
    * {{> appendField }}
-   *
-   *
    */
   async appendField(field, value) {
     const els = await findFields.call(this, field);
     assertElementExists(els, field, 'Field');
-    highlightActiveElement.call(this, els[0], this.page);
+    await highlightActiveElement.call(this, els[0]);
     await els[0].press('End');
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
@@ -1591,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);
   }
 
   /**
@@ -1624,29 +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>');
-    }
-    highlightActiveElement.call(this, el, this.page);
-    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();
   }
 
@@ -1808,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();
@@ -1824,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();
   }
@@ -1841,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]);
@@ -1854,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]);
   }
 
   /**
@@ -1897,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;
@@ -1919,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()));
   }
 
   /**
@@ -1938,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()));
   }
 
   /**
@@ -1959,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;
   }
@@ -1974,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;
     });
@@ -2015,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);
@@ -2024,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;
     });
@@ -2036,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 });
@@ -2074,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;
@@ -2088,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' });
   }
@@ -2197,6 +2341,10 @@ class Playwright extends Helper {
         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) {
@@ -2224,6 +2372,10 @@ class Playwright extends Helper {
         await this.browserContext.tracing.stop();
       }
     }
+
+    if (this.options.recordHar) {
+      test.artifacts.har = this.currentRunningTest.artifacts.har;
+    }
   }
 
   /**
@@ -2336,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}`);
+    }
   }
 
   /**
@@ -2364,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}`);
+    }
   }
 
   /**
@@ -2377,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;
@@ -2444,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()) {
@@ -2456,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}`);
-    });
   }
 
   /**
@@ -2510,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;
     }
   }
@@ -2555,13 +2801,15 @@ 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 {*} 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,
@@ -2570,6 +2818,23 @@ class Playwright extends Helper {
     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 waitForURL(url, options = {}) {
+    options = {
+      timeout: this.options.getPageTimeout,
+      waitUntil: this.options.waitForNavigation,
+      ...options,
+    };
+    return this.page.waitForURL(url, options);
+  }
+
   async waitUntilExists(locator, sec) {
     console.log(`waitUntilExists deprecated:
     * use 'waitForElement' to wait for element to be attached
@@ -2587,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() {
@@ -2615,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;
   }
@@ -2652,54 +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()) {
-    return `xpath=${locator.value}`;
-  }
-  return locator.simplify();
-}
-// TODO: locator change required after #3677 implementation. Temporary solution before migration. Should be deleted after #3677 implementation
-async function getXPathForElement(elementHandle) {
-  function calculateIndex(node) {
-    let index = 1;
-    let sibling = node.previousElementSibling;
-    while (sibling) {
-      if (sibling.tagName === node.tagName) {
-        index++;
+    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);
       }
-      sibling = sibling.previousElementSibling;
+
+      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) => {});
+      });
     }
-    return index;
   }
 
-  function generateXPath(node) {
-    const segments = [];
-    while (node && node.nodeType === Node.ELEMENT_NODE) {
-      if (node.hasAttribute('id')) {
-        segments.unshift(`*[@id="${node.getAttribute('id')}"]`);
-        break;
+  /**
+   * 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 {
-        const index = calculateIndex(node);
-        segments.unshift(`${node.localName}[${index}]`);
-        node = node.parentNode;
+        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 `//${segments.join('/')}`;
+    return this.webSocketMessages;
   }
 
-  return elementHandle.evaluate(generateXPath);
+  /**
+   * 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.locator(buildLocatorString(locator)).all();
+}
+
+async function findElement(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
   locator = new Locator(locator, 'css');
-  return matcher.$$(buildLocatorString(locator));
+
+  return matcher.locator(buildLocatorString(locator)).first();
 }
 
 async function getVisibleElements(elements) {
@@ -2729,8 +3503,7 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  const element = els[0];
-  highlightActiveElement.call(this, els[0], this.page);
+  await highlightActiveElement.call(this, els[0]);
 
   /*
     using the force true options itself but instead dispatching a click
@@ -2743,7 +3516,7 @@ 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());
 
@@ -2752,6 +3525,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);
@@ -2778,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) {
@@ -2861,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') {
@@ -2883,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);
@@ -2908,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);
@@ -2939,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;
 }
 
@@ -3144,8 +3926,143 @@ async function saveTraceForContext(context, name) {
   return fileName;
 }
 
-function highlightActiveElement(element, context) {
-  if (!this.options.enableHighlight && !store.debugMode) return;
-
-  highlightElement(element, context);
+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;
+};