Closed mialeska closed 7 months ago
Decided to use the most compatible script (based on this answer https://stackoverflow.com/a/28997302):
function previousElementSibling (element) {
if (element.previousElementSibling !== 'undefined') {
return element.previousElementSibling;
} else {
// Loop through ignoring anything not an element
while (element = element.previousSibling) {
if (element.nodeType === 1) {
return element;
}
}
}
}
function getPath (element) {
// False on non-elements
if (!(element instanceof HTMLElement)) { return false; }
var path = [];
while (element.nodeType === Node.ELEMENT_NODE) {
var selector = element.nodeName;
if (element.id) { selector += ('#' + element.id); }
else {
// Walk backwards until there is no previous sibling
var sibling = element;
// Will hold nodeName to join for adjacent selection
var siblingSelectors = [];
while (sibling !== null && sibling.nodeType === Node.ELEMENT_NODE) {
siblingSelectors.unshift(sibling.nodeName);
sibling = previousElementSibling(sibling);
}
// :first-child does not apply to HTML
if (siblingSelectors[0] !== 'HTML') {
siblingSelectors[0] = siblingSelectors[0] + ':first-child';
}
selector = siblingSelectors.join(' + ');
}
path.unshift(selector);
element = element.parentNode;
}
return path.join(' > ');
}
Instead of XPath generation, we can try to generate css selector:
https://www.tutorialspoint.com/how-to-create-a-function-generateselector-to-generate-css-selector-path-of-a-dom-element
or
https://www.geeksforgeeks.org/how-to-create-a-function-generateselector-to-generate-css-selector-path-of-a-dom-element/
or https://dev.to/aniket_chauhan/generate-a-css-selector-path-of-a-dom-element-4aim or https://stackoverflow.com/questions/3620116/get-css-path-from-dom-element