fix: highlight issue (#3896)

* fix: highlight issue

* introduce debug mode global var

Author: kobenguyent

docs/helpers/Playwright.md

@@ -74,7 +74,7 @@ Type: [object][5]
 -   `ignoreLog` **[Array][9]<[string][8]>?** 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][44].
 -   `ignoreHTTPSErrors` **[boolean][32]?** Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
 -   `bypassCSP` **[boolean][32]?** bypass Content Security Policy or CSP
--   `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false
+-   `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
 
 
 

docs/helpers/Puppeteer.md

@@ -56,7 +56,7 @@ Type: [object][4]
 -   `manualStart` **[boolean][20]?** do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
 -   `browser` **[string][6]?** can be changed to `firefox` when using [puppeteer-firefox][2].
 -   `chrome` **[object][4]?** pass additional [Puppeteer run options][25].
--   `highlightElement` **[boolean][20]?** highlight the interacting elements. Default: false
+-   `highlightElement` **[boolean][20]?** highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
 
 
 

docs/helpers/WebDriver.md

@@ -45,7 +45,7 @@ Type: [object][16]
 -   `desiredCapabilities` **[object][16]?** Selenium's [desired capabilities][6].
 -   `manualStart` **[boolean][32]?** do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
 -   `timeouts` **[object][16]?** [WebDriver timeouts][37] defined as hash.
--   `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false
+-   `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
 
 
 

lib/codecept.js

@@ -89,6 +89,9 @@ class Codecept {
       global.When = stepDefinitions.When;
       global.Then = stepDefinitions.Then;
       global.DefineParameterType = stepDefinitions.defineParameterType;
+
+      // debug mode
+      global.debugMode = false;
     }
   }
 

lib/command/run-workers.js

