如何通过Chrome Dev Tools利用backendNodeId/Remote ObjectId获取边界矩形并触发点击？

1. 上述functionDeclaration逻辑的遗漏点 #

你写的functionDeclaration存在几个关键问题：

• 函数不需要将this作为参数传入：当通过Runtime.callFunctionOn指定objectId时，函数内部的this会自动绑定到目标DOM元素，正确的函数声明应该是function() { ... }，而非function(this) { ... }。
• JSON字符串不能直接换行：代码里的函数内容直接换行会导致JSON解析错误，需将函数写成单行，或用转义字符\n处理换行。
• 缺少returnByValue配置：默认情况下Runtime.callFunctionOn返回的是RemoteObject引用，若要直接获取getBoundingClientRect()的具体数值，必须添加"returnByValue": true参数。

修正后的代码示例：

result = client.send("DOM.resolveNode", {"backendNodeId": int(id)})
objectId = result["object"]["objectId"]
result5 = client.send("Runtime.callFunctionOn", {
     "objectId": objectId,
     "functionDeclaration": 'function() { this.click(); return this.getBoundingClientRect(); }',
     "returnByValue": True
})

2. 通过backendNodeId/remoteObjectId操作元素的方法 #

有两种可靠方式实现需求，完全无需依赖元素的id、name等常规属性：

方式一：直接使用Chrome DevTools Protocol的DOM模块API #

• 触发点击：用DOM.click接口，直接传入backendNodeId即可，无需转换为RemoteObject：

  client.send("DOM.click", {"backendNodeId": int(id)})
  

• 获取边界矩形：用DOM.getBoxModel接口获取元素布局信息，返回的content、padding等数组是相对于文档的坐标，若要转换为视口相对坐标，可结合Page.getLayoutMetrics获取滚动偏移后计算：

  box_model = client.send("DOM.getBoxModel", {"backendNodeId": int(id)})
  # content区域坐标：box_model["model"]["content"]
  

方式二：通过RemoteObject操作 #

如果已通过DOM.resolveNode拿到objectId，除了修正后的Runtime.callFunctionOn，还可以用Runtime.evaluate结合objectId执行操作：

result = client.send("Runtime.evaluate", {
    "expression": "element.click(); element.getBoundingClientRect()",
    "contextId": result["object"]["contextId"],
    "bindings": [{"name": "element", "objectId": objectId}],
    "returnByValue": True
})

另外需要注意：滚动操作后，只要DOM节点未被销毁，backendNodeId不会立即失效，只有页面发生重渲染导致节点重建时，才需要重新获取快照。

内容的提问来源于stack exchange，提问作者Vaibhav More