codeceptjs 3.5.0 → 3.5.1-2.beta.7

package/lib/helper/Protractor.js

@@ -631,14 +631,16 @@ class Protractor 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);
   }
 
   /**
@@ -1053,7 +1055,7 @@ class Protractor extends Helper {
       const stream = fs.createWriteStream(outputFile);
       stream.write(Buffer.from(png, 'base64'));
       stream.end();
-      return new Promise(resolve => stream.on('finish', resolve));
+      return new Promise(resolve => stream.on('finish', resolve)); // eslint-disable-line no-promise-executor-return
     };
 
     const res = await this._locate(locator);
@@ -1076,7 +1078,7 @@ class Protractor extends Helper {
       const stream = fs.createWriteStream(outputFile);
       stream.write(Buffer.from(png, 'base64'));
       stream.end();
-      return new Promise(resolve => stream.on('finish', resolve));
+      return new Promise(resolve => stream.on('finish', resolve)); // eslint-disable-line no-promise-executor-return
     };
 
     if (!fullPage) {
@@ -1613,8 +1615,11 @@ class Protractor 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
       ));
     });
     /* eslint-enable */

package/lib/helper/Puppeteer.js

@@ -4,6 +4,7 @@ const fsExtra = require('fs-extra');
 const path = require('path');
 
 const Helper = require('@codeceptjs/helper');
+const { v4: uuidv4 } = require('uuid');
 const Locator = require('../locator');
 const recorder = require('../recorder');
 const store = require('../store');
