本文介绍了详解Node使用Puppeteer完成一次复杂的爬虫，分享给大家，具体如下：
架构图
Puppeteer架构图
Puppeteer 通过 devTools 与 browser 通信
Browser 一个可以拥有多个页面的浏览器(chroium)实例
Page 至少含有一个 Frame 的页面
Frame 至少还有一个用于执行 javascript 的执行环境，也可以拓展多个执行环境
前言
最近想要入手一台台式机，笔记本的i5在打开网页和vsc的时候有明显卡顿的情况，因此打算配1台 i7 + GTX1070TI or GTX1080TI的电脑，直接在淘宝上搜需要翻页太多，并且图片太多，脑容量接受不了，因此想爬一些数据，利用图形化分析一下最近价格的走势。因此写了一个用Puppeteer写了一个爬虫爬去相关数据。
什么是Puppeteer？
Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.
简而言之，这货是一个提供高级API的node库，能够通过devtool控制headless模式的chrome或者chromium，它可以在headless模式下模拟任何的人为操作。
和cheerio的区别
cherrico本质上只是一个使用类似jquery的语法操作HTML文档的库，使用cherrico爬取数据，只是请求到静态的HTML文档，如果网页内部的数据是通过ajax动态获取的，那么便爬去不到的相应的数据。而Puppeteer能够模拟一个浏览器的运行环境，能够请求网站信息，并运行网站内部的逻辑。然后再通过WS协议动态的获取页面内部的数据，并能够进行任何模拟的操作(点击、滑动、hover等),并且支持跳转页面，多页面管理。甚至能注入node上的脚本到浏览器内部环境运行，总之，你能对一个网页做的操作它都能做，你不能做的它也能做。
开始
本文不是一个手把手教程，因此需要你有基本的Puppeteer API常识，如果不懂，请先看看官方介绍
Puppeteer官方站点
PuppeteerAPI
首先我们观察要爬去的网站信息 GTX1080
这是我们要爬取的淘宝网页，只有中间的商品项目是我们需要爬取的内容，仔细分析它的结构，相信一个前端都有这样的能力。
我使用的Typescript，能够获得完整的Puppetter及相关库的API提示，如果你不会TS，只需要将相关的代码换成ES的语法就好了
// 引入一些需要用到的库以及一些声明
import * as puppeteer from 'puppeteer' // 引入Puppeteer
import mongo from '../lib/mongoDb' // 需要用到的 mongodb库，用来存取爬取的数据
import chalk from 'chalk' // 一个美化 console 输出的库