@@ -40,6 +40,7 @@ module.exports = async function (workerCount, selectedRuns, options) {
 
   try {
     if (options.verbose) {
+      global.debugMode = true;
       const { getMachineInfo } = require('./info');
       await getMachineInfo();
     }

lib/command/run.js

@@ -30,6 +30,7 @@ module.exports = async function (test, options) {
     codecept.loadTests(test);
 
     if (options.verbose) {
+      global.debugMode = true;
       const { getMachineInfo } = require('./info');
       await getMachineInfo();
     }

lib/helper/Playwright.js

@@ -47,7 +47,6 @@ const {
   setRestartStrategy, restartsSession, restartsContext, restartsBrowser,
 } = require('./extras/PlaywrightRestartOpts');
 const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
-const { highlightElement } = require('./scripts/highlightElement');
 
 const pathSeparator = path.sep;
 
@@ -94,7 +93,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. Default: false
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
  */
 const config = {};
 
@@ -1579,7 +1578,7 @@ class Playwright extends Helper {
 
     await el.clear();
 
-    highlightActiveElement.call(this, el, await this._getContext());
+    await highlightActiveElement.call(this, el);
 
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
 
@@ -1609,7 +1608,7 @@ class Playwright extends Helper {
 
     const el = els[0];
 
-    highlightActiveElement.call(this, el, this.page);
+    await highlightActiveElement.call(this, el);
 
     await el.clear();
 
@@ -1624,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], await this._getContext());
+    await highlightActiveElement.call(this, els[0]);
     await els[0].press('End');
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
@@ -1670,7 +1669,7 @@ class Playwright extends Helper {
     assertElementExists(els, select, 'Selectable field');
     const el = els[0];
 
-    highlightActiveElement.call(this, el, await this._getContext());
+    await highlightActiveElement.call(this, el);
 
     if (!Array.isArray(option)) option = [option];
 
@@ -3290,7 +3289,7 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  highlightActiveElement.call(this, els[0], await this._getContext());
+  await highlightActiveElement.call(this, els[0]);
 
   /*
     using the force true options itself but instead dispatching a click
@@ -3716,10 +3715,14 @@ async function saveTraceForContext(context, name) {
   return fileName;
 }
 
-function highlightActiveElement(element, context) {
-  if (!this.options.highlightElement && !store.debugMode) return;
-
-  highlightElement(element, context);
+async function highlightActiveElement(element) {
+  if (this.options.highlightElement && global.debugMode) {
+    await element.evaluate(el => {
+      const prevStyle = el.style.boxShadow;
+      el.style.boxShadow = '0px 0px 4px 3px rgba(255, 0, 0, 0.7)';
+      setTimeout(() => el.style.boxShadow = prevStyle, 2000);
+    });
+  }
 }
 
 const createAdvancedTestResults = (url, dataToCheck, requests) => {

lib/helper/Puppeteer.js

@@ -69,7 +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. Default: false
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
 */
 const config = {};
 
@@ -2727,7 +2727,7 @@ function getNormalizedKey(key) {
 }
 
 function highlightActiveElement(element, context) {
-  if (!this.options.highlightElement && !store.debugMode) return;
-
-  highlightElement(element, context);
+  if (this.options.highlightElement && global.debugMode) {
+    highlightElement(element, context);
+  }
 }

lib/helper/WebDriver.js

@@ -62,7 +62,7 @@ const webRoot = 'body';
  * @prop {object} [desiredCapabilities] Selenium's [desired capabilities](https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities).
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
  * @prop {object} [timeouts] [WebDriver timeouts](http://webdriver.io/docs/timeouts.html) defined as hash.
- * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
  */
 const config = {};
 
@@ -2918,9 +2918,9 @@ function isModifierKey(key) {
 }
 
 function highlightActiveElement(element) {
-  if (!this.options.highlightElement && !store.debugMode) return;
-
-  highlightElement(element, this.browser);
+  if (this.options.highlightElement && global.debugMode) {
+    highlightElement(element, this.browser);
+  }
 }
 
 function prepareLocateFn(context) {

lib/helper/scripts/highlightElement.js

@@ -7,7 +7,7 @@ module.exports.highlightElement = (element, context) => {
   };
 
   try {
-    // Playwright, Puppeteer
+    // Puppeteer
     context.evaluate(clientSideHighlightFn, element).catch(err => console.error(err));
   } catch (e) {
     // WebDriver

lib/pause.js

@@ -78,7 +78,6 @@ async function parseInput(cmd) {
   rl.pause();
   next = false;
   recorder.session.start('pause');
-  store.debugMode = false;
   if (cmd === '') next = true;
   if (!cmd || cmd === 'resume' || cmd === 'exit') {
     finish();
@@ -98,7 +97,6 @@ async function parseInput(cmd) {
     return cmd;
   };
 
-  store.debugMode = true;
   let isCustomCommand = false;
   let lastError = null;
   let isAiCommand = false;

lib/plugin/autoLogin.js

@@ -251,20 +251,16 @@ module.exports = function (config) {
       } else {
         userSession.login(I);
       }
-      store.debugMode = true;
       const cookies = await userSession.fetch(I);
       if (config.saveToFile) {
         debug(`Saved user session into file for ${name}`);
         fs.writeFileSync(path.join(global.output_dir, `${name}_session.json`), JSON.stringify(cookies));
       }
       store[`${name}_session`] = cookies;
-      store.debugMode = false;
     };
 
     if (!cookies) return loginAndSave();
 
-    store.debugMode = true;
-
     recorder.session.start('check login');
     if (shouldAwait) {
       await userSession.restore(I, cookies);
@@ -287,7 +283,6 @@ module.exports = function (config) {
       });
     });
     recorder.add(() => {
-      store.debugMode = false;
       recorder.session.restore('check login');
     });
 

lib/plugin/retryTo.js

@@ -83,7 +83,6 @@ module.exports = function (config) {
   return retryTo;
 
   function retryTo(callback, maxTries, pollInterval = undefined) {
-    const mode = store.debugMode;
     let tries = 1;
     if (!pollInterval) pollInterval = config.pollInterval;
 
@@ -113,7 +112,6 @@ module.exports = function (config) {
       };
 
       recorder.add('retryTo', async () => {
-        store.debugMode = true;
         tryBlock();
       });
     }).then(() => {

lib/plugin/tryTo.js

@@ -81,10 +81,8 @@ module.exports = function (config) {
 };
 
 function tryTo(callback) {
-  const mode = store.debugMode;
   let result = false;
   return recorder.add('tryTo', () => {
-    store.debugMode = true;
     recorder.session.start('tryTo');
     callback();
     recorder.add(() => {
@@ -100,7 +98,6 @@ function tryTo(callback) {
       return result;
     });
     return recorder.add('result', () => {
-      store.debugMode = mode;
       return result;
     }, true, false);
   }, false, false);