codeceptjs 3.5.2 → 3.5.4-beta.1

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');
@@ -311,6 +312,11 @@ class Playwright extends Helper {
     this.electronSessions = [];
     this.storageState = null;
 
+    // for network stuff
+    this.requests = [];
+    this.recording = false;
+    this.recordedAtLeastOnce = false;
+
     // override defaults with config
     this._setConfig(config);
   }
@@ -818,9 +824,9 @@ class Playwright extends Helper {
       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);
@@ -923,11 +929,11 @@ 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();
   }
@@ -937,9 +943,8 @@ class Playwright extends Helper {
    *
    */
   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();
@@ -950,12 +955,10 @@ class Playwright extends Helper {
    *
    */
   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();
   }
 
@@ -1052,10 +1055,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 });
@@ -1123,7 +1126,20 @@ class Playwright extends Helper {
   }
 
   /**
-   * 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 +1154,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 +1166,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 // ...
@@ -1526,13 +1542,8 @@ 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();
 
     highlightActiveElement.call(this, el, this.page);
 
@@ -1559,21 +1570,16 @@ class Playwright extends Helper {
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-locator#locator-clear) for available options object as 2nd argument.
    */
   async clearField(locator, options = {}) {
-    let result;
-    const isNewClearMethodPresent = false; // not works, disabled for now. Prev: 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]);
+    highlightActiveElement.call(this, el, this.page);
 
-      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();
   }
 
   /**
@@ -1627,29 +1633,11 @@ 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 this._evaluateHandeInContext((element) => {
-      element.dispatchEvent(new Event('input', { bubbles: true }));
-      element.dispatchEvent(new Event('change', { bubbles: true }));
-    }, el);
-
+    await el.selectOption(option);
     return this._waitForAction();
   }
 
@@ -1900,7 +1888,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;
@@ -1922,7 +1910,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()));
   }
 
   /**
@@ -1941,7 +1929,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()));
   }
 
   /**
@@ -1962,7 +1950,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;
   }
@@ -1978,21 +1966,20 @@ 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 = [];
+
+    for (const element of res) {
+      const cssProperties = await element.evaluate((el) => getComputedStyle(el));
+
+      Object.keys(cssPropertiesCamelCase).forEach(prop => {
+        if (isColorProperty(prop)) {
+          props.push(convertColorToRGBA(cssProperties[prop]));
+        } else {
+          props.push(cssProperties[prop]);
+        }
       });
-    });
-    let props = await Promise.all(commands);
+    }
+
     const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
     if (!Array.isArray(props)) props = [props];
     let chunked = chunkArray(props, values.length);
@@ -2018,7 +2005,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);
@@ -2039,11 +2026,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 });
@@ -2077,8 +2064,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;
@@ -2091,10 +2077,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' });
   }
@@ -2520,16 +2505,26 @@ class Playwright extends Helper {
       }
       return;
     }
+    let contentFrame;
+
     if (!locator) {
-      this.context = this.page;
+      this.context = await this.page.frames()[0];
       this.contextLocator = null;
       return;
     }
 
     // iframe by selector
     const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    const contentFrame = await els[0].contentFrame();
+    // assertElementExists(els, locator);
+
+    // get content of the first iframe
+    if ((locator.frame && locator.frame === 'iframe') || locator.toLowerCase() === 'iframe') {
+      contentFrame = await this.page.frames()[1];
+      // get content of the iframe using its name
+    } else if (locator.toLowerCase().includes('name=')) {
+      const frameName = locator.split('=')[1].replace(/"/g, '').replaceAll(/]/g, '');
+      contentFrame = await this.page.frame(frameName);
+    }
 
     if (contentFrame) {
       this.context = contentFrame;
@@ -2618,9 +2613,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;
   }
@@ -2655,6 +2650,330 @@ class Playwright extends Helper {
   async stopMockingRoute(url, handler) {
     return this.browserContext.unroute(...arguments);
   }
+
+  /**
+   * Starts recording of network traffic.
+   * This also resets recorded network requests.
+   *
+   * ```js
+   * I.startRecordingTraffic();
+   * ```
+   *
+   * @return {Promise<void>}
+   */
+  async startRecordingTraffic() {
+    this.flushNetworkTraffics();
+    this.recording = true;
+    this.recordedAtLeastOnce = true;
+
+    this.page.on('requestfinished', async (request) => {
+      const information = {
+        url: request.url(),
+        method: request.method(),
+        requestHeaders: request.headers(),
+        requestPostData: request.postData(),
+      };
+
+      this.debugSection('REQUEST: ', JSON.stringify(information));
+
+      information.requestPostData = JSON.parse(information.requestPostData);
+      this.requests.push(information);
+      return this._waitForAction();
+    });
+  }
+
+  /**
+  *  Grab the recording network traffics
+  *
+  * @return { Array<any> }
+  *
+  */
+  grabRecordedNetworkTraffics() {
+    if (!this.recording || !this.recordedAtLeastOnce) {
+      throw new Error('Failure in test automation. You use "I.grabRecordedNetworkTraffics", but "I.startRecordingTraffic" was never called before.');
+    }
+    return this.requests;
+  }
+
+  /**
+   * Blocks traffic for URL.
+   *
+   * 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$/);
+   * ```
+   *
+   * @param url URL to block . URL can contain * for wildcards. Example: https://www.example.com** to block all traffic for that domain. Regexp are also supported.
+   */
+  async blockTraffic(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) => {});
+    });
+    return this._waitForAction();
+  }
+
+  /**
+   * 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.
+   */
+  async 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,
+        });
+      });
+    });
+    return this._waitForAction();
+  }
+
+  /**
+   * 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.seeInTraffic", 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, seperaeted by new lines after each URL
+   * @private
+   */
+  _getTrafficDump() {
+    let dumpedTraffic = '';
+    this.requests.forEach((request) => {
+      dumpedTraffic += `${request.method} - ${request.url}\n`;
+    });
+    return dumpedTraffic;
+  }
 }
 
 module.exports = Playwright;
