一、Puppeteer 介紹

Puppeteer 翻譯是操縱木偶的人，利用這個(gè)工具，我們能做一個(gè)操縱頁(yè)面的人。Puppeteer是一個(gè)Nodejs的庫(kù)，支持調(diào)用Chrome的API來(lái)操縱Web，相比較Selenium或是PhantomJs,它最大的特點(diǎn)就是它的操作Dom可以完全在內(nèi)存中進(jìn)行模擬既在V8引擎中處理而不打開(kāi)瀏覽器，而且關(guān)鍵是這個(gè)是Chrome團(tuán)隊(duì)在維護(hù)，會(huì)擁有更好的兼容性和前景。

二、Puppeteer 用處

• 利用網(wǎng)頁(yè)生成PDF、圖片
• 爬取SPA應(yīng)用，并生成預(yù)渲染內(nèi)容（即“SSR” 服務(wù)端渲染）
• 可以從網(wǎng)站抓取內(nèi)容
• 自動(dòng)化表單提交、UI測(cè)試、鍵盤(pán)輸入等
• 幫你創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境（chrome），可以直接在此運(yùn)行測(cè)試用例6.捕獲站點(diǎn)的時(shí)間線，以便追蹤你的網(wǎng)站，幫助分析網(wǎng)站性能問(wèn)題

# 安裝命令
npm i puppeteer --save
# 錯(cuò)誤信息
ERROR: Failed to download Chromium r515411! Set 'PUPPETEER_SKIP_CHROMIUM_DOWNLOAD' env variable to skip download.
# 設(shè)置環(huán)境變量跳過(guò)下載 Chromium
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 # 或者可以這樣干，只下載模塊而不build npm i --save puppeteer --ignore-scripts # 成功安裝模塊 + puppeteer@0.13.0 added 1 package in 1.77s手動(dòng)下載 Chromium，下載完后將壓縮包解壓，會(huì)有個(gè) Chromium.app，將其放在你喜歡的目錄下，例如 /Users/huqiyang/Documents/project/z/chromium/Chromium.app。正常安裝包后 Chromium.app 會(huì)在 .local-chromium中

Tip：下載 Chromium 失敗解決辦法

• 更換國(guó)內(nèi)Chromium源

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer

• 或者用 cnpm 安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i puppeteer

2、jest環(huán)境

安裝 Jest：npm install --save-dev jest

四、puppeteer自動(dòng)化初試

const puppeteer = require('puppeteer');
(async () => {
  const browser = await (puppeteer.launch({
    // 若是手動(dòng)下載的chromium需要指定chromium地址, 默認(rèn)引用地址為 /項(xiàng)目目錄/node_modules/puppeteer/.local-chromium/
    executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
    //設(shè)置超時(shí)時(shí)間
    timeout: 15000,
    //如果是訪問(wèn)https頁(yè)面 此屬性會(huì)忽略https錯(cuò)誤
    ignoreHTTPSErrors: true,
    // 打開(kāi)開(kāi)發(fā)者工具, 當(dāng)此值為true時(shí), headless總為false
    devtools: false,
    // 關(guān)閉headless模式, 不會(huì)打開(kāi)瀏覽器
    headless: false
  }));
  const page = await browser.newPage();
  await page.goto('https://www.jianshu.com/u/40909ea33e50');
  await page.screenshot({
    path: 'jianshu.png',
    type: 'png',
    // quality: 100, 只對(duì)jpg有效
    fullPage: true,
    // 指定區(qū)域截圖，clip和fullPage兩者只能設(shè)置一個(gè)
    // clip: {
    //   x: 0,
    //   y: 0,
    //   width: 1000,
    //   height: 40
    // }
  });
  browser.close();
})();