如何调用Page.navigate并触发关联的Page.loadEventFired？(How to call Page.navigate and trigger associated Page.lo

如何调用Page.navigate并触发关联的Page.loadEventFired？(How to call Page.navigate and trigger associated Page.loadEventFired?)

我正在使用Chrome stable 60 （ https://chromedevtools.github.io/devtools-protocol/1-2/Page/ ）作为无头版。 我需要能够做到这一点：

导航到第1页

以screenshot1为例

导航到第2页（第1页完成后）

以screenshot2为例

但是，我看Page.navigate两次调用Page.navigate ，因为Page.loadEventFired会选择最新的一个。

我不想使用Canary，因为它太不稳定（截图甚至不能正常工作）。 所以我认为Target不是一种选择（如果可能的话）。

以这种串行方式进行网址导航的最佳方式是什么？

我看着https://github.com/LucianoGanga/simple-headless-chrome看看他们是怎么做的（ await mainTab.goTo ），但似乎还没有弄清楚。

I am using Chrome stable 60 (https://chromedevtools.github.io/devtools-protocol/1-2/Page/) for headless. I need to be able to do this:

Navigate to page 1

Take screenshot1

Navigate to page 2 (after page 1 is done)

Take screenshot2

However, I can't see to call Page.navigate twice because Page.loadEventFired will pick up on the latest one.

I don't want to use Canary because it's so unstable (screenshot doesn't even work right). So I think Target isn't an option (if it could be).

What is the best way to do url navigation in serial fashion like that?

I looked at https://github.com/LucianoGanga/simple-headless-chrome to see how they do it (await mainTab.goTo) but can't seem to figure out yet.

最满意答案

这里的链接https://github.com/cyrus-and/chrome-remote-interface/issues/92给了我一些想法：

const fs = require('fs'); const CDP = require('chrome-remote-interface'); function loadForScrot(url) { return new Promise(async (fulfill, reject) => { const tab = await CDP.New(); const client = await CDP({tab}); const {Page} = client; Page.loadEventFired(() => { fulfill({client, tab}); }); await Page.enable(); await Page.navigate({url}); }); } async function process(urls) { try { const handlers = await Promise.all(urls.map(loadForScrot)); for (const {client, tab} of handlers) { const {Page} = client; await CDP.Activate({id: tab.id}); const filename = `/tmp/scrot_${tab.id}.png`; const result = await Page.captureScreenshot(); const image = Buffer.from(result.data, 'base64'); fs.writeFileSync(filename, image); console.log(filename); await client.close(); } } catch (err) { console.error(err); } } process(['http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com']);

The link here https://github.com/cyrus-and/chrome-remote-interface/issues/92 gave me some idea:

const fs = require('fs'); const CDP = require('chrome-remote-interface'); function loadForScrot(url) { return new Promise(async (fulfill, reject) => { const tab = await CDP.New(); const client = await CDP({tab}); const {Page} = client; Page.loadEventFired(() => { fulfill({client, tab}); }); await Page.enable(); await Page.navigate({url}); }); } async function process(urls) { try { const handlers = await Promise.all(urls.map(loadForScrot)); for (const {client, tab} of handlers) { const {Page} = client; await CDP.Activate({id: tab.id}); const filename = `/tmp/scrot_${tab.id}.png`; const result = await Page.captureScreenshot(); const image = Buffer.from(result.data, 'base64'); fs.writeFileSync(filename, image); console.log(filename); await client.close(); } } catch (err) { console.error(err); } } process(['http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com', 'http://example.com']);