codeceptjs 3.5.4-beta.1 → 3.5.4

package/lib/helper/Playwright.js

@@ -23,6 +23,7 @@ const {
   isModifierKey,
   clearString,
   requireWithFallback,
+  normalizeSpacesInString,
 } = require('../utils');
 const {
   isColorProperty,
@@ -76,7 +77,7 @@ const pathSeparator = path.sep;
  * @prop {boolean} [keepBrowserState=false] - keep browser state between tests when `restart` is set to 'session'.
  * @prop {boolean} [keepCookies=false] - keep cookies between tests when `restart` is set to 'session'.
  * @prop {number} [waitForAction] - how long to wait after click, doubleClick or PressKey actions in ms. Default: 100.
- * @prop {'load' | 'domcontentloaded' | 'networkidle'} [waitForNavigation] - When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `networkidle`. Choose one of those options is possible. See [Playwright API](https://playwright.dev/docs/api/class-page#page-wait-for-navigation).
+ * @prop {'load' | 'domcontentloaded' | 'commit'} [waitForNavigation] - When to consider navigation succeeded. Possible options: `load`, `domcontentloaded`, `commit`. Choose one of those options is possible. See [Playwright API](https://playwright.dev/docs/api/class-page#page-wait-for-url).
  * @prop {number} [pressKeyDelay=10] - Delay between key presses in ms. Used when calling Playwrights page.type(...) in fillField/appendField
  * @prop {number} [getPageTimeout] - config option to set maximum navigation time in milliseconds.
  * @prop {number} [waitForTimeout] - default wait* timeout in ms. Default: 1000.
@@ -93,7 +94,7 @@ const pathSeparator = path.sep;
  * @prop {string[]} [ignoreLog] - An array with console message types that are not logged to debug log. Default value is `['warning', 'log']`. E.g. you can set `[]` to log all messages. See all possible [values](https://playwright.dev/docs/api/class-consolemessage#console-message-type).
  * @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
  * @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
- * @prop {boolean} [highlightElement] - highlight the interacting elements
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false
  */
 const config = {};
 
@@ -207,6 +208,7 @@ const config = {};
  *      url: "http://localhost",
  *      show: true // headless mode not supported for extensions
  *      chromium: {
+ *        // Note: due to this would launch persistent context, so to avoid the error when running tests with run-workers a timestamp would be appended to the defined folder name. For instance: playwright-tmp_1692715649511
  *        userDataDir: '/tmp/playwright-tmp', // necessary to launch the browser in normal mode instead of incognito,
  *        args: [
  *           `--disable-extensions-except=${pathToExtension}`,
@@ -317,6 +319,12 @@ class Playwright extends Helper {
     this.recording = false;
     this.recordedAtLeastOnce = false;
 
+    // for websocket messages
+    this.webSocketMessages = [];
+    this.recordingWebSocketMessages = false;
+    this.recordedWebSocketMessagesAtLeastOnce = false;
+    this.cdpSession = null;
+
     // override defaults with config
     this._setConfig(config);
   }
@@ -343,7 +351,8 @@ class Playwright extends Helper {
       show: false,
       defaultPopupAction: 'accept',
       use: { actionTimeout: 0 },
-      ignoreHTTPSErrors: false, // Adding it here o that context can be set up to ignore the SSL errors
+      ignoreHTTPSErrors: false, // Adding it here o that context can be set up to ignore the SSL errors,
+      highlightElement: false,
     };
 
     config = Object.assign(defaults, config);
@@ -388,7 +397,7 @@ class Playwright extends Helper {
     }
     this.isRemoteBrowser = !!this.playwrightOptions.browserWSEndpoint;
     this.isElectron = this.options.browser === 'electron';
-    this.userDataDir = this.playwrightOptions.userDataDir;
+    this.userDataDir = this.playwrightOptions.userDataDir ? `${this.playwrightOptions.userDataDir}_${Date.now().toString()}` : undefined;
     this.isCDPConnection = this.playwrightOptions.cdpConnection;
     popupStore.defaultAction = this.options.defaultPopupAction;
   }
@@ -461,7 +470,7 @@ class Playwright extends Helper {
     this.isAuthenticated = false;
     if (this.isElectron) {
       this.browserContext = this.browser.context();
-    } else if (this.userDataDir) {
+    } else if (this.playwrightOptions.userDataDir) {
       this.browserContext = this.browser;
     } else {
       const contextOptions = {
@@ -487,8 +496,17 @@ class Playwright extends Helper {
     if (this.isElectron) {
       mainPage = await this.browser.firstWindow();
     } else {
-      const existingPages = await this.browserContext.pages();
-      mainPage = existingPages[0] || await this.browserContext.newPage();
+      try {
+        const existingPages = await this.browserContext.pages();
+        mainPage = existingPages[0] || await this.browserContext.newPage();
+      } catch (e) {
+        if (this.playwrightOptions.userDataDir) {
+          this.browser = await playwright[this.options.browser].launchPersistentContext(this.userDataDir, this.playwrightOptions);
+          this.browserContext = this.browser;
+          const existingPages = await this.browserContext.pages();
+          mainPage = existingPages[0];
+        }
+      }
     }
     await targetCreatedHandler.call(this, mainPage);
 
@@ -519,13 +537,15 @@ class Playwright extends Helper {
 
     // close other sessions
     try {
-      const contexts = await this.browser.contexts();
-      const currentContext = contexts[0];
-      if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
-        this.storageState = await currentContext.storageState();
-      }
+      if ((await this.browser)._type === 'Browser') {
+        const contexts = await this.browser.contexts();
+        const currentContext = contexts[0];
+        if (currentContext && (this.options.keepCookies || this.options.keepBrowserState)) {
+          this.storageState = await currentContext.storageState();
+        }
 
-      await Promise.all(contexts.map(c => c.close()));
+        await Promise.all(contexts.map(c => c.close()));
+      }
     } catch (e) {
       console.log(e);
     }
@@ -555,8 +575,16 @@ class Playwright extends Helper {
           browserContext = browser.context();
           page = await browser.firstWindow();
         } else {
-          browserContext = await this.browser.newContext(Object.assign(this.options, config));
-          page = await browserContext.newPage();
+          try {
+            browserContext = await this.browser.newContext(Object.assign(this.options, config));
+            page = await browserContext.newPage();
+          } catch (e) {
+            if (this.playwrightOptions.userDataDir) {
+              browserContext = await playwright[this.options.browser].launchPersistentContext(`${this.userDataDir}_${this.activeSessionName}`, this.playwrightOptions);
+              this.browser = browserContext;
+              page = await browserContext.pages()[0];
+            }
+          }
         }
 
         if (this.options.trace) await browserContext.tracing.start({ screenshots: true, snapshots: true });
@@ -569,10 +597,12 @@ class Playwright extends Helper {
         // is closed by _after
       },
       loadVars: async (context) => {
-        this.browserContext = context;
-        const existingPages = await context.pages();
-        this.sessionPages[this.activeSessionName] = existingPages[0];
-        return this._setPage(this.sessionPages[this.activeSessionName]);
+        if (context) {
+          this.browserContext = context;
+          const existingPages = await context.pages();
+          this.sessionPages[this.activeSessionName] = existingPages[0];
+          return this._setPage(this.sessionPages[this.activeSessionName]);
+        }
       },
       restoreVars: async (session) => {
         this.withinLocator = null;
@@ -763,7 +793,7 @@ class Playwright extends Helper {
         }
         throw err;
       }
-    } else if (this.userDataDir) {
+    } else if (this.playwrightOptions.userDataDir) {
       this.browser = await playwright[this.options.browser].launchPersistentContext(this.userDataDir, this.playwrightOptions);
     } else {
       this.browser = await playwright[this.options.browser].launch(this.playwrightOptions);
@@ -1038,8 +1068,11 @@ class Playwright extends Helper {
       const body = document.body;
       const html = document.documentElement;
       window.scrollTo(0, Math.max(
-        body.scrollHeight, body.offsetHeight,
-        html.clientHeight, html.scrollHeight, html.offsetHeight,
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight,
       ));
     });
   }
@@ -1545,7 +1578,7 @@ class Playwright extends Helper {
 
     await el.clear();
 
-    highlightActiveElement.call(this, el, this.page);
+    highlightActiveElement.call(this, el, await this._getContext());
 
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
 
@@ -1590,7 +1623,7 @@ 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);
+    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();
@@ -1600,14 +1633,16 @@ class Playwright extends Helper {
    * {{> seeInField }}
    */
   async seeInField(field, value) {
-    return proceedSeeInField.call(this, 'assert', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeInField.call(this, 'assert', field, _value);
   }
 
   /**
    * {{> dontSeeInField }}
    */
   async dontSeeInField(field, value) {
-    return proceedSeeInField.call(this, 'negate', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeInField.call(this, 'negate', field, _value);
   }
 
   /**
@@ -1634,7 +1669,8 @@ class Playwright extends Helper {
     assertElementExists(els, select, 'Selectable field');
     const el = els[0];
 
-    highlightActiveElement.call(this, el, this.page);
+    highlightActiveElement.call(this, el, await this._getContext());
+
     if (!Array.isArray(option)) option = [option];
 
     await el.selectOption(option);
@@ -2553,13 +2589,15 @@ class Playwright extends Helper {
   }
 
   /**
-   * Waits for navigation to finish. By default takes configured `waitForNavigation` option.
+   * Waits for navigation to finish. By default, it takes configured `waitForNavigation` option.
    *
    * See [Playwright's reference](https://playwright.dev/docs/api/class-page?_highlight=waitfornavi#pagewaitfornavigationoptions)
    *
    * @param {*} options
    */
   async waitForNavigation(options = {}) {
+    console.log(`waitForNavigation deprecated:
+    * This method is inherently racy, please use 'waitForURL' instead.`);
     options = {
       timeout: this.options.getPageTimeout,
       waitUntil: this.options.waitForNavigation,
@@ -2568,6 +2606,23 @@ class Playwright extends Helper {
     return this.page.waitForNavigation(options);
   }
 
+  /**
+   * Waits for page navigates to a new URL or reloads. By default, it takes configured `waitForNavigation` option.
+   *
+   * See [Playwright's reference](https://playwright.dev/docs/api/class-page#page-wait-for-url)
+   *
+   * @param {string|RegExp} url - A glob pattern, regex pattern or predicate receiving URL to match while waiting for the navigation. Note that if the parameter is a string without wildcard characters, the method will wait for navigation to URL that is exactly equal to the string.
+   * @param {*} options
+   */
+  async waitForURL(url, options = {}) {
+    options = {
+      timeout: this.options.getPageTimeout,
+      waitUntil: this.options.waitForNavigation,
+      ...options,
+    };
+    return this.page.waitForURL(url, options);
+  }
+
   async waitUntilExists(locator, sec) {
     console.log(`waitUntilExists deprecated:
     * use 'waitForElement' to wait for element to be attached
@@ -2652,16 +2707,16 @@ class Playwright extends Helper {
   }
 
   /**
-   * Starts recording of network traffic.
+   * Starts recording the network traffics.
    * This also resets recorded network requests.
    *
    * ```js
    * I.startRecordingTraffic();
    * ```
    *
-   * @return {Promise<void>}
+   * @return {void}
    */
-  async startRecordingTraffic() {
+  startRecordingTraffic() {
     this.flushNetworkTraffics();
     this.recording = true;
     this.recordedAtLeastOnce = true;
@@ -2672,31 +2727,62 @@ class Playwright extends Helper {
         method: request.method(),
         requestHeaders: request.headers(),
         requestPostData: request.postData(),
+        response: request.response(),
       };
 
       this.debugSection('REQUEST: ', JSON.stringify(information));
 
-      information.requestPostData = JSON.parse(information.requestPostData);
+      if (typeof information.requestPostData === 'object') {
+        information.requestPostData = JSON.parse(information.requestPostData);
+      }
+
       this.requests.push(information);
-      return this._waitForAction();
     });
   }
 
   /**
   *  Grab the recording network traffics
   *
-  * @return { Array<any> }
+  * ```js
+  * const traffics = await I.grabRecordedNetworkTraffics();
+  * expect(traffics[0].url).to.equal('https://reqres.in/api/comments/1');
+  * expect(traffics[0].response.status).to.equal(200);
+  * expect(traffics[0].response.body).to.contain({ name: 'this was mocked' });
+  * ```
+  *
+  * @return { Promise<Array<any>> }
   *
   */
-  grabRecordedNetworkTraffics() {
+  async grabRecordedNetworkTraffics() {
     if (!this.recording || !this.recordedAtLeastOnce) {
       throw new Error('Failure in test automation. You use "I.grabRecordedNetworkTraffics", but "I.startRecordingTraffic" was never called before.');
     }
+
+    const requests = await this.requests;
+    const promises = requests.map(async (request) => request.response.then(
+      async (response) => {
+        let body;
+        try {
+          // There's no 'body' for some requests (redirect etc...)
+          body = JSON.parse((await response.body()).toString());
+        } catch (e) {
+          // only interested in JSON, not HTML responses.
+        }
+
+        request.response = {
+          status: response.status(),
+          statusText: response.statusText(),
+          body,
+        };
+      },
+    ));
+    await Promise.all(promises);
+
     return this.requests;
   }
 
   /**
-   * Blocks traffic for URL.
+   * Blocks traffic of a given URL or a list of URLs.
    *
    * Examples:
    *
@@ -2707,16 +2793,30 @@ class Playwright extends Helper {
    * 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.
+   * ```js
+   * I.blockTraffic(['http://example.com/css/style.css', 'http://example.com/css/*.css']);
+   * ```
+   *
+   * @param {string|Array|RegExp} urls URL or a list of URLs to block . URL can contain * for wildcards. Example: https://www.example.com** to block all traffic for that domain. Regexp are also supported.
    */
-  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();
+  blockTraffic(urls) {
+    if (Array.isArray(urls)) {
+      urls.forEach(url => {
+        this.page.route(url, (route) => {
+          route
+            .abort()
+            // Sometimes it happens that browser has been closed in the meantime. It is ok to ignore error then.
+            .catch((e) => {});
+        });
+      });
+    } else {
+      this.page.route(urls, (route) => {
+        route
+          .abort()
+          // Sometimes it happens that browser has been closed in the meantime. It is ok to ignore error then.
+          .catch((e) => {});
+      });
+    }
   }
 
   /**
@@ -2735,7 +2835,7 @@ class Playwright extends Helper {
    * @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') {
+  mockTraffic(urls, responseString, contentType = 'application/json') {
     // Required to mock cross-domain requests
     const headers = { 'access-control-allow-origin': '*' };
 
@@ -2757,7 +2857,6 @@ class Playwright extends Helper {
         });
       });
     });
-    return this._waitForAction();
   }
 
   /**
@@ -2829,7 +2928,7 @@ class Playwright extends Helper {
     }
 
     if (!this.recording || !this.recordedAtLeastOnce) {
-      throw new Error('Failure in test automation. You use "I.seeInTraffic", but "I.startRecordingTraffic" was never called before.');
+      throw new Error('Failure in test automation. You use "I.seeTraffic", but "I.startRecordingTraffic" was never called before.');
     }
 
     for (let i = 0; i <= timeout * 2; i++) {
@@ -2837,7 +2936,9 @@ class Playwright extends Helper {
       if (found) {
         return true;
       }
-      await new Promise((done) => setTimeout(done, 1000));
+      await new Promise((done) => {
+        setTimeout(done, 1000);
+      });
     }
 
     // check request post data
@@ -2974,6 +3075,163 @@ class Playwright extends Helper {
     });
     return dumpedTraffic;
   }
+
+  /**
+   * Starts recording of websocket messages.
+   * This also resets recorded websocket messages.
+   *
+   * ```js
+   * await I.startRecordingWebSocketMessages();
+   * ```
+   *
+   */
+  async startRecordingWebSocketMessages() {
+    this.flushWebSocketMessages();
+    this.recordingWebSocketMessages = true;
+    this.recordedWebSocketMessagesAtLeastOnce = true;
+
+    this.cdpSession = await this.getNewCDPSession();
+    await this.cdpSession.send('Network.enable');
+    await this.cdpSession.send('Page.enable');
+
+    this.cdpSession.on(
+      'Network.webSocketFrameReceived',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('RECEIVED', payload));
+      },
+    );
+
+    this.cdpSession.on(
+      'Network.webSocketFrameSent',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('SENT', payload));
+      },
+    );
+
+    this.cdpSession.on(
+      'Network.webSocketFrameError',
+      (payload) => {
+        this._logWebsocketMessages(this._getWebSocketLog('ERROR', payload));
+      },
+    );
+  }
+
+  /**
+   * Stops recording WS messages. Recorded WS messages is not flashed.
+   *
+   * ```js
+   * await I.stopRecordingWebSocketMessages();
+   * ```
+   */
+  async stopRecordingWebSocketMessages() {
+    await this.cdpSession.send('Network.disable');
+    await this.cdpSession.send('Page.disable');
+    this.page.removeAllListeners('Network');
+    this.recordingWebSocketMessages = false;
+  }
+
+  /**
+   *  Grab the recording WS messages
+   *
+   * @return { Array<any> }
+   *
+   */
+  grabWebSocketMessages() {
+    if (!this.recordingWebSocketMessages) {
+      if (!this.recordedWebSocketMessagesAtLeastOnce) {
+        throw new Error('Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.');
+      }
+    }
+    return this.webSocketMessages;
+  }
+
+  /**
+   * Resets all recorded WS messages.
+   */
+  flushWebSocketMessages() {
+    this.webSocketMessages = [];
+  }
+
+  /**
+   * Return a performance metric from the chrome cdp session.
+   * Note: Chrome-only
+   *
+   * Examples:
+   *
+   * ```js
+   * const metrics = await I.grabMetrics();
+   *
+   * // returned metrics
+   *
+   * [
+   *   { name: 'Timestamp', value: 1584904.203473 },
+   *   { name: 'AudioHandlers', value: 0 },
+   *   { name: 'AudioWorkletProcessors', value: 0 },
+   *   { name: 'Documents', value: 22 },
+   *   { name: 'Frames', value: 10 },
+   *   { name: 'JSEventListeners', value: 366 },
+   *   { name: 'LayoutObjects', value: 1240 },
+   *   { name: 'MediaKeySessions', value: 0 },
+   *   { name: 'MediaKeys', value: 0 },
+   *   { name: 'Nodes', value: 4505 },
+   *   { name: 'Resources', value: 141 },
+   *   { name: 'ContextLifecycleStateObservers', value: 34 },
+   *   { name: 'V8PerContextDatas', value: 4 },
+   *   { name: 'WorkerGlobalScopes', value: 0 },
+   *   { name: 'UACSSResources', value: 0 },
+   *   { name: 'RTCPeerConnections', value: 0 },
+   *   { name: 'ResourceFetchers', value: 22 },
+   *   { name: 'AdSubframes', value: 0 },
+   *   { name: 'DetachedScriptStates', value: 2 },
+   *   { name: 'ArrayBufferContents', value: 1 },
+   *   { name: 'LayoutCount', value: 0 },
+   *   { name: 'RecalcStyleCount', value: 0 },
+   *   { name: 'LayoutDuration', value: 0 },
+   *   { name: 'RecalcStyleDuration', value: 0 },
+   *   { name: 'DevToolsCommandDuration', value: 0.000013 },
+   *   { name: 'ScriptDuration', value: 0 },
+   *   { name: 'V8CompileDuration', value: 0 },
+   *   { name: 'TaskDuration', value: 0.000014 },
+   *   { name: 'TaskOtherDuration', value: 0.000001 },
+   *   { name: 'ThreadTime', value: 0.000046 },
+   *   { name: 'ProcessTime', value: 0.616852 },
+   *   { name: 'JSHeapUsedSize', value: 19004908 },
+   *   { name: 'JSHeapTotalSize', value: 26820608 },
+   *   { name: 'FirstMeaningfulPaint', value: 0 },
+   *   { name: 'DomContentLoaded', value: 1584903.690491 },
+   *   { name: 'NavigationStart', value: 1584902.841845 }
+   * ]
+   *
+   * ```
+   *
+   * @return {Promise<Array<Object>>}
+   */
+  async grabMetrics() {
+    const client = await this.page.context().newCDPSession(this.page);
+    await client.send('Performance.enable');
+    const perfMetricObject = await client.send('Performance.getMetrics');
+    return perfMetricObject?.metrics;
+  }
+
+  _getWebSocketMessage(payload) {
+    if (payload.errorMessage) {
+      return payload.errorMessage;
+    }
+
+    return payload.response.payloadData;
+  }
+
+  _getWebSocketLog(prefix, payload) {
+    return `${prefix} ID: ${payload.requestId} TIMESTAMP: ${payload.timestamp} (${new Date().toISOString()})\n\n${this._getWebSocketMessage(payload)}\n\n`;
+  }
+
+  async getNewCDPSession() {
+    return this.page.context().newCDPSession(this.page);
+  }
+
+  _logWebsocketMessages(message) {
+    this.webSocketMessages += message;
+  }
 }
 
 module.exports = Playwright;
@@ -3028,7 +3286,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());
 
   /*
     using the force true options itself but instead dispatching a click
@@ -3041,7 +3299,7 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   const promises = [];
   if (options.waitForNavigation) {
-    promises.push(this.waitForNavigation());
+    promises.push(this.waitForURL(/.*/, { waitUntil: options.waitForNavigation }));
   }
   promises.push(this._waitForAction());
 
@@ -3097,7 +3355,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) {
@@ -3206,7 +3464,16 @@ async function proceedSeeInField(assertType, field, value) {
     return proceedMultiple(els[0]);
   }
 
-  const fieldVal = await el.inputValue();
+  let fieldVal;
+
+  try {
+    fieldVal = await el.inputValue();
+  } catch (e) {
+    if (e.message.includes('Error: Node is not an <input>, <textarea> or <select> element')) {
+      fieldVal = await el.innerText();
+    }
+  }
+
   return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal);
 }
 
@@ -3443,7 +3710,7 @@ async function saveTraceForContext(context, name) {
 }
 
 function highlightActiveElement(element, context) {
-  if (!this.options.enableHighlight && !store.debugMode) return;
+  if (!this.options.highlightElement && !store.debugMode) return;
 
   highlightElement(element, context);
 }