puppeteer学习（一）——puppeteer与Chrome Headless

puppeteer简介

puppeteer是一个node库，是Google chrome团队官方的*面（headless）chrome工具。它提供了一组用来操纵Chrome的 API，允许通过 JS代码操纵Chrome浏览器，完成数据爬取、Web程序自动测试等任务。Puppeteer项目在GitHub上开源。

puppeteer核心功能

1. 利用网页生成PDF、图片
2. 爬取SPA应用，并生成预渲染内容（“SSR”服务端渲染）
3. 从网站抓取内容
4. 自动化表单提交、UI测试、键盘输入
5. 帮助创建最新的自动化测试环境（chrome），可以直接运行测试用例
6. 捕获站点的时间线，以便追踪网站，帮助分析网站性能问题

Chrome Headless环境要求

1. Puppeteer要求node版本不低于v6.4.0，但是async/await只在Node v7.6.0或更高的版本支持。
2. 需要最近版本的Chromium浏览器

环境安装

1. 安装node 8.+
2. 若已经安装了node，cmd中输入node -v 查看node的版本。若要更新node到最新版本，只需要下载安装最新版本的node即可（安装的时候要注意，选择路径要与之前安装node的路径相同<查看之前安装的node的路径：where node>，这样就相当于更新了）。

初始化项目

新建一个文件夹作为工作目录

我这里新建文件夹名称为chromeheadless ，进入该文件夹，在此处打开命令行窗口cmd，输入npm init 初始化npm，一步步回车即可。

安装Puppeteer

命令行输入以下命令：

npm i --save puppeteer

页面截图小案例

• 初始化步骤完成后，依次打开以下文件夹：node_modules—puppeteer—examples.
• 进入到examples文件夹下后，里面有很多js文件，这些一般都是一些小例子。以screenshot.js为例，看一个页面截图的例子。
  我们以记事本方式打开该文件，主要js代码如下：

'use strict';

const puppeteer = require('puppeteer'); //引入puppeteer库.

(async() => {

const browser = await puppeteer.launch(); //用指定选项启动一个Chromium浏览器实例。
const page = await browser.newPage(); //创建一个页面.
await page.goto('http://example.com'); //到指定页面的网址.
await page.screenshot({path: 'example.png'}); //截图并保存到当前路径，名称为example.png.

await browser.close(); //关闭已打开的页面，browser不能再使用。

})();

• 还是在当前文件夹（examples）下，此处打开命令行窗口，输入：

node screenshot.js //运行名为screenshot.js的文件.

运行完成后，就会在当前目录下看到名为example.png的图片，该图片即运行该js后截的图片。