摘要：通過(guò)啟動(dòng)時(shí)的命令行參數(shù)僅能實(shí)現(xiàn)簡(jiǎn)易的啟動(dòng)時(shí)初始化操作。是谷歌官方出品的一個(gè)通過(guò)協(xié)議控制的庫(kù)。使用和例子類似其他框架，通過(guò)操作實(shí)例來(lái)操作瀏覽器作出相應(yīng)的反應(yīng)。簡(jiǎn)單例子的入門和實(shí)踐求贊，另外歡迎訪問(wèn)我的博客

Chrome59(linux、macos)、 Chrome60(windows)之后，Chrome自帶headless(無(wú)界面)模式很方便做自動(dòng)化測(cè)試或者爬蟲。但是如何和headless模式的Chrome交互則是一個(gè)問(wèn)題。通過(guò)啟動(dòng)Chrome時(shí)的命令行參數(shù)僅能實(shí)現(xiàn)簡(jiǎn)易的啟動(dòng)時(shí)初始化操作。Selenium、Webdriver等是一種解決方案，但是往往依賴眾多，不夠扁平。

Puppeteer是谷歌官方出品的一個(gè)通過(guò)DevTools協(xié)議控制headless Chrome的Node庫(kù)?？梢酝ㄟ^(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲訪問(wèn)頁(yè)面來(lái)收集數(shù)據(jù)。

Puppeteer本身依賴6.4以上的Node，但是為了異步超級(jí)好用的async/await，推薦使用7.6版本以上的Node。另外headless Chrome本身對(duì)服務(wù)器依賴的庫(kù)的版本要求比較高，centos服務(wù)器依賴偏穩(wěn)定，v6很難使用headless Chrome，提升依賴版本可能出現(xiàn)各種服務(wù)器問(wèn)題（包括且不限于無(wú)法使用ssh），最好使用高版本服務(wù)器。

Puppeteer因?yàn)槭且粋€(gè)npm的包，所以安裝很簡(jiǎn)單：

npm i puppeteer

或者

yarn add puppeteer

Puppeteer安裝時(shí)自帶一個(gè)最新版本的Chromium，可以通過(guò)設(shè)置環(huán)境變量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳過(guò)下載。如果不下載的話，啟動(dòng)時(shí)可以通過(guò)puppeteer.launch([options])配置項(xiàng)中的executablePath指定Chromium的位置。

Puppeteer類似其他框架，通過(guò)操作Browser實(shí)例來(lái)操作瀏覽器作出相應(yīng)的反應(yīng)。

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://rennaiqian.com");
  await page.screenshot({path: "example.png"});
  await page.pdf({path: "example.pdf", format: "A4"});
  await browser.close();
})();

上述代碼通過(guò)puppeteer的launch方法生成了一個(gè)browser的實(shí)例，對(duì)應(yīng)于瀏覽器，launch方法可以傳入配置項(xiàng)，比較有用的是在本地調(diào)試時(shí)傳入{headless:false}可以關(guān)閉headless模式。

const browser = await puppeteer.launch({headless:false})

browser.newPage方法可以打開一個(gè)新選項(xiàng)卡并返回選項(xiàng)卡的實(shí)例page，通過(guò)page上的各種方法可以對(duì)頁(yè)面進(jìn)行常用操作。上述代碼就進(jìn)行了截屏和打印pdf的操作。

一個(gè)很強(qiáng)大的方法是page.evaluate(pageFunction, ...args)，可以向頁(yè)面注入我們的函數(shù)，這樣就有了無(wú)限可能

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://rennaiqian.com");

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log("Dimensions:", dimensions);
  await browser.close();
})();

需要注意的是evaluate方法中是無(wú)法直接使用外部的變量的，需要作為參數(shù)傳入，想要獲得執(zhí)行的結(jié)果也需要return出來(lái)。因?yàn)槭且粋€(gè)開源一個(gè)多月的項(xiàng)目，現(xiàn)在項(xiàng)目很活躍，所以使用時(shí)自行查找api才能保證參數(shù)、使用方法不會(huì)錯(cuò)。

關(guān)掉無(wú)界面模式，有時(shí)查看瀏覽器顯示的內(nèi)容是很有用的。使用以下命令可以啟動(dòng)完整版瀏覽器：

const browser = await puppeteer.launch({headless: false})

減慢速度，slowMo選項(xiàng)以指定的毫秒減慢Puppeteer的操作。這是另一個(gè)看到發(fā)生了什么的方法：

const browser = await puppeteer.launch({
  headless:false,
  slowMo:250
});

3.捕獲console的輸出,通過(guò)監(jiān)聽console事件。在page.evaluate里調(diào)試代碼時(shí)這也很方便：

page.on("console", msg => console.log("PAGE LOG:", ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));

4.啟動(dòng)詳細(xì)日志記錄，所有公共API調(diào)用和內(nèi)部協(xié)議流量都將通過(guò)puppeteer命名空間下的debug模塊進(jìn)行記錄

 # Basic verbose logging
 env DEBUG="puppeteer:*" node script.js

 # Debug output can be enabled/disabled by namespace
 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
 env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls

 # Protocol traffic can be rather noisy. This example filters out all Network domain messages
 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v ""Network"

很多網(wǎng)頁(yè)通過(guò)user-agent來(lái)判斷設(shè)備，可以通過(guò)page.emulate(options)來(lái)進(jìn)行模擬。options有兩個(gè)配置項(xiàng)，一個(gè)為userAgent，另一個(gè)為viewport可以設(shè)置寬度(width)、高度(height)、屏幕縮放(deviceScaleFactor)、是否是移動(dòng)端(isMobile)、有無(wú)touch事件(hasTouch)。

const puppeteer = require("puppeteer");
const devices = require("puppeteer/DeviceDescriptors");
const iPhone = devices["iPhone 6"];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto("https://www.example.com");
  // other actions...
  await browser.close();
});

上述代碼則模擬了iPhone6訪問(wèn)某網(wǎng)站，其中devices是puppeteer內(nèi)置的一些常見設(shè)備的模擬參數(shù)。

很多網(wǎng)頁(yè)需要登錄，有兩種解決方案：

讓puppeteer去輸入賬號(hào)密碼

常用方法：點(diǎn)擊可以使用page.click(selector[, options])方法，也可以選擇聚焦page.focus(selector)。
輸入可以使用page.type(selector, text[, options])輸入指定的字符串，還可以在options中設(shè)置delay緩慢輸入更像真人一些。也可以使用keyboard.down(key[, options])來(lái)一個(gè)字符一個(gè)字符的輸入。

如果是通過(guò)cookie判斷登錄狀態(tài)的可以通過(guò)page.setCookie(...cookies)，想要維持cookie可以定時(shí)訪問(wèn)。

Tip：有些網(wǎng)站需要掃碼，但是相同域名的其他網(wǎng)頁(yè)卻有登錄，就可以嘗試去可以登錄的網(wǎng)頁(yè)登錄完利用cookie訪問(wèn)跳過(guò)掃碼。

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto("https://baidu.com");
  await page.type("#kw", "puppeteer", {delay: 100});
  page.click("#su")
  await page.waitFor(1000);
  const targetLink = await page.evaluate(() => {
    return [...document.querySelectorAll(".result a")].filter(item => {
      return item.innerText && item.innerText.includes("Puppeteer的入門和實(shí)踐")
    }).toString()
  });
  await page.goto(targetLink);
  await page.waitFor(1000);
  browser.close();
})()

求贊，另外歡迎訪問(wèn)我的博客