我希望能够将鼠标放在页面上,让它突出显示光标下的元素(与开发人员工具检查器相同),当我单击鼠标时,可以获得该元素的XPath。启用元素检查器并接收要通过代码完成的XPath,以及由人进行的元素选择。
我可以通过使用Chrome Devtools Protocol和带有inspectNode=searchForNode的Overlay.setInspectMethod来启用devtools检查器行为。
在单击鼠标时,我会收到来自Overlay.inspectNodeRequested事件的被单击元素的DOM.BackendNodeId
devtools协议似乎没有任何内置的方法来获取XPath。所以我找到了Chrome开发人员工具复制-> this功能的Xpath javascript实现。
虽然我可以通过CDT协议评估javascript,但经过几个小时的尝试,我不知道如何获得对Node的引用来执行javascript函数,而我所拥有的只有BackendNodeId。
有没有办法在javascript中获得对节点的引用,或者在CDTProtocol中获得节点的XPath?
找到合适的解决方案
首先,我需要通过以下方式获取对Javascript对象的引用
DOM.resolveNode, {backendNodeId: nId}
然后从返回的JSON对象中提取objectId。它看起来像这样
然后,我可以调用任何我喜欢的函数,使用元素作为上下文
Runtime.callFunctionOn, {functionDeclaration: "function(){getXPathForElement(this)}", objectId: "{"injectedScriptId":3,"id":3}"