使用Chrome DevTools协议的Input.dispatchKeyEvent或Input.dispatchMouseEvent发送事件

Question

我正在编写一个DSL，它将通过Google Chrome 的远程调试API与页面进行交互。INPUT域 (链接在此处: https://chromedevtools.github.io/devtools-protocol/1-2/Input/) 列出了两个函数，可以用于发送事件: Input.dispatchKeyEvent 和 Input.dispatchMouseEvent。

我无法弄清如何指定目标元素，因为两个函数和DOM.NodeId之间没有链接，也没有接受DOM.NodeId并返回X、Y坐标的中间API。

我知道可以使用Selenium，但我想直接使用WebSockets。感谢任何帮助。

- haroldcampbell

Answer 1

简介

我目前正在开发一个NodeJS交互库，以通过远程调试协议与Chrome Headless一起使用。我的想法是将其集成到同事的测试框架中，最终取代不再受支持的PhantomJS。

JavaScript评估

我目前只是在尝试一些东西，但我有一种评估页面上JavaScript的方法，例如通过选择器引用单击元素。理论上，它应该适用于任何东西，假设我的实现没有缺陷。

let evaluateOnPage: function (fn) {
    let args = [...arguments].slice(1).map(a => {
        return JSON.stringify(a);
    });

    let evaluationStr = `
        (function() {
            let fn = ${String(fn)};
            return fn.apply(null, [${args}]);
        })()`;

        return Runtime.evaluate({expression: evaluationStr});
    }
}

以上代码将接受一个函数和任意数量的参数。它将把参数转换为字符串，以便进行序列化。然后在页面上评估一个IIFE，该IIFE使用传入的参数调用传入的函数。

示例用法

let selector = '.mySelector';

let result = evaluateOnPage(selector => {
    return document.querySelector(selector).click();
}, selector);

Runtime.evaluate 的结果是一个 Promise，当它被执行时，您可以检查结果对象的类型来确定成功或失败。例如，subtype 可能是 node 或 error。

希望这对您有所帮助。

- Gideon Pyzer

---

有没有纯远程调试API的决策，而不需要JavaScript（理论上JavaScript可能被禁用）？ - sergzach

Answer 2

这个协议可能不是最好的选择，如果你想点击特定元素而不是屏幕上的位置...请记住，开发工具协议的这个区域旨在模拟原始输入。如果你想尝试使用协议或通过在页面中运行一些javascript来确定元素的位置，你可以这样做，但最好使用target.dispatchEvent()和MouseEvent之类的东西，并将javascript注入到页面中。

- allada