codeceptjs 3.5.9 → 3.5.11

package/lib/helper/Playwright.js

@@ -33,7 +33,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
-const findReact = require('./extras/React');
+const { findReact, findVue } = require('./extras/PlaywrightReactVueLocator');
 
 let playwright;
 let perfTiming;
@@ -94,6 +94,7 @@ const pathSeparator = path.sep;
  * @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
  * @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
  * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
+ * @prop {object} [recordHar] - record HAR and will be saved to `output/har`. See more of [HAR options](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-har).
  */
 const config = {};
 
@@ -141,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
@@ -346,7 +362,7 @@ class Playwright extends Helper {
       ignoreLog: ['warning', 'log'],
       uniqueScreenshotNames: false,
       manualStart: false,
-      getPageTimeout: 0,
+      getPageTimeout: 30000,
       waitForNavigation: 'load',
       restart: false,
       keepCookies: false,
@@ -455,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;
@@ -487,6 +504,15 @@ class Playwright extends Helper {
       }
       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;
@@ -640,7 +666,7 @@ class Playwright extends Helper {
    * ```
    *
    * @param {string} description used to show in logs.
-   * @param {function} fn async function that executed with Playwright helper as argumen
+   * @param {function} fn async function that executed with Playwright helper as arguments
    */
   usePlaywrightTo(description, fn) {
     return this._useTo(...arguments);
@@ -834,6 +860,7 @@ class Playwright extends Helper {
     this.context = null;
     this.frame = null;
     popupStore.clear();
+    if (this.options.recordHar) await this.browserContext.close();
     await this.browser.close();
   }
 
@@ -919,10 +946,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:
@@ -932,6 +958,8 @@ class Playwright extends Helper {
    * // @codeceptjs/configure package must be installed
    * { setWindowSize } = require('@codeceptjs/configure');
    * ````
+   *
+   * {{> resizeWindow }}
    */
   async resizeWindow(width, height) {
     if (width === 'maximize') {
@@ -1031,8 +1059,6 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> 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
@@ -1040,6 +1066,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);
@@ -1089,6 +1119,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 }}
    */
@@ -1250,6 +1307,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
    *
@@ -1444,7 +1517,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
@@ -1477,8 +1550,6 @@ class Playwright extends Helper {
 
   /**
    * {{> doubleClick }}
-   *
-   *
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 });
@@ -1486,15 +1557,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.
    *
@@ -1505,6 +1573,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);
@@ -1513,7 +1584,6 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> uncheckOption }}
    *
    * [Additional options](https://playwright.dev/docs/api/class-elementhandle#element-handle-uncheck) for uncheck available as 3rd argument.
    *
@@ -1524,6 +1594,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);
@@ -1564,9 +1636,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 = [];
@@ -1658,8 +1731,6 @@ class Playwright extends Helper {
 
   /**
    * {{> appendField }}
-   *
-   *
    */
   async appendField(field, value) {
     const els = await findFields.call(this, field);
@@ -1711,8 +1782,15 @@ class Playwright extends Helper {
     const el = els[0];
 
     await highlightActiveElement.call(this, el);
+    let optionToSelect = '';
 
-    if (!Array.isArray(option)) option = [option];
+    try {
+      optionToSelect = await el.locator('option', { hasText: option }).textContent();
+    } catch (e) {
+      optionToSelect = option;
+    }
+
+    if (!Array.isArray(option)) option = [optionToSelect];
 
     await el.selectOption(option);
     return this._waitForAction();
@@ -1876,9 +1954,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();
@@ -1909,8 +1987,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]);
@@ -2042,19 +2120,17 @@ class Playwright extends Helper {
 
     const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
     const elemAmount = res.length;
-    const commands = [];
     let props = [];
 
     for (const element of res) {
-      const cssProperties = await element.evaluate((el) => getComputedStyle(el));
-
-      Object.keys(cssPropertiesCamelCase).forEach(prop => {
+      for (const prop of Object.keys(cssProperties)) {
+        const cssProp = await this.grabCssPropertyFrom(locator, prop);
         if (isColorProperty(prop)) {
-          props.push(convertColorToRGBA(cssProperties[prop]));
+          props.push(convertColorToRGBA(cssProp));
         } else {
-          props.push(cssProperties[prop]);
+          props.push(cssProp);
         }
-      });
+      }
     }
 
     const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
@@ -2062,7 +2138,8 @@ class Playwright extends Helper {
     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;
     });
@@ -2091,7 +2168,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;
     });
@@ -2262,6 +2340,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) {
@@ -2289,6 +2371,10 @@ class Playwright extends Helper {
         await this.browserContext.tracing.stop();
       }
     }
+
+    if (this.options.recordHar) {
+      test.artifacts.har = this.currentRunningTest.artifacts.har;
+    }
   }
 
   /**
@@ -2409,9 +2495,9 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> waitForVisible }}
-   *
    * This method accepts [React selectors](https://codecept.io/react).
+   *
+   * {{> waitForVisible }}
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2581,7 +2667,7 @@ class Playwright extends Helper {
       const _contextObject = this.frame ? this.frame : contextObject;
       let count = 0;
       do {
-        waiter = await _contextObject.locator(`:has-text('${text}')`).first().isVisible();
+        waiter = await _contextObject.locator(`:has-text("${text}")`).first().isVisible();
         if (waiter) break;
         await this.wait(1);
         count += 1000;
@@ -3176,7 +3262,7 @@ class Playwright extends Helper {
   /**
    * Returns all URLs of all network requests recorded so far during execution of test scenario.
    *
-   * @return {string} List of URLs recorded as a string, seperaeted by new lines after each URL
+   * @return {string} List of URLs recorded as a string, separated by new lines after each URL
    * @private
    */
   _getTrafficDump() {
@@ -3358,6 +3444,7 @@ function buildLocatorString(locator) {
 
 async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
+  if (locator.vue) return findVue(matcher, locator);
   locator = new Locator(locator, 'css');
 
   return matcher.locator(buildLocatorString(locator)).all();
@@ -3419,6 +3506,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);

package/lib/helper/Puppeteer.js

@@ -259,6 +259,7 @@ class Puppeteer extends Helper {
       headless: !this.options.show,
       ...this._getOptions(config),
     };
+    if (this.puppeteerOptions.headless) this.puppeteerOptions.headless = 'new';
     this.isRemoteBrowser = !!this.puppeteerOptions.browserWSEndpoint;
     popupStore.defaultAction = this.options.defaultPopupAction;
   }
@@ -297,7 +298,7 @@ class Puppeteer extends Helper {
     this.sessionPages = {};
     this.currentRunningTest = test;
     recorder.retry({
-      retries: 3,
+      retries: process.env.FAILED_STEP_RETRIES || 3,
       when: err => {
         if (!err || typeof (err.message) !== 'string') {
           return false;
@@ -684,11 +685,13 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> resizeWindow }}
    *
    * Unlike other drivers Puppeteer changes the size of a viewport, not the window!
-   * Puppeteer does not control the window of a browser so it can't adjust its real size.
+   * Puppeteer does not control the window of a browser, so it can't adjust its real size.
    * It also can't maximize a window.
+   *
+   * {{> resizeWindow }}
+   *
    */
   async resizeWindow(width, height) {
     if (width === 'maximize') {
@@ -740,7 +743,8 @@ class Puppeteer extends Helper {
     assertElementExists(els, locator, 'Element to focus');
     const el = els[0];
 
-    await focusElement(el, this.page);
+    await el.click();
+    await el.focus();
     return this._waitForAction();
   }
 
@@ -880,7 +884,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Find a checkbox by providing human-readable text:
    * NOTE: Assumes the checkable element exists
    *
    * ```js
@@ -895,7 +899,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * this.helpers['Puppeteer']._locateClickable('Next page').then // ...
@@ -907,7 +911,7 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['Puppeteer']._locateFields('Your email').then // ...
@@ -917,6 +921,14 @@ class Puppeteer extends Helper {
     return findFields.call(this, locator);
   }
 
+  /**
+   * {{> grabWebElements }}
+   *
+   */
+  async grabWebElements(locator) {
+    return this._locate(locator);
+  }
+
   /**
    * Switch focus to a particular tab by its number. It waits tabs loading and then switch tab
    *
@@ -1111,7 +1123,7 @@ class Puppeteer extends Helper {
    * Sets a directory to where save files. Allows to test file downloads.
    * Should be used with [FileSystem helper](https://codecept.io/helpers/FileSystem) to check that file were downloaded correctly.
    *
-   * By default files are saved to `output/downloads`.
+   * By default, files are saved to `output/downloads`.
    * This directory is cleaned on every `handleDownloads` call, to ensure no old files are kept.
    *
    * ```js
@@ -1283,9 +1295,9 @@ class Puppeteer 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 = [];
@@ -1387,9 +1399,9 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> attachFile }}
-   *
    * > ⚠ There is an [issue with file upload in Puppeteer 2.1.0 & 2.1.1](https://github.com/puppeteer/puppeteer/issues/5420), downgrade to 2.0.0 if you face it.
+   *
+   * {{> attachFile }}
    */
   async attachFile(locator, pathToFile) {
     const file = path.join(global.codecept_dir, pathToFile);
@@ -1620,9 +1632,9 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> executeScript }}
+   * If a function returns a Promise, tt will wait for its resolution.
    *
-   * If a function returns a Promise It will wait for it resolution.
+   * {{> executeScript }}
    */
   async executeScript(...args) {
     let context = this.page;
@@ -1633,9 +1645,8 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * {{> executeAsyncScript }}
-   *
    * Asynchronous scripts can also be executed with `executeScript` if a function returns a Promise.
+   * {{> executeAsyncScript }}
    */
   async executeAsyncScript(...args) {
     const asyncFn = function () {
@@ -1762,29 +1773,26 @@ class Puppeteer extends Helper {
 
     const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
     const elemAmount = res.length;
-    const commands = [];
-    res.forEach((el) => {
-      Object.keys(cssPropertiesCamelCase).forEach((prop) => {
-        commands.push(el.executionContext()
-          .evaluate((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;
     });
@@ -1815,7 +1823,10 @@ class Puppeteer 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;
+        const _actual = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? val[i] : Number.parseInt(values[i], 10);
+        const _expected = Number.isNaN(values[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(values[i], 10);
+        // if the attribute doesn't exist, returns false as well
+        if (!_actual || !_actual.includes(_expected)) return false;
       }
       return true;
     });
@@ -2085,7 +2096,7 @@ class Puppeteer extends Helper {
   /**
    * {{> waitForVisible }}
    *
-   * This method accepts [React selectors](https://codecept.io/react).
+   * {{ react }}
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout;
@@ -2314,9 +2325,9 @@ class Puppeteer extends Helper {
   }
 
   /**
-   * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
+   * Waits for navigation to finish. By default, takes configured `waitForNavigation` option.
    *
-   * See [Pupeteer's reference](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions)
+   * See [Puppeteer's reference](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions)
    *
    * @param {*} opts
    */