How to highlight fields

[incoming-th]

What are you trying to achieve?

Is there a way to highlight the fields of elements (with a border or any CSS of our choice) when codeceptJS is clicking or filling them? This will provide good feedback on what field(s) in the page the script is interacting with.

[incoming-th]

Adding a bit more to this, is there any way to "listen" any changes or click made on the page?

This will help to then retrieve the element (locator?) and apply a css style in it.

Another way should be to copy the Helper (such as Puppeteer) and add this feature on the locator, for example:

  let matcher = await this.context;
  if (context) {
    const els = await this._locate(context);
    assertElementExists(els, context);
    matcher = els[0];
  }
  const els = await findClickable.call(this, matcher, locator);
  if (context) {
    assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`);
  } else {
    assertElementExists(els, locator, 'Clickable element');
  }

  // Add something here
  let element = els[0];
  this.evaluate(el => el.style.border = "2px solid blue", element);

  await els[0].click(options);

  const promises = [];
  if (options.waitForNavigation) {
    promises.push(this.waitForNavigation());
  }
  promises.push(this._waitForAction());
  return Promise.all(promises);
}```

[DavertMik]

yeah, I had idea about it but didn't have time...

[kobenguyent]

May you elaborate your idea then perhaps community could help? @DavertMik