如何調用Page.navigate並觸發關聯的Page.loadEventFired？

Question

我正在使用Chrome stable 60（https://chromedevtools.github.io/devtools-protocol/1-2/Page/）無頭。我需要能夠做到這一點：

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），但似乎還沒有弄清楚。

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

結帳從谷歌團隊的新庫puppeteer