Skip to content

Commit 128274f

Browse files
kobenguyentkobenguyent
authored
fix: highlight issue (#3896)
* fix: highlight issue * introduce debug mode global var
1 parent feb0e64 commit 128274f

File tree

14 files changed

+31
-35
lines changed

14 files changed

+31
-35
lines changed

‎docs/helpers/Playwright.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ Type: [object][5]
7474
- `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].
7575
- `ignoreHTTPSErrors` **[boolean][32]?** Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
7676
- `bypassCSP` **[boolean][32]?** bypass Content Security Policy or CSP
77-
- `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false
77+
- `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
7878

7979

8080

‎docs/helpers/Puppeteer.md

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

6161

6262

‎docs/helpers/WebDriver.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Type: [object][16]
4545
- `desiredCapabilities` **[object][16]?** Selenium's [desired capabilities][6].
4646
- `manualStart` **[boolean][32]?** do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
4747
- `timeouts` **[object][16]?** [WebDriver timeouts][37] defined as hash.
48-
- `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false
48+
- `highlightElement` **[boolean][32]?** highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
4949

5050

5151

‎lib/codecept.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ class Codecept {
8989
global.When = stepDefinitions.When;
9090
global.Then = stepDefinitions.Then;
9191
global.DefineParameterType = stepDefinitions.defineParameterType;
92+
93+
// debug mode
94+
global.debugMode = false;
9295
}
9396
}
9497

‎lib/command/run-workers.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ module.exports = async function (workerCount, selectedRuns, options) {
4040

4141
try {
4242
if (options.verbose) {
43+
global.debugMode = true;
4344
const { getMachineInfo } = require('./info');
4445
await getMachineInfo();
4546
}

‎lib/command/run.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = async function (test, options) {
3030
codecept.loadTests(test);
3131

3232
if (options.verbose) {
33+
global.debugMode = true;
3334
const { getMachineInfo } = require('./info');
3435
await getMachineInfo();
3536
}

‎lib/helper/Playwright.js

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ const {
4747
setRestartStrategy, restartsSession, restartsContext, restartsBrowser,
4848
} = require('./extras/PlaywrightRestartOpts');
4949
const { createValueEngine, createDisabledEngine } = require('./extras/PlaywrightPropEngine');
50-
const { highlightElement } = require('./scripts/highlightElement');
5150

5251
const pathSeparator = path.sep;
5352

@@ -94,7 +93,7 @@ const pathSeparator = path.sep;
9493
* @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).
9594
* @prop {boolean} [ignoreHTTPSErrors] - Allows access to untrustworthy pages, e.g. to a page with an expired certificate. Default value is `false`
9695
* @prop {boolean} [bypassCSP] - bypass Content Security Policy or CSP
97-
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false
96+
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
9897
*/
9998
const config = {};
10099

@@ -1579,7 +1578,7 @@ class Playwright extends Helper {
15791578

15801579
await el.clear();
15811580

1582-
highlightActiveElement.call(this, el, await this._getContext());
1581+
await highlightActiveElement.call(this, el);
15831582

15841583
await el.type(value.toString(), { delay: this.options.pressKeyDelay });
15851584

@@ -1609,7 +1608,7 @@ class Playwright extends Helper {
16091608

16101609
const el = els[0];
16111610

1612-
highlightActiveElement.call(this, el, this.page);
1611+
await highlightActiveElement.call(this, el);
16131612

16141613
await el.clear();
16151614

@@ -1624,7 +1623,7 @@ class Playwright extends Helper {
16241623
async appendField(field, value) {
16251624
const els = await findFields.call(this, field);
16261625
assertElementExists(els, field, 'Field');
1627-
highlightActiveElement.call(this, els[0], await this._getContext());
1626+
await highlightActiveElement.call(this, els[0]);
16281627
await els[0].press('End');
16291628
await els[0].type(value.toString(), { delay: this.options.pressKeyDelay });
16301629
return this._waitForAction();
@@ -1670,7 +1669,7 @@ class Playwright extends Helper {
16701669
assertElementExists(els, select, 'Selectable field');
16711670
const el = els[0];
16721671

1673-
highlightActiveElement.call(this, el, await this._getContext());
1672+
await highlightActiveElement.call(this, el);
16741673

16751674
if (!Array.isArray(option)) option = [option];
16761675

@@ -3290,7 +3289,7 @@ async function proceedClick(locator, context = null, options = {}) {
32903289
assertElementExists(els, locator, 'Clickable element');
32913290
}
32923291

3293-
highlightActiveElement.call(this, els[0], await this._getContext());
3292+
await highlightActiveElement.call(this, els[0]);
32943293

32953294
/*
32963295
using the force true options itself but instead dispatching a click
@@ -3716,10 +3715,14 @@ async function saveTraceForContext(context, name) {
37163715
return fileName;
37173716
}
37183717

3719-
function highlightActiveElement(element, context) {
3720-
if (!this.options.highlightElement && !store.debugMode) return;
3721-
3722-
highlightElement(element, context);
3718+
async function highlightActiveElement(element) {
3719+
if (this.options.highlightElement && global.debugMode) {
3720+
await element.evaluate(el => {
3721+
const prevStyle = el.style.boxShadow;
3722+
el.style.boxShadow = '0px 0px 4px 3px rgba(255, 0, 0, 0.7)';
3723+
setTimeout(() => el.style.boxShadow = prevStyle, 2000);
3724+
});
3725+
}
37233726
}
37243727

37253728
const createAdvancedTestResults = (url, dataToCheck, requests) => {

‎lib/helper/Puppeteer.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const consoleLogStore = new Console();
6969
* @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["Puppeteer"]._startBrowser()`.
7070
* @prop {string} [browser=chrome] - can be changed to `firefox` when using [puppeteer-firefox](https://codecept.io/helpers/Puppeteer-firefox).
7171
* @prop {object} [chrome] - pass additional [Puppeteer run options](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).
72-
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false
72+
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
7373
*/
7474
const config = {};
7575

@@ -2727,7 +2727,7 @@ function getNormalizedKey(key) {
27272727
}
27282728

27292729
function highlightActiveElement(element, context) {
2730-
if (!this.options.highlightElement && !store.debugMode) return;
2731-
2732-
highlightElement(element, context);
2730+
if (this.options.highlightElement && global.debugMode) {
2731+
highlightElement(element, context);
2732+
}
27332733
}

‎lib/helper/WebDriver.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const webRoot = 'body';
6262
* @prop {object} [desiredCapabilities] Selenium's [desired capabilities](https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities).
6363
* @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
6464
* @prop {object} [timeouts] [WebDriver timeouts](http://webdriver.io/docs/timeouts.html) defined as hash.
65-
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false
65+
* @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
6666
*/
6767
const config = {};
6868

@@ -2918,9 +2918,9 @@ function isModifierKey(key) {
29182918
}
29192919

29202920
function highlightActiveElement(element) {
2921-
if (!this.options.highlightElement && !store.debugMode) return;
2922-
2923-
highlightElement(element, this.browser);
2921+
if (this.options.highlightElement && global.debugMode) {
2922+
highlightElement(element, this.browser);
2923+
}
29242924
}
29252925

29262926
function prepareLocateFn(context) {

‎lib/helper/scripts/highlightElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports.highlightElement = (element, context) => {
77
};
88

99
try {
10-
// Playwright, Puppeteer
10+
// Puppeteer
1111
context.evaluate(clientSideHighlightFn, element).catch(err => console.error(err));
1212
} catch (e) {
1313
// WebDriver

0 commit comments

Comments
 (0)