0

我正在使用Chrome stable 60https://chromedevtools.github.io/devtools-protocol/1-2/Page/)无头。我需要能够做到这一点:如何调用Page.navigate并触发关联的Page.loadEventFired?

  1. 导航第1页

  2. 采取screenshot1

  3. 导航到第2页(第1页完成后)

  4. 采取screenshot2

但是,我看不到Page.navigate两次,因为Page.loadEventFired将采取最新的一个。

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

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

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

回答

0

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