[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/)