Puppeteer：一个浏览器实例中的多个屏幕截图答案

【问题标题】：Puppeteer: multiple screenshots in one browser instancePuppeteer：一个浏览器实例中的多个屏幕截图
【发布时间】：2018-01-29 15:38:48
【问题描述】：

所以我想多次截取特定的class，但总是说Session Closed 或Terminated，因此我解决了实现打开多个实例的多个截屏。

至少有人可以指导如何在同一个浏览器实例上创建多个实例吗？

my code:

const puppeteer = require("puppeteer");

const SELECTOR = ".octicon";

(async () => {
  let screenshotNumber = 0;
  async function screenshots() {
    const browser = await puppeteer.launch({
      headless: true
    });

    try {
      let page = await browser.newPage();
      page.setViewport({ width: 1000, height: 600, deviceScaleFactor: 2 });

      await page.goto("https://github.com/");
      await page.waitForNavigation({ waitUntil: "networkidle" });

      const rect = await page.evaluate(selector => {
        const element = document.querySelector(selector);
        const { x, y, width, height } = element.getBoundingClientRect();
        return { left: x, top: y, width, height, id: element.id };
      }, SELECTOR);

      await page.screenshot({
        path: `octicon-${screenshotNumber}.jpg`,
        clip: {
          x: rect.left,
          y: rect.top,
          width: rect.width,
          height: rect.height
        }
      });

      browser.close();
      screenshotNumber++;
    } catch (e) {
      console.log(e);
      browser.close();
    }
  }

  async function run() {
    await screenshots();
    setTimeout(run, 200);
  }

  run();
})();

【问题讨论】：

标签： javascript chromium google-chrome-headless puppeteer

【解决方案1】：

只需连续运行两个屏幕截图命令而不调用browser.close() 就可以正常工作：

  await page.screenshot({
    path: `octicon-${screenshotNumber}.jpg`,
    clip: {
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height
    }
  });

  screenshotNumber++;

  await page.screenshot({
    path: `octicon-${screenshotNumber}.jpg`,
    clip: {
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height
    }
  });

  browser.close();

【讨论】：