[TOC] # 背景 很早很早之前，前端就有了对 headless 浏览器的需求，最多的应用场景有两个 * UI 自动化测试：摆脱手工浏览点击页面确认功能模式 * 爬虫：解决页面内容异步加载等问题 也就有了很多杰出的实现，前端经常使用的莫过于 [PhantomJS](http://phantomjs.org/) 和 [selenium-webdriver](http://seleniumhq.github.io/selenium/docs/api/javascript/)，但两个库有一个共性——难用！环境安装复杂，API 调用不友好，2017 年 Chrome 团队连续放了两个大招 [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) 和对应的 NodeJS API [Puppeteer](https://github.com/GoogleChrome/puppeteer)，直接让 PhantomJS 和 Selenium IDE for Firefox 的作者宣布没必要继续维护其产品 # 介绍  [Puppeteer](https://github.com/GoogleChrome/puppeteer) 是 Google Chrome 团队官方的一个通过 [DevTools Protocol ](https://chromedevtools.github.io/devtools-protocol/) 控制 无界面（Headless）Chrome 的 high-level Node 库，也可以通过设置使用 非 headless Chrome 。 我们手工可以在浏览器上做的事情 Puppeteer 都能胜任 * 生成网页截图或者 PDF * 爬取大量异步渲染内容的网页，基本就是人肉爬虫 * 模拟键盘输入、表单自动提交、UI 自动化测试 官方提供了一个 [playground](https://try-puppeteer.appspot.com/)，可以快速体验一下。因为这个官方声明，许多业内自动化测试库都已经停止维护，包括 [PhantomJS](http://phantomjs.org/)。[Selenium IDE for Firefox](https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/) 项目也因为缺乏维护者而终止。 > 译者注：关于 PhantomJS 和 Selenium IDE for Firefox 停止维护并没有找到相关的公告，但这两个项目的确已经都超过 2 年没有发布新版本了。但另一个17年 5 月才开启的项目 [Chromeless](https://github.com/graphcool/chromeless) 目前在 Github 上已经超过 1w star，目前还非常活跃。 Chrome 作为浏览器市场的领头羊，Chrome Headless 必将成为 web 应用 **自动化测试** 的行业标杆。所以我整合了这份如何利用 Chrome Headless 做 网页爬虫 的入门指南。 # 中文文档 https://zhaoqize.github.io/puppeteer-api-zh_CN/ https://github.com/valleykid/puppeteer-cn # 基础配置 ```js // 引入Puppeteer const puppeteer = require('puppeteer') const gitChat = async () => { // 创建浏览器 const browser = await puppeteer.launch({ // 这个属性是控制是否有GUI界面的，我们刚开始学习，这里可以设置成false，让我们可以看着浏览器动 headless: false, // 如果上面你是采用不顺利安装方式安装的，就需要添加这个属性，后面的路径是你本地Chrome或者Chromium的路径，Chrome版本59+ executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome', // executablePath: '/Users/xiaobei/Downloads/chrome-mac/Chromium.app/Contents/MacOS/Chromium', // 这个属性里面有很多配置，常见的有下面几个，挂代理，或者在服务器上跑代码的时候需要（后面详细介绍） args: [ // '--proxy-server=127.0.0.1:1087', // 这里可以挂代理 // '--no-sandbox', '--disable-setuid-sandbox' // 这个配置是在服务器环境下才配的 ] }) } gitChat() ``` # 实战淘宝数据 F12 开发者工具打开会保存，或者通过其他无头浏览器，都会是登录检测到！从而报错！ 核心： 1. 自动测试软件特征删除 ``` // 用户目录设置 userDataDir: 'D:/pro/MyChrome/User Data', // goto 之后立即执行： await page.evaluate(() => { delete navigator.__proto__.webdriver delete navigator.webdriver }) ``` 2. 滑块拖动 ## 注意 我的页面是一个个爬的，如果想更快的爬取可以启动多个进程，注意，V8是单线程的，所以在一个进程内部打开多个页面是没有意义的，需要配置不同的参数打开不同的node进程，当然也可以通过node的cluster(集群)实现，本质都是一样的 。 我在爬取的过程中也设置了不同的等待时间，一方面是为了等待网页的加载，一方面避免淘宝识别到我是爬虫弹验证码。 此外一些需要登录的网站，如果你不想识别验证码委托第三方进行处理，你也可以关闭headless，然后在程序中设置等待时间，手动完成一些验证从而达到登录的目的。 # 相关资源 [puppeteer-recorder](https://github.com/checkly/puppeteer-recorder) # 坑 [puppeteer 安装时跳过 chrome 安装的方法](https://lzw.me/a/puppeteer-install-skip-download-chrome.html) # 参考 https://www.aymen-loukil.com/en/blog-en/google-puppeteer-tutorial-with-examples/ [NodeJs 爬虫进阶：Puppeteer 谷歌开源的无头浏览器](https://gitbook.cn/books/5aedb3e32b543f6855b43790/index.html) [译文：Puppeteer 与 Chrome Headless —— 从入门到爬虫](http://csbun.github.io/blog/2017/09/puppeteer/) https://blog.fundebug.com/2017/11/01/guide-to-automating-scraping-the-web-with-js/ [使用Puppeteer爬取亚马逊美国站商品信息](https://afu.ink/2018/04/01/2018-04-01/)