简介

Question

我正在编写一个DSL，它将通过Google Chrome的远程调试API与网页进行互动。

INPUT域名（链接在这里： https://chromedevtools.github.io/devtools-protocol/1-2/Input/）列出了两个可用于发送事件的函数： Input.dispatchKeyEvent 和 Input.dispatchMouseEvent 。

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

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

感谢任何帮助。

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，它会调用传入参数的函数。

使用示例

let selector = '.mySelector';

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

Runtime.evaluate的结果是一个承诺，当满足时，您可以检查结果对象的类型以确定成功或失败。例如，subtype可以是node或error。

我希望这对你有用。

Answer 2

如果你想点击特定的元素而不是点击屏幕上的点，这个协议可能不是最好的...

请记住，devtools协议的这个区域旨在模拟原始输入，这一点很重要。如果您想尝试使用协议找出元素的位置，或者在页面中运行一些javascript，那么最好使用target.dispatchEvent()和MouseEvent之类的内容。将javascript注入页面中。

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

2 个答案:

简介

评估JavaScript

使用示例