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

Question

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

1. 导航到第 1 页

2. 截图1

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

4. 截图2

但是，我看不到要打Page.navigate两次电话，因为Page.loadEventFired会接上最新的电话。

我不想使用Canary，因为它非常不稳定（屏幕截图甚至无法正常工作）。所以我认为Target这不是一个选择（如果可以的话）。

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

我查看了https://github.com/LucianoGanga/simple-headless-chrome以了解他们是如何做到的（await mainTab.goTo）但似乎还无法弄清楚。

Answer 1

这里的链接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 team puppeteer签出新库