codeceptjs 3.4.1 → 3.5.1

package/lib/helper/Playwright.js

@@ -2,7 +2,9 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('@codeceptjs/helper');
+const { v4: uuidv4 } = require('uuid');
 const Locator = require('../locator');
+const store = require('../store');
 const recorder = require('../recorder');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals } = require('../assert/equal');
@@ -43,19 +45,20 @@ 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} [browser] - a browser to test on, either: `chromium`, `firefox`, `webkit`, `electron`. Default: chromium.
- * @prop {boolean} [show=false] - show browser window.
+ * @prop {string} [url] - base url of website to be tested
+ * @prop {'chromium' | 'firefox'| 'webkit' | 'electron'} [browser='chromium'] - a browser to test on, either: `chromium`, `firefox`, `webkit`, `electron`. Default: chromium.
+ * @prop {boolean} [show=true] - show browser window.
  * @prop {string|boolean} [restart=false] - restart strategy between tests. Possible values:
  *   * 'context' or **false** - restarts [browser context](https://playwright.dev/docs/api/class-browsercontext) but keeps running browser. Recommended by Playwright team to keep tests isolated.
  *   * 'browser' or **true** - closes browser and opens it again between tests.
@@ -72,13 +75,13 @@ const pathSeparator = path.sep;
  * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to 'session'.
  * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to 'session'.
  * @prop {number} [waitForAction] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
- * @prop {string} [waitForNavigation] - When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `networkidle`. Choose one of those options is possible. See [Playwright API](https://playwright.dev/docs/api/class-page#page-wait-for-navigation).
+ * @prop {'load' | 'domcontentloaded' | '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 {number} [pressKeyDelay=10] - Delay between key presses in ms. Used when calling Playwrights page.type(...) in fillField/appendField
  * @prop {number} [getPageTimeout] - config option to set maximum navigation time in milliseconds.
  * @prop {number} [waitForTimeout] - default wait* timeout in ms. Default: 1000.
  * @prop {object} [basicAuth] - the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  * @prop {string} [windowSize] - default window size. Set a dimension like `640x480`.
- * @prop {string} [colorScheme] - default color scheme. Possible values: `dark` | `light` | `no-preference`.
+ * @prop {'dark' | 'light' | 'no-preference'} [colorScheme] - default color scheme. Possible values: `dark` | `light` | `no-preference`.
  * @prop {string} [userAgent] - user-agent string.
  * @prop {string} [locale] - locale string. Example: 'en-GB', 'de-DE', 'fr-FR', ...
  * @prop {boolean} [manualStart] - do not start browser before a test, start it manually inside a helper with `this.helpers["Playwright"]._startBrowser()`.
@@ -88,6 +91,8 @@ const pathSeparator = path.sep;
  * @prop {any} [channel] - (While Playwright can operate against the stock Google Chrome and Microsoft Edge browsers available on the machine. In particular, current Playwright version will support Stable and Beta channels of these browsers. See [Google Chrome & Microsoft Edge](https://playwright.dev/docs/browsers/#google-chrome--microsoft-edge).
  * @prop {string[]} [ignoreLog] - An array with console message types that are not logged to debug log. Default value is `['warning', 'log']`. E.g. you can set `[]` to log all messages. See all possible [values](https://playwright.dev/docs/api/class-consolemessage#console-message-type).
  * @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
+ * @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
+ * @prop {boolean} [highlightElement] - highlight the interacting elements
  */
 const config = {};
 
@@ -125,7 +130,7 @@ const config = {};
  *
  * #### Trace Recording Customization
  *
- * Trace recording provides a complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
+ * Trace recording provides complete information on test execution and includes DOM snapshots, screenshots, and network requests logged during run.
  * Traces will be saved to `output/trace`
  *
  * * `trace`: enables trace recording for failed tests; trace are saved into `output/trace` folder
@@ -255,6 +260,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
@@ -368,15 +389,24 @@ class Playwright extends Helper {
 
   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',
+      },
     ];
   }
 
@@ -903,8 +933,34 @@ class Playwright extends Helper {
   }
 
   /**
-   * {{> dragAndDrop }}
+   * {{> focus }}
    *
+   */
+  async focus(locator, options = {}) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to focus');
+    const el = els[0];
+
+    await el.focus(options);
+    return this._waitForAction();
+  }
+
+  /**
+   * {{> 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]);
+
+    await this.page.locator(elXpath).blur(options);
+    return this._waitForAction();
+  }
+
+  /**
+   * {{> dragAndDrop }}
    * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-drag-and-drop) can be passed as 3rd argument.
    *
    * ```js
@@ -912,13 +968,27 @@ class Playwright extends Helper {
    * I.dragAndDrop('img.src', 'img.dst', { sourcePosition: {x: 10, y: 10} })
    * ```
    *
-   * > By default option `force: true` is set
+   * > When no option is set, custom drag and drop would be used, to use the dragAndDrop API from Playwright, please set options, for example `force: true`
    */
-  async dragAndDrop(srcElement, destElement, options = { force: true }) {
-    const src = new Locator(srcElement, 'css');
-    const dst = new Locator(destElement, 'css');
+  async dragAndDrop(srcElement, destElement, options) {
+    const src = new Locator(srcElement);
+    const dst = new Locator(destElement);
+
+    if (options) {
+      return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    }
+
+    const _smallWaitInMs = 600;
+    await this.page.locator(buildLocatorString(src)).hover();
+    await this.page.mouse.down();
+    await this.page.waitForTimeout(_smallWaitInMs);
 
-    return this.page.dragAndDrop(buildLocatorString(src), buildLocatorString(dst), options);
+    const destElBox = await this.page.locator(buildLocatorString(dst)).boundingBox();
+
+    await this.page.mouse.move(destElBox.x + destElBox.width / 2, destElBox.y + destElBox.height / 2);
+    await this.page.locator(buildLocatorString(dst)).hover({ position: { x: 10, y: 10 } });
+    await this.page.waitForTimeout(_smallWaitInMs);
+    await this.page.mouse.up();
   }
 
   /**
@@ -1282,7 +1352,7 @@ class Playwright extends Helper {
   /**
    * {{> click }}
    *
-   * @param {any} [opts] [Additional options](https://playwright.dev/docs/api/class-page#page-click) for click available as 3rd argument.
+   * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-page#page-click) for click available as 3rd argument.
    *
    * Examples:
    *
@@ -1295,8 +1365,8 @@ class Playwright extends Helper {
    * ```
    *
    */
-  async click(locator, context = null, opts = {}) {
-    return proceedClick.call(this, locator, context, opts);
+  async click(locator, context = null, options = {}) {
+    return proceedClick.call(this, locator, context, options);
   }
 
   /**
@@ -1438,6 +1508,7 @@ class Playwright extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
 
@@ -1462,15 +1533,47 @@ class Playwright extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
+
+    highlightActiveElement.call(this, el, this.page);
+
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
     return this._waitForAction();
   }
 
   /**
-   * {{> clearField }}
+   * Clears the text input element: `<input>`, `<textarea>` or `[contenteditable]` .
+   *
+  *
+  * Examples:
+  *
+  * ```js
+  * I.clearField('.text-area')
+  *
+  * // if this doesn't work use force option
+  * I.clearField('#submit', { force: true })
+  * ```
+  * Use `force` to bypass the [actionability](https://playwright.dev/docs/actionability) checks.
+  *
+   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
+   * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-locator#locator-clear) for available options object as 2nd argument.
    */
-  async clearField(field) {
-    return this.fillField(field, '');
+  async clearField(locator, options = {}) {
+    let result;
+    const isNewClearMethodPresent = typeof this.page.locator().clear === 'function';
+
+    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 this.page.locator(elXpath).clear(options);
+      result = await this._waitForAction();
+    } else {
+      result = await this.fillField(locator, '');
+    }
+    return result;
   }
 
   /**
@@ -1481,8 +1584,9 @@ class Playwright extends Helper {
   async appendField(field, value) {
     const els = await findFields.call(this, field);
     assertElementExists(els, field, 'Field');
+    highlightActiveElement.call(this, els[0], this.page);
     await els[0].press('End');
-    await els[0].type(value, { delay: this.options.pressKeyDelay });
+    await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
   }
 
@@ -1526,6 +1630,7 @@ class Playwright extends Helper {
     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) {
@@ -1999,23 +2104,32 @@ class Playwright extends Helper {
    */
   async saveScreenshot(fileName, fullPage) {
     const fullPageOption = fullPage || this.options.fullPageScreenshots;
-    const outputFile = screenshotOutputFolder(fileName);
+    let outputFile = screenshotOutputFolder(fileName);
 
     this.debug(`Screenshot is saving to ${outputFile}`);
 
+    await this.page.screenshot({
+      path: outputFile,
+      fullPage: fullPageOption,
+      type: 'png',
+    });
+
     if (this.activeSessionName) {
-      const activeSessionPage = this.sessionPages[this.activeSessionName];
-
-      if (activeSessionPage) {
-        return activeSessionPage.screenshot({
-          path: outputFile,
-          fullPage: fullPageOption,
-          type: 'png',
-        });
+      for (const sessionName in this.sessionPages) {
+        const activeSessionPage = this.sessionPages[sessionName];
+        outputFile = screenshotOutputFolder(`${sessionName}_${fileName}`);
+
+        this.debug(`${sessionName} - Screenshot is saving to ${outputFile}`);
+
+        if (activeSessionPage) {
+          await activeSessionPage.screenshot({
+            path: outputFile,
+            fullPage: fullPageOption,
+            type: 'png',
+          });
+        }
       }
     }
-
-    return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
   }
 
   /**
@@ -2083,7 +2197,7 @@ class Playwright extends Helper {
       test.artifacts.trace = await saveTraceForContext(this.browserContext, `${test.title}.failed`);
       for (const sessionName in this.sessionPages) {
         if (!this.sessionPages[sessionName].context) continue;
-        test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context(), `${test.title}_${sessionName}.failed`);
+        test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context, `${test.title}_${sessionName}.failed`);
       }
     }
   }
@@ -2106,7 +2220,7 @@ class Playwright extends Helper {
           test.artifacts.trace = await saveTraceForContext(this.browserContext, `${test.title}.passed`);
           for (const sessionName in this.sessionPages) {
             if (!this.sessionPages[sessionName].context) continue;
-            test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context(), `${test.title}_${sessionName}.passed`);
+            test.artifacts[`trace_${sessionName}`] = await saveTraceForContext(this.sessionPages[sessionName].context, `${test.title}_${sessionName}.passed`);
           }
         }
       } else {
@@ -2448,15 +2562,15 @@ class Playwright extends Helper {
    *
    * See [Playwright's reference](https://playwright.dev/docs/api/class-page?_highlight=waitfornavi#pagewaitfornavigationoptions)
    *
-   * @param {*} opts
+   * @param {*} options
    */
-  async waitForNavigation(opts = {}) {
-    opts = {
+  async waitForNavigation(options = {}) {
+    options = {
       timeout: this.options.getPageTimeout,
       waitUntil: this.options.waitForNavigation,
-      ...opts,
+      ...options,
     };
-    return this.page.waitForNavigation(opts);
+    return this.page.waitForNavigation(options);
   }
 
   async waitUntilExists(locator, sec) {
@@ -2549,11 +2663,41 @@ function buildLocatorString(locator) {
   if (locator.isCustom()) {
     return `${locator.type}=${locator.value}`;
   } if (locator.isXPath()) {
-    // dont rely on heuristics of playwright for figuring out xpath
     return `xpath=${locator.value}`;
   }
   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('/')}`;
+  }
+
+  return elementHandle.evaluate(generateXPath);
+}
 
 async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
@@ -2587,6 +2731,10 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
+
+  const element = els[0];
+  highlightActiveElement.call(this, els[0], this.page);
+
   /*
     using the force true options itself but instead dispatching a click
   */
@@ -2601,6 +2749,7 @@ async function proceedClick(locator, context = null, options = {}) {
     promises.push(this.waitForNavigation());
   }
   promises.push(this._waitForAction());
+
   return Promise.all(promises);
 }
 
@@ -2982,7 +3131,7 @@ async function refreshContextSession() {
 
 async function saveVideoForPage(page, name) {
   if (!page.video()) return null;
-  const fileName = `${`${global.output_dir}${pathSeparator}videos${pathSeparator}${Date.now()}_${clearString(name)}`.slice(0, 245)}.webm`;
+  const fileName = `${`${global.output_dir}${pathSeparator}videos${pathSeparator}${uuidv4()}_${clearString(name)}`.slice(0, 245)}.webm`;
   page.video().saveAs(fileName).then(() => {
     if (!page) return;
     page.video().delete().catch(e => {});
@@ -2993,7 +3142,13 @@ async function saveVideoForPage(page, name) {
 async function saveTraceForContext(context, name) {
   if (!context) return;
   if (!context.tracing) return;
-  const fileName = `${`${global.output_dir}${pathSeparator}trace${pathSeparator}${Date.now()}_${clearString(name)}`.slice(0, 245)}.zip`;
+  const fileName = `${`${global.output_dir}${pathSeparator}trace${pathSeparator}${uuidv4()}_${clearString(name)}`.slice(0, 245)}.zip`;
   await context.tracing.stop({ path: fileName });
   return fileName;
 }
+
+function highlightActiveElement(element, context) {
+  if (!this.options.enableHighlight && !store.debugMode) return;
+
+  highlightElement(element, context);
+}

package/lib/helper/Protractor.js

@@ -647,7 +647,7 @@ class Protractor extends Helper {
   async appendField(field, value) {
     const els = await findFields(this.browser, field);
     assertElementExists(els, field, 'Field');
-    return els[0].sendKeys(value);
+    return els[0].sendKeys(value.toString());
   }
 
   /**

package/lib/helper/Puppeteer.js

@@ -6,6 +6,7 @@ const path = require('path');
 const Helper = require('@codeceptjs/helper');
 const Locator = require('../locator');
 const recorder = require('../recorder');
+const store = require('../store');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals } = require('../assert/equal');
 const { equals } = require('../assert/equal');
@@ -33,6 +34,9 @@ const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnection
 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;
@@ -65,6 +69,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
 */
 const config = {};
 
@@ -704,6 +709,31 @@ 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 focusElement(el, this.page);
+    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 }}
    */
@@ -1262,6 +1292,7 @@ class Puppeteer extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
 
@@ -1286,7 +1317,10 @@ class Puppeteer extends Helper {
     } else if (editable) {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
+
+    highlightActiveElement.call(this, el, this.page);
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
+
     return this._waitForAction();
   }
 
@@ -1305,8 +1339,9 @@ 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);
     await els[0].press('End');
-    await els[0].type(value, { delay: this.options.pressKeyDelay });
+    await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
   }
 
@@ -1351,6 +1386,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);
     if (!Array.isArray(option)) option = [option];
 
     for (const key in option) {
@@ -1828,23 +1864,32 @@ class Puppeteer extends Helper {
    */
   async saveScreenshot(fileName, fullPage) {
     const fullPageOption = fullPage || this.options.fullPageScreenshots;
-    const outputFile = screenshotOutputFolder(fileName);
+    let outputFile = screenshotOutputFolder(fileName);
 
     this.debug(`Screenshot is saving to ${outputFile}`);
 
+    await this.page.screenshot({
+      path: outputFile,
+      fullPage: fullPageOption,
+      type: 'png',
+    });
+
     if (this.activeSessionName) {
-      const activeSessionPage = this.sessionPages[this.activeSessionName];
-
-      if (activeSessionPage) {
-        return activeSessionPage.screenshot({
-          path: outputFile,
-          fullPage: fullPageOption,
-          type: 'png',
-        });
+      for (const sessionName in this.sessionPages) {
+        const activeSessionPage = this.sessionPages[sessionName];
+        outputFile = screenshotOutputFolder(`${sessionName}_${fileName}`);
+
+        this.debug(`${sessionName} - Screenshot is saving to ${outputFile}`);
+
+        if (activeSessionPage) {
+          await activeSessionPage.screenshot({
+            path: outputFile,
+            fullPage: fullPageOption,
+            type: 'png',
+          });
+        }
       }
     }
-
-    return this.page.screenshot({ path: outputFile, fullPage: fullPageOption, type: 'png' });
   }
 
   async _failed() {
@@ -2313,12 +2358,16 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element');
   }
+
+  highlightActiveElement.call(this, els[0], this.page);
+
   await els[0].click(options);
   const promises = [];
   if (options.waitForNavigation) {
     promises.push(this.waitForNavigation());
   }
   promises.push(this._waitForAction());
+
   return Promise.all(promises);
 }
 
@@ -2663,3 +2712,9 @@ function getNormalizedKey(key) {
   }
   return normalizedKey;
 }
+
+function highlightActiveElement(element, context) {
+  if (!this.options.enableHighlight && !store.debugMode) return;
+
+  highlightElement(element, context);
+}

package/lib/helper/REST.js

@@ -34,7 +34,8 @@ const config = {};
  *       endpoint: 'http://site.com/api',
  *       prettyPrintJson: true,
  *       onRequest: (request) => {
- *       request.headers.auth = '123';
+ *         request.headers.auth = '123';
+ *       }
  *     }
  *   }
  *}
@@ -136,6 +137,15 @@ class REST extends Helper {
       request.auth = this.headers.auth;
     }
 
+    if (typeof request.data === 'object') {
+      const returnedValue = {};
+      for (const [key, value] of Object.entries(request.data)) {
+        returnedValue[key] = value;
+        if (value instanceof Secret) returnedValue[key] = value.getMasked();
+      }
+      _debugRequest.data = returnedValue;
+    }
+
     if (request.data instanceof Secret) {
       _debugRequest.data = '*****';
       request.data = (typeof request.data === 'object' && !(request.data instanceof Secret)) ? { ...request.data.toString() } : request.data.toString();
@@ -198,7 +208,7 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */
@@ -222,8 +232,8 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {*} [payload={}] - the payload to be sent. By default it is sent as an empty object
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {*} [payload={}] - the payload to be sent. By default, it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */
@@ -317,7 +327,7 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */