Highlight fixes (#3722)

* added highlight to debug mode

* added highlight to debug mode

* fixed tests

* fixed highlgiht

docs/plugins.md

@@ -558,17 +558,15 @@ Returns **([Promise][7]<any> | [undefined][8])**
 
 ## fakerTransform
 
-Use the [faker.js][9] package to generate fake data inside examples on your gherkin tests
-
-![Faker.js][10]
+Use the `@faker-js/faker` package to generate fake data inside examples on your gherkin tests
 
 #### Usage
 
-To start please install `faker.js` package
+To start please install `@faker-js/faker` package
 
-    npm install -D faker
+    npm install -D @faker-js/faker
 
-    yarn add -D faker
+    yarn add -D @faker-js/faker
 
 Add this plugin to config file:
 
@@ -598,7 +596,7 @@ Scenario Outline: ...
 
 ## pauseOnFail
 
-Automatically launches [interactive pause][11] when a test fails.
+Automatically launches [interactive pause][9] when a test fails.
 
 Useful for debugging flaky tests on local environment.
 Add this plugin to config file:
@@ -781,14 +779,14 @@ Possible config options:
 
 ## selenoid
 
-[Selenoid][12] plugin automatically starts browsers and video recording.
+[Selenoid][10] plugin automatically starts browsers and video recording.
 Works with WebDriver helper.
 
 ### Prerequisite
 
 This plugin **requires Docker** to be installed.
 
-> If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][13] tool from Selenoid
+> If you have issues starting Selenoid with this plugin consider using the official [Configuration Manager][11] tool from Selenoid
 
 ### Usage
 
@@ -817,7 +815,7 @@ plugins: {
   }
 ```
 
-When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][14] and start Selenoid automatically.
+When `autoCreate` is enabled it will pull the [latest Selenoid from DockerHub][12] and start Selenoid automatically.
 It will also create `browsers.json` file required by Selenoid.
 
 In automatic mode the latest version of browser will be used for tests. It is recommended to specify exact version of each browser inside `browsers.json` file.
@@ -829,10 +827,10 @@ In automatic mode the latest version of browser will be used for tests. It is re
 While this plugin can create containers for you for better control it is recommended to create and launch containers manually.
 This is especially useful for Continous Integration server as you can configure scaling for Selenoid containers.
 
-> Use [Selenoid Configuration Manager][13] to create and start containers semi-automatically.
+> Use [Selenoid Configuration Manager][11] to create and start containers semi-automatically.
 
 1.  Create `browsers.json` file in the same directory `codecept.conf.js` is located
-    [Refer to Selenoid documentation][15] to know more about browsers.json.
+    [Refer to Selenoid documentation][13] to know more about browsers.json.
 
 _Sample browsers.json_
 
@@ -857,7 +855,7 @@ _Sample browsers.json_
 
 2.  Create Selenoid container
 
-Run the following command to create a container. To know more [refer here][16]
+Run the following command to create a container. To know more [refer here][14]
 
 ```bash
 docker create                                    \
@@ -890,15 +888,15 @@ When `allure` plugin is enabled a video is attached to report automatically.
 | enableVideo      | Enable video recording and use `video` folder of output (default: false)       |
 | enableLog        | Enable log recording and use `logs` folder of output (default: false)          |
 | deletePassed     | Delete video and logs of passed tests (default : true)                         |
-| additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][17] to know more   |
+| additionalParams | example: `additionalParams: '--env TEST=test'` [Refer here][15] to know more   |
 
 ### Parameters
 
 -   `config`  
 
 ## stepByStepReport
 
-![step-by-step-report][18]
+![step-by-step-report][16]
 
 Generates step by step report for a test.
 After each step in a test a screenshot is created. After test executed screenshots are combined into slideshow.
@@ -1079,7 +1077,7 @@ This plugin allows to run webdriverio services like:
 -   browserstack
 -   appium
 
-A complete list of all available services can be found on [webdriverio website][19].
+A complete list of all available services can be found on [webdriverio website][17].
 
 #### Setup
 
@@ -1091,7 +1089,7 @@ See examples below:
 
 #### Selenium Standalone Service
 
-Install `@wdio/selenium-standalone-service` package, as [described here][20].
+Install `@wdio/selenium-standalone-service` package, as [described here][18].
 It is important to make sure it is compatible with current webdriverio version.
 
 Enable `wdio` plugin in plugins list and add `selenium-standalone` service:
@@ -1110,7 +1108,7 @@ Please note, this service can be used with Protractor helper as well!
 
 #### Sauce Service
 
-Install `@wdio/sauce-service` package, as [described here][21].
+Install `@wdio/sauce-service` package, as [described here][19].
 It is important to make sure it is compatible with current webdriverio version.
 
 Enable `wdio` plugin in plugins list and add `sauce` service:
@@ -1156,28 +1154,24 @@ In the same manner additional services from webdriverio can be installed, enable
 
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
 
-[9]: https://www.npmjs.com/package/faker
-
-[10]: https://raw.githubusercontent.com/Marak/faker.js/master/logo.png
-
-[11]: /basics/#pause
+[9]: /basics/#pause
 
-[12]: https://aerokube.com/selenoid/
+[10]: https://aerokube.com/selenoid/
 
-[13]: https://aerokube.com/cm/latest/
+[11]: https://aerokube.com/cm/latest/
 
-[14]: https://hub.docker.com/u/selenoid
+[12]: https://hub.docker.com/u/selenoid
 
-[15]: https://aerokube.com/selenoid/latest/#_prepare_configuration
+[13]: https://aerokube.com/selenoid/latest/#_prepare_configuration
 
-[16]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
+[14]: https://aerokube.com/selenoid/latest/#_option_2_start_selenoid_container
 
-[17]: https://docs.docker.com/engine/reference/commandline/create/
+[15]: https://docs.docker.com/engine/reference/commandline/create/
 
-[18]: https://codecept.io/img/codeceptjs-slideshow.gif
+[16]: https://codecept.io/img/codeceptjs-slideshow.gif
 
-[19]: https://webdriver.io
+[17]: https://webdriver.io
 
-[20]: https://webdriver.io/docs/selenium-standalone-service.html
+[18]: https://webdriver.io/docs/selenium-standalone-service.html
 
-[21]: https://webdriver.io/docs/sauce-service.html
+[19]: https://webdriver.io/docs/sauce-service.html

lib/container.js

@@ -168,12 +168,13 @@ function createHelpers(config) {
 
       // @ts-ignore
       let HelperClass;
-      // check if the helper is the built-in, use the require() syntax. 
+      // check if the helper is the built-in, use the require() syntax.
       if (moduleName.startsWith('./helper/')) {
-         HelperClass = require(moduleName); }
-        else {
-          // check if the new syntax export default HelperName is used and loads the Helper, otherwise loads the module that used old syntax export = HelperName. 
-          HelperClass =  require(moduleName).default || require(moduleName); }
+        HelperClass = require(moduleName);
+      } else {
+        // check if the new syntax export default HelperName is used and loads the Helper, otherwise loads the module that used old syntax export = HelperName.
+        HelperClass = require(moduleName).default || require(moduleName);
+      }
 
       if (HelperClass._checkRequirements) {
         const requirements = HelperClass._checkRequirements();

lib/helper/Playwright.js

@@ -4,6 +4,7 @@ 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');
@@ -44,7 +45,7 @@ const {
   setRestartStrategy, restartsSession, restartsContext, restartsBrowser,
 } = require('./extras/PlaywrightRestartOpts');
 const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
-const { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
+const { highlightElement } = require('./scripts/highlightElement');
 
 const pathSeparator = path.sep;
 
@@ -1533,15 +1534,10 @@ class Playwright extends Helper {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
 
-    if (this.options.highlightElement) {
-      highlightElement(el, this.page);
-    }
+    highlightActiveElement.call(this, el, this.page);
 
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
 
-    if (this.options.highlightElement) {
-      unhighlightElement(el, this.page);
-    }
     return this._waitForAction();
   }
 
@@ -1585,6 +1581,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);
     await els[0].press('End');
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
@@ -1630,6 +1627,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) {
@@ -2732,9 +2730,8 @@ async function proceedClick(locator, context = null, options = {}) {
   }
 
   const element = els[0];
-  if (this.options.highlightElement) {
-    highlightElement(element, this.page);
-  }
+  highlightActiveElement.call(this, els[0], this.page);
+
   /*
     using the force true options itself but instead dispatching a click
   */
@@ -2750,9 +2747,6 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   promises.push(this._waitForAction());
 
-  if (this.options.highlightElement) {
-    unhighlightElement(element, this.page);
-  }
   return Promise.all(promises);
 }
 
@@ -3149,3 +3143,9 @@ async function saveTraceForContext(context, name) {
   await context.tracing.stop({ path: fileName });
   return fileName;
 }
+
+function highlightActiveElement(element, context) {
+  if (!this.options.enableHighlight && !store.debugMode) return;
+
+  highlightElement(element, context);
+}

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,7 +34,7 @@ const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnection
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
 const findReact = require('./extras/React');
-const { highlightElement, unhighlightElement } = require('./scripts/highlightElement');
+const { highlightElement } = require('./scripts/highlightElement');
 
 let puppeteer;
 let perfTiming;
@@ -1290,13 +1291,9 @@ class Puppeteer extends Helper {
       await this._evaluateHandeInContext(el => el.innerHTML = '', el);
     }
 
-    if (this.options.highlightElement) {
-      highlightElement(el, this.page);
-    }
+    highlightActiveElement.call(this, el, this.page);
     await el.type(value.toString(), { delay: this.options.pressKeyDelay });
-    if (this.options.highlightElement) {
-      unhighlightElement(el, this.page);
-    }
+
     return this._waitForAction();
   }
 
@@ -1315,6 +1312,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);
     await els[0].press('End');
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
     return this._waitForAction();
@@ -1361,6 +1359,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) {
@@ -2333,9 +2332,7 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  if (this.options.highlightElement) {
-    highlightElement(els[0], this.page);
-  }
+  highlightActiveElement.call(this, els[0], this.page);
 
   await els[0].click(options);
   const promises = [];
@@ -2344,10 +2341,6 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   promises.push(this._waitForAction());
 
-  if (this.options.highlightElement) {
-    unhighlightElement(els[0], this.page);
-  }
-
   return Promise.all(promises);
 }
 
@@ -2692,3 +2685,9 @@ function getNormalizedKey(key) {
   }
   return normalizedKey;
 }
+
+function highlightActiveElement(element, context) {
+  if (!this.options.enableHighlight && !store.debugMode) return;
+
+  highlightElement(element, context);
+}