@@ -19,11 +20,12 @@ const {
   fileExists,
   chunkArray,
   toCamelCase,
+  clearString,
   convertCssPropertiesToCamelCase,
   screenshotOutputFolder,
   getNormalizedKeyAttributeValue,
   isModifierKey,
-  requireWithFallback,
+  requireWithFallback, normalizeSpacesInString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -35,6 +37,8 @@ const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
 const findReact = require('./extras/React');
 const { highlightElement } = require('./scripts/highlightElement');
+const { blurElement } = require('./scripts/blurElement');
+const { focusElement } = require('./scripts/focusElement');
 
 let puppeteer;
 let perfTiming;
@@ -55,6 +59,8 @@ const consoleLogStore = new Console();
  * @prop {boolean} [disableScreenshots=false]  - don't save screenshot on failure.
  * @prop {boolean} [fullPageScreenshots=false] - make full page screenshots on failure.
  * @prop {boolean} [uniqueScreenshotNames=false]  - option to prevent screenshot override if you have scenarios with the same name in different suites.
+ * @prop {boolean} [trace=false] - record [tracing information](https://pptr.dev/api/puppeteer.tracing) with screenshots.
+ * @prop {boolean} [keepTraceForPassedTests=false] - save trace for passed tests.
  * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to false.
  * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to false.
  * @prop {number} [waitForAction=100] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
@@ -67,7 +73,7 @@ const consoleLogStore = new Console();
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
  * @prop {string} [browser=chrome] - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
  * @prop {object} [chrome] - pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
- * @prop {boolean} [highlightElement] - highlight the interacting elements
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
 */
 const config = {};
 
@@ -90,6 +96,14 @@ const config = {};
  *
  * <!-- configuration -->
  *
+ * #### Trace Recording Customization
+ *
+ * Trace recording provides complete information on test execution and includes screenshots, and network requests logged during run.
+ * Traces will be saved to `output/trace`
+ *
+ * * `trace`: enables trace recording for failed tests; trace are saved into `output/trace` folder
+ * * `keepTraceForPassedTests`: - save trace for passed tests
+ *
  * #### Example #1: Wait for 0 network connections.
  *
  * ```js
@@ -229,6 +243,7 @@ class Puppeteer extends Helper {
       keepBrowserState: false,
       show: false,
       defaultPopupAction: 'accept',
+      highlightElement: false,
     };
 
     return Object.assign(defaults, config);
@@ -244,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;
   }
@@ -278,10 +294,11 @@ class Puppeteer extends Helper {
     }
   }
 
-  async _before() {
+  async _before(test) {
     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;
@@ -601,8 +618,8 @@ class Puppeteer extends Helper {
         return this.switchTo(null)
           .then(() => 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;
     }
 
@@ -644,6 +661,14 @@ class Puppeteer extends Helper {
       }
     }
 
+    if (this.options.trace) {
+      const fileName = `${`${global.output_dir}${path.sep}trace${path.sep}${uuidv4()}_${clearString(this.currentRunningTest.title)}`.slice(0, 245)}.json`;
+      const dir = path.dirname(fileName);
+      if (!fileExists(dir)) fs.mkdirSync(dir);
+      await this.page.tracing.start({ screenshots: true, path: fileName });
+      this.currentRunningTest.artifacts.trace = fileName;
+    }
+
     await this.page.goto(url, { waitUntil: this.options.waitForNavigation });
 
     const performanceTiming = JSON.parse(await this.page.evaluate(() => JSON.stringify(window.performance.timing)));
@@ -660,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') {
@@ -679,14 +706,14 @@ class Puppeteer extends Helper {
    * Set headers for all next requests
    *
    * ```js
-   * I.haveRequestHeaders({
+   * I.setPuppeteerRequestHeaders({
    *    'X-Sent-By': 'CodeceptJS',
    * });
    * ```
    *
    * @param {object} customHeaders headers to set
    */
-  async haveRequestHeaders(customHeaders) {
+  async setPuppeteerRequestHeaders(customHeaders) {
     if (!customHeaders) {
       throw new Error('Cannot send empty headers.');
     }
@@ -707,6 +734,32 @@ class Puppeteer extends Helper {
     return this._waitForAction();
   }
 
+  /**
+   * {{> focus }}
+   *
+   */
+  async focus(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to focus');
+    const el = els[0];
+
+    await el.click();
+    await el.focus();
+    return this._waitForAction();
+  }
+
+  /**
+   * {{> blur }}
+   *
+   */
+  async blur(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to blur');
+
+    await blurElement(els[0], this.page);
+    return this._waitForAction();
+  }
+
   /**
    * {{> dragAndDrop }}
    */
@@ -738,8 +791,11 @@ class Puppeteer 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,
       ));
     });
   }
@@ -828,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
@@ -843,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 // ...
@@ -855,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 // ...
@@ -865,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
    *
@@ -1059,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
@@ -1231,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 = [];
@@ -1291,7 +1355,7 @@ class Puppeteer extends Helper {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
 
-    highlightActiveElement.call(this, el, this.page);
+    highlightActiveElement.call(this, el, await this._getContext());
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
 
     return this._waitForAction();
@@ -1312,7 +1376,7 @@ class Puppeteer extends Helper {
   async appendField(field, value) {
     const els = await findVisibleFields.call(this, field);
     assertElementExists(els, field, 'Field');
-    highlightActiveElement.call(this, els[0], this.page);
+    highlightActiveElement.call(this, els[0], await this._getContext());
     await els[0].press('End');
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
@@ -1322,20 +1386,22 @@ class Puppeteer 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);
   }
 
   /**
-   * {{> 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);
@@ -1359,7 +1425,7 @@ class Puppeteer extends Helper {
     if (await el.getProperty('tagName').then(t => t.jsonValue()) !== 'SELECT') {
       throw new Error('Element is not <select>');
     }
-    highlightActiveElement.call(this, els[0], this.page);
+    highlightActiveElement.call(this, els[0], await this._getContext());
     if (!Array.isArray(option)) option = [option];
 
     for (const key in option) {
@@ -1566,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;
@@ -1579,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 () {
@@ -1708,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;
     });
@@ -1761,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;
     });
@@ -1865,8 +1930,30 @@ class Puppeteer extends Helper {
     }
   }
 
-  async _failed() {
+  async _failed(test) {
     await this._withinEnd();
+
+    if (this.options.trace) {
+      await this.page.tracing.stop();
+      const _traceName = this.currentRunningTest.artifacts.trace.replace('.json', '.failed.json');
+      fs.renameSync(this.currentRunningTest.artifacts.trace, _traceName);
+      test.artifacts.trace = _traceName;
+    }
+  }
+
+  async _passed(test) {
+    await this._withinEnd();
+
+    if (this.options.trace) {
+      await this.page.tracing.stop();
+      if (this.options.keepTraceForPassedTests) {
+        const _traceName = this.currentRunningTest.artifacts.trace.replace('.json', '.passed.json');
+        fs.renameSync(this.currentRunningTest.artifacts.trace, _traceName);
+        test.artifacts.trace = _traceName;
+      } else {
+        fs.unlinkSync(this.currentRunningTest.artifacts.trace);
+      }
+    }
   }
 
   /**
@@ -1978,7 +2065,7 @@ class Puppeteer extends Helper {
     assertElementExists(els, locator);
 
     return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
-      if (/failed: timeout/i.test(e.message)) {
+      if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
         throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`);
       } else {
         throw e;
@@ -2009,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;
@@ -2064,6 +2151,24 @@ class Puppeteer extends Helper {
     });
   }
 
+  /**
+   * {{> 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') {
       return this.context;
@@ -2082,7 +2187,7 @@ class Puppeteer extends Helper {
       return currUrl.indexOf(urlPart) > -1;
     }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
       const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
-      if (/failed: timeout/i.test(e.message)) {
+      if (/Waiting failed:/i.test(e.message) || /failed: timeout/i.test(e.message)) {
         throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`);
       } else {
         throw e;
@@ -2106,7 +2211,7 @@ class Puppeteer extends Helper {
       return currUrl.indexOf(urlPart) > -1;
     }, { timeout: waitTimeout }, urlPart).catch(async (e) => {
       const currUrl = await this._getPageUrl(); // Required because the waitForFunction can't return data.
-      if (/failed: timeout/i.test(e.message)) {
+      if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
         throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`);
       } else {
         throw e;
@@ -2238,9 +2343,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
    */
@@ -2315,6 +2420,10 @@ async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher.executionContext(), locator);
   locator = new Locator(locator, 'css');
   if (!locator.isXPath()) return matcher.$$(locator.simplify());
+  // puppeteer version < 19.4.0 is no longer supported. This one is backward support.
+  if (puppeteer.default?.defaultBrowserRevision) {
+    return matcher.$$(`xpath/${locator.value}`);
+  }
   return matcher.$x(locator.value);
 }
 
@@ -2332,7 +2441,7 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  highlightActiveElement.call(this, els[0], this.page);
+  highlightActiveElement.call(this, els[0], await this._getContext());
 
   await els[0].click(options);
   const promises = [];
@@ -2392,7 +2501,7 @@ async function proceedSee(assertType, text, context, strict = false) {
   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) {
@@ -2569,7 +2678,10 @@ async function elementSelected(element) {
 
 function isFrameLocator(locator) {
   locator = new Locator(locator);
-  if (locator.isFrame()) return locator.value;
+  if (locator.isFrame()) {
+    const _locator = new Locator(locator);
+    return _locator.value;
+  }
   return false;
 }
 
@@ -2687,7 +2799,7 @@ function getNormalizedKey(key) {
 }
 
 function highlightActiveElement(element, context) {
-  if (!this.options.enableHighlight && !store.debugMode) return;
-
-  highlightElement(element, context);
+  if (this.options.highlightElement && global.debugMode) {
+    highlightElement(element, context);
+  }
 }