使用 chrome devtools 协议获取 iframe 中元素的节点 ID答案

【问题标题】：Get nodeIds of elements within iframe using chrome dev tools protocol使用 chrome devtools 协议获取 iframe 中元素的节点 ID
【发布时间】：2021-07-12 14:17:06
【问题描述】：

Chrome Devtools Protocol DOM.querySelectorAll 返回 html 中元素的所有 nodeIs。但它不返回 iframe 内容的 id。有没有办法得到它们？

const doc = await page._client.send('DOM.getDocument');
const result = await page._client.send('DOM.querySelectorAll', {nodeId: doc.root.nodeId, selector: '*'});

<!-- Host Page -->
<!DOCTYPE html>
<html lang="en">
<body>
    <div>Hello World</div>
    <iframe src="demo.html" frameborder="0"></iframe>
</body>
</html>


<!-- IFrame Page -->
<!DOCTYPE html>
<html lang="en">
<body>
    <!-- I need to access this div from dev tools -->
    <div>Demo Page</div> 
</body>
</html>

【问题讨论】：

标签： puppeteer chrome-devtools-protocol

【解决方案1】：

在gist找到答案

async function findElementInIframe(DOM, iframeSelector, elementSelector) {
    const doc = await DOM.getDocument({depth: 0});

    const iframeQueryResult = await DOM.querySelector({nodeId: doc.root.nodeId, selector: iframeSelector});
    const iframeDescription = await DOM.describeNode({nodeId: iframeQueryResult.nodeId});

    const contentDocRemoteObject = await DOM.resolveNode({backendNodeId: iframeDescription.node.contentDocument.backendNodeId});
    const contentDocNode = await DOM.requestNode({objectId: contentDocRemoteObject.object.objectId});

    const elementQueryResult = await DOM.querySelector({nodeId: contentDocNode.nodeId, selector: elementSelector});
    return await DOM.describeNode({nodeId: elementQueryResult.nodeId});
}

【讨论】：