前端爬虫框架-puppeteer的入门使用（1）

Puppeteer

前言

开始学习这门技术的起因是因为之前想要去做一个类似于人人影视的电影资源网站，因此想要通过学习爬虫获取到相关的电影资源以供自己下载使用。

之前了解爬虫大多数都是听到使用python来实现，而因为平时工作比较忙，也没太多时间去学习新的语言，于是自己就去网上搜索看有没有前端使用的爬虫框架。

而网上大多推荐的是node库--puppeteer

什么是Puppeteer？

Puppeteer 是一个node库，他提供了一组用来操纵Chrome的API, 通俗来说就是一个 headless chrome浏览器 (当然你也可以配置成有UI的，默认是没有的)。既然是浏览器，那么我们手工可以在浏览器上做的事情 Puppeteer 都能胜任,比如用户的鼠标，键盘操作等。

Puppeteer能做些什么？

1. 可以生成网页截图以及生成PDF
2. 爬虫（常用的）可以爬取到异步加载内容的网页（基本上都可以爬取到）
3. 模拟用户操作（如：键鼠操作，提交表单，打开/关闭/登录网页）
4. 实现UI自动化测试，以帮助分析网站的性能问题

运行环境及安装

因为在puppeteer，大部分都是异步操作，所以你在看各类文档的时候都能看到async和await这样的ES7的语法。
官方目前的要求是：

在puppeteerv1.18.1之前需要NODE版本至少是v6.4.0。
从v1.18.1到v2.1.0的NODE版本至少不低于v8.9.0。
从v3.0.0开始，NODE的版本至少不低于v10.18.1
而如果要使用async/await，NODE版本至少不低于v7.6.0

你使用最新的chrome driver，这个在你通过npm安装puppeteer的时候就会自动检查你本地的driver版本，然后自动下载最新的chrome driver

通过npm/cnpm/yarn安装puppeteer
npm install puppeteer --save
cnpm install puppeteer --save
yarn add puppeteer （使用yarn安装可能出现安装不上的问题）

简单使用（截图操作）

当你完成好puppeteer的安装后，我们就可以写一个简单的例子。开启我们的学习之路

demo1

// 1. 首先引入puppeteer
const puppeteer = require("puppeteer");

// 2. 启动puppeteer,启动浏览器引擎
puppeteer
  .launch({
    ignoreHTTPSErrors: true,
    headless: false,
    slowMo: 250,
    defaultViewport: {
      width: 1920,
      height: 1080,
    },
    timeout: 0,
  })
  .then(async (browser) => {
    // 3. 新建一个浏览器页面
    let newPage = await browser.newPage();
    // 4. 给这个页面设置跳转的URL
    await newPage.goto("https://www.chapaofan.com/");
    // 5. 给这个页面截图
    await newPage.screenshot({
      type: "jpeg",
      path: "../index.jpg",
      fullPage: true,
    });
    // 6. 关闭浏览器
    await browser.close();
  });

demo结果

代码解析（根据上面源码）

1. puppeteer.launch(options)

该方法用以启动chrome浏览器，它返回一个Promise，使用then方法获取browser实例，就可以对该浏览器进行操作

参数options(这里举一些常用参数):
(1) ignoreHTTPSErrors ：是否在导航期间忽略HTTPS错误，默认为false;
(2) headless ：是否在无头模式下运行浏览器，默认为true。这里的无头模式通俗讲就是有无浏览器界面出现（以UI形式展示操作）
(3) slowMo ：将puppeteer操作减少指定的毫秒数，这样你就可以看清每个操作都做了什么，这个非常有用
(4) defaultViewport