ChromeDevTools / devtools-protocol

Chrome DevTools Protocol
https://chromedevtools.github.io/devtools-protocol/
BSD 3-Clause "New" or "Revised" License
1.15k stars 226 forks source link

How to use DOM.requestChildNodes to get node children #131

Closed mrieck closed 5 years ago

mrieck commented 5 years ago

I'm getting a node using DOM.querySelect, but then when I call DOM.requestChildNodes using that node id, the response is empty. I'm using puppeteer to call the protocols if that makes a difference:

    const doc = await page._client.send('DOM.getDocument');
    const node = await page._client.send('DOM.querySelector', {
        nodeId: doc.root.nodeId,
        selector: '#' + elemId
    });
    console.log("node id " + node.nodeId);

    const nodeChildren = await page._client.send('DOM.requestChildNodes', {
       nodeId: node.nodeId
    });   

    console.log("children");
    //this is empty and shouldn't be
    console.log(nodeChildren);

Am I not doing this correctly? Thanks.

JoelEinbinder commented 5 years ago

RequestChildNodes doesn’t return nodes directly, but instead fires events for the relevant nodes.

mrieck commented 5 years ago

Is there a better way to get the child nodes? Maybe use evaluate and some javascript to return children?

If I do that though I don't know how I'll get the devtools nodes and not just normal elements. I guess I'm unclear on how to communicate with the browser so I can get the children I want as nodes. (the structure of the DOM below can vary at runtime)

mrieck commented 5 years ago

I ended up using page.evaluate to run some js that adds unique classnames to every element and subelement I want analyzed and then pass that back as JSON string since page.evaluate only returns a string. Then I just call DOM.querySelector on each of those unique selectors and loop through them that way. I'm closing the issue since that solves my problem.