Get outer-HTML of element on click

Question

Im making a project for finding xpath, and i need the fastest and easiest way for the user to actually select in a webpage the element he wants the xpath to be found. Selection ideally needs to be made with just a click, which needs to return the value of outerHTML of that element,so I can take it and process against fullHTML of page to find any indicator.

For now, im stuck double-tapping element,pressing inspect element and copying, all manually, which is not good.I know to automate in selenium, but i haven't found a way to automate this process.

Any suggestion,idea or preferably answer would be greatly appreciated! Thanks

Answer 1

You want to see the path to an element when you click on it? Something like this will work:

window.addEventListener("click", (e) => {
  let element = e.target
  let path = []
  while(element.parentElement){
    let i = [...element.parentElement.children].indexOf(element)
    path.unshift(`${element.tagName}:nth-child(${i + 1})`)
    element = element.parentElement
  }
  alert(path.join("/"))
})