Puppeteer 截图及相关问题

Puppeteer 是 Headless Chrome 的 Node.js 封装。通过它可方便地对页面进行截图，或者保存成 PDF。

镜像的设置

因为其使用了 Chromium，其源在 Google 域上，最好设置一下 npm 从国内镜像安装，可解决无法安装的问题。

推荐在项目中放置 .npmrc 或 .yarnrc 文件来进行镜像的设置，这样设置只针对项目生效，不影响其他项目，同时其他人不用重复在本地设置。

这是一个整理好的 .npmrc 文件，如果使用的是 yarn，对应的 .yarnrc 文件。也可通过如下命令从 GitHub gist 下载到项目中，

# .npmrc
$ npx pkgrc

# .yarnc

$ npx pkgrc yarn

截取页面

使用 page.screenshot() API 进行截图的示例：

const puppeteer = require("puppeteer");

puppeteer.launch().then(async browser => {

const page = await browser.newPage();

await page.goto("https://example.com");

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

await browser.close();

});

实际应用中，你需要加上等待时间，以保证页面已经完全加载，否则截取出来的画面是页面半成品的样子。

通过 page.waitFor() 可让页面等待指定时间，

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {

const page = await browser.newPage();

await page.goto('https://example.com');
// 等待一秒钟

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

await browser.close();

});

但这里无论你指定的时长是多少，都是比较主观的值。页面实际加载情况受很多因素影响，机器性能，网络好坏等。即页面加载完成是个无法预期的时长，所以这种方式不靠谱。我们应该使用另一个更加有保障的方式，在调用 page.goto() 时，可指定 waitUntil 参数。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {

const page = await browser.newPage();

await page.goto('https://example.com’,{

+      waitUtil: 'networkidle2'

});

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

await browser.close();

});

networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.

-- 来自 puppeteer 文档中关于 waitUtil 参数的描述

networkidle2 会一直等待，直到页面加载后同时没有存在 2 个以上的资源请求，这个种状态持续至少 500 ms。

此时再进行截图，是比较保险的了。

截图时还有个实用的参数 fullPage，一般情况下也会搭配着使用，对整个页面进行截取。如果页面过长，超出了当前视窗（viewport），它会自动截取超出的部分，即截取结果是长图。这应该是大部分情况下所期望的。

await page.screenshot({ path: "screenshot.png", fullPage: true });

注意，其与 clip 参数互斥，即，如果手动指定了 clip 参数对页面进行范围的限定，则不能再指定 fullPage 参数。

//