一、前提

windows環境的puppeteer環境配置要簡單點，mac環境坑竟然有點多，這邊稍微提下

二、開發環境

nodejs

puppeteer

mac

三、簡單介紹下puppeteer

Puppeteer 核心功能
（1）利用網頁生成PDF、圖片
（2）爬取SPA應用，並生成預渲染內容（即“SSR” 服務端渲染）
（3）可以從網站抓取內容
（4）自動化表單提交、UI測試、鍵盤輸入等
（5）幫你建立一個最新的自動化測試環境（chrome），可以直接在此執行測試用例
（6）捕獲站點的時間線，以便追蹤你的網站，幫助分析網站效能問題

四、環境準備

1.安裝puppeteer

$:yarn add puppeteer
或者
$:npm i puppeteer
 
"
這邊一般會遇到無法下載Chromium的問題,解決辦法：
$:npm i --save puppeteer --ignore-scripts

2.下載Chromium

1. 下載好後puppeteer後，要下載Chromium，首先我們要找到對應的puppeteer對應的Chromium-version版本
2. 專案->node_modules->puppeteer->package.json->搜尋一下chromiun_revision 檢視當前支援的版本號
3. 開啟：https://npm.taobao.org/mirrors/chromium-browser-snapshots/Mac/ ，找到chromium的歷史版本，下載即可，直接解壓放到puppeteer下面也可以，也可以單獨建立一個資料夾

3.準備指令碼，

1. Mac版本要定位到Chromium.app的包內容
2. 新建baidu.js

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'/Users/wangxiao/Documents/wx_vue/nodejs/chromium/Chromium.app/Contents/MacOS/Chromium',
        headless:false
    });
    const page 
 
= await brower.newPage();
    await page.goto('http://www.baidu.com');
    await page.screenshot({path:'baidu.png'});
    await brower.close();
})().catch(error =>{console.log('error')});

 說明：

• require:ES6語法，引入puppeteer包
• executablePath：執行Chromium或Chrome可執行檔案的路徑
• headless：是否執行在瀏覽器headless模式，true為不開啟瀏覽器執行，預設為true

4.執行(簡單的程式執行成功)

node baidu.js

5.經常報錯的點

這個應該是許可權問題，解決辦法：sudo chmod a+x Chromium.app