如何使用Puppeteer的page.screenshot()方法捕获Shadow Root元素

我正尝试使用Puppeteer的page.screenshot方法对网页进行截图，但发现输出的截图遗漏了页面中属于Shadow Root元素的部分内容。请问如何使用Puppeteer的截图方法同时捕获Shadow Root元素的内容？我当前使用的代码如下，示例URL为https://www.buybuybaby.com/

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.setExtraHTTPHeaders({
      'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
      accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
    })


await page.goto("https://www.buybuybaby.com/", {    //包含shadow root元素的目标URL
            waitUntil: 'networkidle2',
            timeout: 160000   
})

await page.setViewport({
    width: 1600,
    height: 20000
  })

await page.screenshot({path: 'screenshot.png'});

await browser.close(); 

出现Shadow Root内容遗漏的核心原因通常有两个：一是使用了旧版Puppeteer/旧版无头浏览器，对Shadow DOM渲染支持不完善；二是Shadow Root内的内容为异步渲染，networkidle2触发时内容还未加载完成。

首先将Puppeteer升级到v19及以上版本，修改启动配置使用新版无头模式，再添加额外的等待逻辑确保Shadow Root内的内容完全渲染即可，修改后的可用代码如下：

const browser = await puppeteer.launch({
  headless: 'new', // 启用新版无头模式，和普通浏览器行为完全一致，对Shadow DOM支持更完善
  args: ['--enable-features=ShadowDOM', '--no-sandbox', '--disable-setuid-sandbox']
});

const page = await browser.newPage();

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
})

await page.goto("https://www.buybuybaby.com/", {
  waitUntil: 'networkidle2',
  timeout: 160000   
})

// 等待Shadow Root内部内容渲染完成，可根据实际页面结构调整判断逻辑
await page.waitForFunction(() => {
  // 将下方选择器替换为目标页面实际承载Shadow Root的宿主元素选择器
  const shadowHost = document.querySelector('your-shadow-host-selector');
  return shadowHost?.shadowRoot && shadowHost.shadowRoot.children.length > 0;
}, { timeout: 30000 });

await page.setViewport({
  width: 1600,
  height: 20000
})

await page.screenshot({
  path: 'screenshot.png',
  captureBeyondViewport: true // 允许捕获视口外的内容，避免截断
});

await browser.close();

补充说明 #

• 如果需要截取完整页面，不需要手动设置超大的viewport高度，直接给screenshot方法添加fullPage: true参数即可自动适配页面高度
• 若截图仍有部分内容缺失，可在截图前添加await page.waitForTimeout(2000)的强制等待，兼容极端场景下的异步渲染延迟

内容的提问来源于stack exchange，提问作者Murtuza Sanjeliwala