feat: highlight the interacting elements

[kobenguyent]

Motivation/Description of the PR

• Resolves How to highlight fields #3476
  
  

Applicable helpers:

• Puppeteer
• Playwright
• Webdriver

Type of change

• 🚀 New functionality

Checklist:

• Documentation has been added (Run npm run docs)
• Lint checking (Run npm run lint)
• Local tests are passed (Run npm test)

[DavertMik]

Wow!

[DavertMik]

So simple yet awesome!
I would somehow turn that on if I run tests with --debug flag,
Can we also have it for WebDriver?

[DavertMik]

So simple yet awesome!
I would somehow turn that on if I run tests with --debug flag,
Can we also have it for WebDriver?

[DavertMik]

@kobenguyent please fix Puppeteer tests

[DavertMik]

@kobenguyent I think that would be essential thing for writing tests with AI
as you will see all options while writing it

[kobenguyent]

So simple yet awesome! I would somehow turn that on if I run tests with --debug flag, Can we also have it for WebDriver?

Webdriver support is added. I'm not sure how to acknowledge is the --debug is passed. May you advise on that?

@kobenguyent please fix Puppeteer tests

Oh, fixed it.

[EgorBodnar]

🔥🔥

[DavertMik]

Seems good to me. Let's have it!

[incoming-th]

@kobenguyent Thanks a lot, pretty sure next someone will ask to customize the border width and the color :D

[incoming-th]

@kobenguyent Quick note, this seems to not be working with --debug but with --verbose for helper puppeteer.

Also, it is not showing when using npx codeceptjs run-workers even if highlightElement is true, or I am doing something wrong.

[kobenguyent]

@kobenguyent Quick note, this seems to not be working with --debug but with --verbose for helper puppeteer.

Also, it is not showing when using npx codeceptjs run-workers even if highlightElement is true, or I am doing something wrong.

Hi, please check this #3896