如何使用 puppeteer 截取多个网站的完整截图？

Question

我正在尝试使用带有puppeteer 的 Node.js 截屏。我没有使用page.screenshot()，因为屏幕截图需要包含整个桌面。相反，我使用 ImageMagick 的 import 命令截屏。

我当前的代码大部分时间都有效。但其他时候，它会以奇怪的结果失败，例如：

• 选项卡已切换，但屏幕截图包含旧页面的一半。
• 页面已切换但空白。
• 添加延迟有效，但并不理想，因为有时页面加载速度很慢。

问题似乎是page.bringToFront() 没有等待页面完全加载。

我是 Node 和 puppeteer 的新手。请提出一种方法：

1. 在 Chrome 中加载页面。
2. 加载后切换到页面。
3. 通过执行命令行工具截取桌面截图。

在代码中添加延迟似乎不是最好的解决方案。

任何关于代码改进的建议都会有所帮助。

const puppeteer = require('puppeteer');
const execSync = require('child_process').execSync;
const sleep = require('sleep'); 

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        args: [
            '--ignore-certificate-errors',
            '--no-sandbox',
            '--disable-infobars',
            '--disable-setuid-sandbox',
            '--incognito',
            '--window-size=1600,1200',
            '--start-maximized',
            "--disable-gpu"],
        // slowMo: 250, // slow down by 1550ms
    });

    await browser.newPage();
    await browser.newPage();
    const pages = await browser.pages();
    await Promise.all([
        grabpage(pages[0], 'https://www.cnn.com', 'cnn'),
        grabpage(pages[1], 'https://www.bbc.com', 'bbc'),
        grabpage(pages[2], 'https://www.rediff.com', 'rediff'),
    ]);
    // Someday we will close the browser also.
})();

async function grabpage(page, url, path) {
    await page.goto(url);
    var infront =page.bringToFront();
    infront.then(
        sleep.sleep(5),
        execSync('import -window root ' + path +'.jpg'),
    );
    console.log('took Screenshot: '+path+'.jpg')
}

Rediff page not loaded fully without sleep

Answer 1

您尝试与Promise.all 并行运行所有内容，这让一切变得混乱。因为你只有一个browser的实例，当你并行运行grabpage 3次时，它们都在争夺对浏览器的控制权，并且可以在彼此的awaits之间进行。

我还建议您打开和关闭 grabpage 中的各个页面。您必须将其切换为传递 browser 并执行 const page = await browser.newPage();

所以你最终得到了

(async () => {
    const browser = await puppeteer.launch({
      headless: false,
      args: [
            '--ignore-certificate-errors',
            '--no-sandbox',
            '--disable-infobars',
            '--disable-setuid-sandbox',
            '--incognito',
            '--window-size=1600,1200',
            '--start-maximized',
            "--disable-gpu"],
      //      slowMo: 250, // slow down by 1550ms
    });

    await grabpage(browser, 'https://www.cnn.com', 'cnn'),
    await grabpage(browser, 'https://www.bbc.com', 'bbc'),
    await grabpage(browser, 'https://www.rediff.com', 'rediff'),
})();

async function grabpage(browser, url, path) {
  const page = await browser.newPage();
  await page.goto(url);
  execSync('import -window root ' + path +'.jpg')
  // await page.screenshot({path: `${path}.png`}); //if you just need to take a screenshot, not the whole desktop
  await page.close();
}

不知道为什么你需要使用完整的桌面，但如果你 start-maximized。我猜你关心你在屏幕截图中得到的一点点 OS chrome。