Puppeteer:使用索引数据库的动态页面未加载

Question

我正在尝试截取一个使用indexeddb生成其某些内容的页面的屏幕截图。

我的木偶师代码非常简单：

(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({
width: 1200,
height: 1080
});
const relevantSite = 'http://example.com'; // <<-- replace this with the actual site
await page.goto(relevantSite);
await page.waitForSelector('#myContentSelector');
console.log('Content is now loaded');
await page.screenshot({path: 'dynamic-screenshot.png'});
await browser.close();
})();

上面的这段代码适用于动态生成内容且不使用 indexeddb的页面，但对于使用索引数据库的页面，我似乎无法弄清楚我需要做什么才能让页面正确加载。

我是否必须做一些特别的事情才能让这个indexeddb适用于木偶中加载的无头页面？

Answer 1

IndexedDB 似乎可以很好地与 puppeteer 一起使用。例。

我怀疑您的问题实际上是您没有给页面时间来加载和填充内容。

await page.waitForSelector('#myContentSelector');

#myContentSelector 类似于容器div 的东西，实际内容稍后填充(甚至 25 毫秒后(

尝试在页面加载后等待一秒钟，然后再截取屏幕截图？

Answer 2

尝试像这样关注：

await page.goto(relevantSite, { waitUntil: 'networkidle2' });
const navigationPromise = page.waitForNavigation();
await page.waitForSelector('#myContentSelector');
console.log('Content is now loaded');
await page.screenshot({path: 'dynamic-screenshot.png'});
await navigationPromise;

使用选项等待page.goto和page.waitForNavigation