puppeteer 初体验之爬虫与 UI 自动化

puppeteer科普

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
从本质上来说，这货就是无需开启 chrome 浏览器来调用 Chrome 的功能！它将 Chromium 和 Blink 渲染引擎提供的所有现代 Web 平台的功能都带入了命令行。

• headless chrome

Headless Chrome is shipping in Chrome 59. It’s a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line

• 可以做什么
  
  生成页面的屏幕截图和 PDF。
  
  抓取 SPA（单页面应用程序）并生成预渲染内容（即“SSR”（服务器端渲染））。
  
  自动化表单提交，UI 测试，键盘输入等。
  
  创建最新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的 Chrome 中运行测试。
  
  捕获网站的时间线跟踪，帮助诊断性能问题。
  
  测试 Chrome 扩展程序

什么是爬虫

爬虫是一段自动获取网页内容的程序同时也是搜索引擎的重要组成部分

• robots.txt 协议

robots.txt 是一种遵照爬虫排除标准创建的纯文本文件，由一条或多条规则组成。每条规则可禁止（或允许）特定抓取工具抓取相应网站中的指定文件路径
eg: http://www.dxy.cn/robots.txt
https://www.google.com/robots.txt

实现爬虫

作为一个程序员开始写代码之前一定要有信心，坚定一个信念：“万事开头难，然后中间难，结尾难”

installation

mkdir practice && cd practice
npm init && npm i -save puppeteer

• 其实对于使用爬虫来说，流程无外乎这四步

抓取数据
数据入库
启动服务
渲染数据
我们在此只是实现抓取数据。

• 项目目录

├── README.md
├── app.js 入口文件
├── assets
│ └── images
├── config.js
├── files 返回结果
│ ├── result.json
│ ├── tickets.png
│ └── verifiCode.png
├── package-lock.json
├── package.json
└── utils
├── buyTicket.js 买票
├── crackCode.js 破解验证码
├── index.js
├── login.js
├── saveData.js 保存数据
├── scheduleTask.js 任务队列
└── sendEmail.js 发送邮件

FAQ

• 一般写爬虫的时候，是去分析 DOM 呢，还是直接去拦截接口去获取数据呢？DOM 数据不都是通过接口请求到的吗？为什么不直接去拦截接口呢?

因为有的页面不是前后端分离开发的呀，后端通过 php jsp 等方式直接把数据渲染到 html 里面了,或者返回数据是加密的

• 思考：puppeteer 能帮助做些什么

usage

npm start false // 有界面
npm start ipnone 5 // 设备

思考

• 是不是可以绕过验证码 通过获取登录的 cookie实现登录
• 分析接口数据 ，判断是否还有余票，再发送买票请求
• 怎样调用本机上安装的Chrome 而不是安装chromium

打开 chrome://version/ 找到 可执行文件路径 例如 executablePath: ‘/Applications/Google Chrome.app/Contents/MacOS/Google Chrome’, 添加该参数到puppeteer.launch启动参数

参考文献

官网
chrome 启动参数列表
键盘列表
设备列表
node优秀库

• 下载地址

国内下载地址
手动下载地址

知识拓展：

• chrome vs chromium
• 什么是 chrome devtools protocol
• 在node 环境下使用 ECMAScript Modules 的 import/export
• 社区优秀 puppeteer 库

并不是重复造轮子啊，自己学习可以更好的理解用法

• 官方说明

usage: 将后缀.js 改成 .mjs 增加启动参数"start": “node --experimental-modules app.mjs”

遇到的问题

• 图片点触验证码破解 (付费 超级鹰)
• 验证码破解-有接口
• 验证码破解-页面
  

结语

这玩意儿挺有用的，我就是写个栗子，抛砖引玉，有志之士可以看看工作生活中哪里适用，用好了可以节省很多时间同时提升效率

项目地址：https://github.com/bestGao/puppeteerTest