【从入门到放不下系列】记一次用 puppeteer 爬数据的历程（上）

最近因工作需要，学习了 Node 爬虫，简单记录一下我的心路历程。

首先来说说 puppeteer 这个库，顺手查了一下 puppeteer 这个单词，它貌似有【操纵木偶的人；操纵傀儡】这方面的含义，这就很好理解啦。这个库本质上来讲是用来做自动化测试的，它提供了一些 API 来直接控制 Chrome 的操作，利用它的这些特性，我们可以用来做 UI Test 或者当做爬虫来爬取页面数据。

说好了是从入门开始，那好，我们正式开始入门：

首先，puppeteer 是一个 NPM 包，安装很方便。

创建项目目录后执行命令：

$ yarn add puppeteer
或者
$ npm install puppeteer

安装时会自动下载一个最新版本的 Chromium，后续的所有操作都是直接在 Chromium 中进行的。

在项目目录下新建 index.js 文件

初试 puppeteer：先亮一亮 puppeteer 的功能和基本用法

我们先来试试用 puppeteer 截个图

在 index.js 中，添加如下代码


const puppeteer = require("puppeteer");



(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto("http://www.baidu.com");

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

await browser.close();

})();

随后再执行

node index.js

执行成功后，puppeteer 在项目根目录下写入了截图，完美~

大致解读一下这段代码。很明显的一个特征就是 async/await 出现频率很高。这是 ES7 的特性，puppeteer 很好的支持了 async/await ，因此官方推荐 7.6 以上版本的 Node。其实代码很简单，语义化很强，很好理解：


// 引入 puppeteer 库

const puppeteer = require("puppeteer");



// 使用IIFE，直接执行函数

(async () => {

// 创建 browser 实例

const browser = await puppeteer.launch();

// 新建一个页面

const page = await browser.newPage();

// 打开百度 URL

await page.goto("http://www.baidu.com");

// 截图，并设置图片的存放位置

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

// 关闭浏览器

await browser.close();

})();