如何调用Page.navigate并触发关联Page.loadEventFired？

Question

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

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

但是，我无法调用 Page.navigate 两次，因为 Page.loadEventFired 会接听最新的电话。

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

像这样以串行方式进行 url 导航的最佳方法是什么？

我查看了 https://github.com/LucianoGanga/simple-headless-chrome 以了解他们是如何做到的 (await mainTab.goTo)，但似乎还没有搞清楚。

Answer 1

这里的 link 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']);

Answer 2

从 google 团队 puppeteer

检查新库

如何调用Page.navigate并触发关联Page.loadEventFired？

How to call Page.navigate and trigger associated Page.loadEventFired?

javascript

node.js

google-chrome-devtools

google-chrome-headless