Visual representation of an element I am clicking in VS Code

Question

I think remember reading this somewhere but cannot remember if it is true or not. Is there a VS Code extension that will let you visually see on the web page (or in VS Code) where exactly the mouse.click event is happening and what element is therefore receiving the click?

I'm using Selenium WebDriver and JavaScript

Answer 1

According to the Selenium documentation it always attempts to click within the center of the given element, so seeing it visually seems a bit redundent:

The element click command is executed on the center of the element. If the center of the element is obscured for some reason, Selenium will return an element click intercepted error.

Source

If however you want to see what it might be clicking at a specific point in time, you could take a couple of screenshots as needed with something like:

const fsp = require('fs').promises

function takeScreenshot(driver, file){
  return driver.takeScreenshot()
    .then(image => fsp.writeFile(file, image, 'base64'))
}

Source