Get XPATHs of all elements of an HTML/DOM

Question

Preferably in Javascript. [Maybe] iterate through all the nodes and console.log() its XPath.

I searched enough and could not find an answer.

Why I need it?

I want to see the coordinates(getBoundingClientRect()) of all leaf nodes of a DOM (means, elements of an HTML).

@ The one did a downvote, make a constructive comment - provide a link or any resource, suggestion. — Vishal Gupta, Jul 12 '18 at 09:19
The XPath for *all elements of an HTML DOM* is `//*`. You can use it for iteration through list of all nodes... — Andersson, Jul 12 '18 at 09:33
@Andersson, please write those iteration lines to print each XPath. — Vishal Gupta, Jul 12 '18 at 09:35
It won't *print XPath*, but will *return each webElement* that you can handle appropriately. — Andersson, Jul 12 '18 at 09:39
@Andersson, Please tell me more... how can I use the web elements returned to get coordinates with getBoundingClientRect(). Assume all of them don't have an ID. — Vishal Gupta, Jul 12 '18 at 09:44
In Python Selenium I would do something like `for node in driver.find_elements_by_xpath('//*'): print(driver.execute_script('return arguments[0].getBoundingClientRect();', node))`. I'm not sure how to implement the same for your tool in pure JavaScript — Andersson, Jul 12 '18 at 09:54
Code writing requests are generally considered as being too broad. — Adrian W, Jul 12 '18 at 18:04

wp78de · Accepted Answer · 2018-07-13T03:00:39.023

A combination of How to loop through ALL DOM elements on a page and how do I get the XPath of an element in an X/HTML file

should do:

function getXPath(node) {
    var comp, comps = [];
    var parent = null;
    var xpath = '';
    var getPos = function(node) {
        var position = 1, curNode;
        if (node.nodeType == Node.ATTRIBUTE_NODE) {
            return null;
        }
        for (curNode = node.previousSibling; curNode; curNode = curNode.previousSibling) {
            if (curNode.nodeName == node.nodeName) {
                ++position;
            }
        }
        return position;
     }

    if (node instanceof Document) {
        return '/';
    }

    for (; node && !(node instanceof Document); node = node.nodeType == Node.ATTRIBUTE_NODE ? node.ownerElement : node.parentNode) {
        comp = comps[comps.length] = {};
        switch (node.nodeType) {
            case Node.TEXT_NODE:
                comp.name = 'text()';
                break;
            case Node.ATTRIBUTE_NODE:
                comp.name = '@' + node.nodeName;
                break;
            case Node.PROCESSING_INSTRUCTION_NODE:
                comp.name = 'processing-instruction()';
                break;
            case Node.COMMENT_NODE:
                comp.name = 'comment()';
                break;
            case Node.ELEMENT_NODE:
                comp.name = node.nodeName;
                break;
        }
        comp.position = getPos(node);
    }

    for (var i = comps.length - 1; i >= 0; i--) {
        comp = comps[i];
        xpath += '/' + comp.name;
        if (comp.position != null) {
            xpath += '[' + comp.position + ']';
        }
    }

    return xpath;

}

var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
    console.log(getXPath(all[i]));
}

The updated version works much better than the first installment.

Get XPATHs of all elements of an HTML/DOM

1 Answers1