【puppeteer】前端自動化初探（一）

1、前提

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

2、開發環境

nodejs

puppeteer

mac

3、簡單介紹下puppeteer

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

4、環境準備

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