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

Question

我正在编写一个 DSL，它将通过 Google Chrome 的远程调试 API.

与页面交互

INPUT 域（此处link： https://chromedevtools.github.io/devtools-protocol/1-2/Input/) 列出了两个可用于发送事件的函数：Input.dispatchKeyEvent 和 Input.dispatchMouseEvent.

我似乎无法弄清楚如何指定目标 element，因为两个函数和 DOM.NodeId 之间没有 link，或者中间 API ] 接受 DOM.NodeId 然后 returns X,Y 坐标。

我知道可以使用 Selenium，但我有兴趣直接使用 WebSockets。

感谢任何帮助。

Answer 1

如果您想单击特定元素而不是单击屏幕上的点，则此协议可能不是最好的...

请务必记住，devtools 协议的这个区域旨在模拟原始输入。如果您想使用协议或通过页面中的运行一些 javascript 来尝试找出元素的位置，您可以这样做，但是使用 [=10= 之类的东西可能会更好] 并将 javascript 注入页面。

Answer 2

简介

我目前正在开发一个 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，它调用传入参数的函数。

用法示例

let selector = '.mySelector';

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

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

希望对您有所帮助。

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

Using Chrome DevTools Protocol Input.dispatchKeyEvent or Input.dispatchMouseEvent to send an event

google-chrome

chromium

google-chrome-devtools

简介

正在评估JavaScript

用法示例