node.js - Chrome开发者工具协议(protocol): control new tabs

Question

需要完成:我需要模拟一系列网站之间的用户交互(旅程)。

问题:您对如何以编程方式控制因模拟点击而打开的选项卡有什么建议吗？

我的经验:我正在使用 chrome-remote-interface npm 包。我可以使用自定义 ChromeController 类来模拟点击，该类会初始化 chrome-remote-interface 和这些方法:

async simulateClick(selector) {
    return await this.evaluate(function (selector) {
        document.querySelector(selector).click()
    }, selector);
}
/**
 * Shamelessly stolen from simple-headless-browser
 */
async evaluate (fn, ...args) {

    const exp = args && args.length > 0 ? `(${String(fn)}).apply(null, ${JSON.stringify(args)})` : `(${String(fn)}).apply(null)`
    const result = await this.client.Runtime.evaluate({
        expression: exp,
        returnByValue: true
    })        

    return result
}

现在我想与最近打开的选项卡进行交互。我可以使用实验目标域获取新选项卡的 targetId(在 Node cli 中进行原型(prototype)设计):

var targets;
chromeController.client.Target.getTargets().then(t => targets = t);

结果是:

{ targetInfos: 
 [ { targetId: '97556479-cdb6-415c-97a1-6efa4e00b281',
     type: 'page',
     title: 'xxx/preview/239402/',
     url: 'xxx/preview/239402/' },
   { targetId: 'bbfe11d5-8e4a-4879-9081-10bb7234209c',
     type: 'page',
     title: 'Document',
     url: 'xxx/preview/239402/teaser/0/' } ] }

我可以通过以下方式在选项卡之间切换:

chromeController.client.Target.activateTarget({targetId:'xxx'})

但是我无法与之进行任何交互，我找不到连接，也找不到如何将其加载到页面和运行时对象中。

我在文档中进行了搜索，还尝试了谷歌搜索:'site:chromedevtools.github.io targetId'，这只会导致我

> chromeController.client.Browser.getWindowForTarget({targetId: '97556479-cdb6-415c-97a1-6efa4e00b281'}).catch(e => console.log(e.message));
Promise { <pending> }
> 'Browser.getWindowForTarget' wasn't found

我还尝试过 Target.setDiscoverTargets({discover: true}) 并关闭原始选项卡。

感谢您的帮助!

Answer 1

最近遇到了同样的问题，简而言之，我必须为我想要控制的每个新目标创建一个新的开发工具协议(protocol)客户端。

我的经验是使用与 websocket 直接通信的开发工具协议(protocol)，但 api 是相同的，所以它应该是相似的。所以这里是我必须做的事情的总结。

最初查看文档时我会假设 Target.attachToTarget应该让我们能够控制新选项卡，但我发现它不起作用。

我的解决方法是创建一个监听器来监听 Target.targetCreated提供 targetInfos 的事件，就像您在 Target.getTargets 中找到的那样但对于创建的每个新目标，例如新选项卡、页面或 iframe。注意:您需要启用Target.setDiscoverTargets为了通过协议(protocol)接收这些事件。

 [ { targetId: '97556479-cdb6-415c-97a1-6efa4e00b281',
     type: 'page',
     title: 'xxx/preview/239402/',
     url: 'xxx/preview/239402/' },
   { targetId: 'bbfe11d5-8e4a-4879-9081-10bb7234209c',
     type: 'page',
     title: 'Document',
     url: 'xxx/preview/239402/teaser/0/' } ] }

通过该监听器，我查找页面类型的目标，如果您知道页面是什么，则可以过滤特定的 url。有了 targetId ，我在 devtools home page 底部附近的 HTTPEndpoints 部分之后请求了可用的 websocket 目标。 .

GET /json or /json/list
A list of all available websocket targets.

[ {
  "description": "",
  "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734",
  "id": "DAB7FB6187B554E10B0BD18821265734",
  "title": "Yahoo",
  "type": "page",
  "url": "https://www.yahoo.com/",
  "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734"
} ]

然后，我可以使用 webSocketDebuggerUrl 启动新的开发工具协议(protocol)客户端，并完全控制该选项卡。

我知道这是一种相当迂回的方式，但是，这是我能够实现的唯一方式。

尽管现在，如果可以的话，使用 puppeteer 之类的东西与 Chrome 中的多个选项卡进行交互可能会更容易。以下是 puppeteer 模块的源代码，该模块遵循新选项卡，可以作为尝试复制它的良好引用 pageVideoStreamCollector.ts

这是一个很晚的答案，但如果其他人遇到与 chrome 开发工具帮助相同的问题，那么将其放在这里是很难得到的。希望它能帮助别人。