Chrome DevTools 协议：控制新标签页

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（在节点 cli 中进行原型设计）：

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

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

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

最初查看文档时，我认为

Target.attachToTarget

应该能让我们控制新选项卡，但我发现它不起作用。

我的解决方法是创建一个侦听器来侦听

Target.targetCreated

事件，该事件提供一个 targetInfos，就像您在

Target.getTargets

中找到的那样，但对于创建的每个新目标（如新选项卡、页面或 iframe）。注意：您需要启用

Target.setDiscoverTargets

才能通过协议接收这些事件。

 [ { 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 主页底部附近的 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 启动新的开发工具协议客户端，并完全控制该选项卡。

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

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

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

Answer 2

我们可以通过使用

attachToTarget

和

flatten: true

来控制新目标（选项卡），然后在每个新命令上发送

sessionId

。

示例：

import CDP from 'chrome-remote-interface'

/** @type {CDP.Client | undefined} */
let client = undefined

try {
  client = await CDP()

  const { targetId } = await client.Target.createTarget({ url: 'https://github.com' })

  const { sessionId } = await client.Target.attachToTarget({ targetId, flatten: true })

  await client.Page.enable(sessionId)
  await client.Page.loadEventFired()

  await simulateClick(sessionId, 'a[href="/pricing"]')
} catch (err) {
  console.error(err)
} finally {
  if (client) {
    await client.close()
  }
}

async function simulateClick(sessionId, selector) {
  return await evaluate(
    sessionId,
    selector => {
      document.querySelector(selector).click()
    },
    selector,
  )
}

async function evaluate(sessionId, fn, ...args) {
  const exp =
    args && args.length > 0 ? `(${String(fn)}).apply(null, ${JSON.stringify(args)})` : `(${String(fn)}).apply(null)`

  console.log({ exp })
  const result = await client?.Runtime.evaluate(
    {
      expression: exp,
      returnByValue: true,
    },
    sessionId,
  )

  return result
}

Answer 3

我还在 debian、google-chrome-unstable 版本 61 上收到“未找到 Browser.getWindowForTarget”的信息