@@ -2667,42 +2986,19 @@ function buildLocatorString(locator) {
   }
   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++;
-      }
-      sibling = sibling.previousElementSibling;
-    }
-    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;
-      } else {
-        const index = calculateIndex(node);
-        segments.unshift(`${node.localName}[${index}]`);
-        node = node.parentNode;
-      }
-    }
-    return `//${segments.join('/')}`;
-  }
+async function findElements(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
+  locator = new Locator(locator, 'css');
 
-  return elementHandle.evaluate(generateXPath);
+  return matcher.locator(buildLocatorString(locator)).all();
 }
 
-async function findElements(matcher, locator) {
+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));
 }
 
 async function getVisibleElements(elements) {
@@ -2732,7 +3028,6 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  const element = els[0];
   highlightActiveElement.call(this, els[0], this.page);
 
   /*
@@ -2781,22 +3076,22 @@ async function findClickable(matcher, locator) {
 async function proceedSee(assertType, text, context, strict = false) {
   let description;
   let allText;
+
   if (!context) {
     let el = await this.context;
-
     if (el && !el.getProperty) {
       // Fallback to body
-      el = await this.context.$('body');
+      el = await this.page.$('body');
     }
 
-    allText = [await el.getProperty('innerText').then(p => p.jsonValue())];
+    allText = [await el.innerText()];
     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) {
@@ -2864,15 +3159,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') {
@@ -2886,8 +3181,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);
@@ -2918,7 +3213,7 @@ async function proceedSeeInField(assertType, field, value) {
 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);
@@ -2942,12 +3237,12 @@ 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) {
@@ -3152,3 +3447,134 @@ function highlightActiveElement(element, context) {
 
   highlightElement(element, context);
 }
+
+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;
+};