puppeteer庫(kù)入門初探

2019-11-19 12:18:17

字體：大中小

供稿：網(wǎng)友

puppeteer 是一個(gè)Chrome官方出品的headless Chrome node庫(kù)。它提供了一系列的API, 可以在無UI的情況下調(diào)用Chrome的功能, 適用于爬蟲、自動(dòng)化處理等各種場(chǎng)景

根據(jù)官網(wǎng)上描述，puppeteer 具有以下作用:

生成頁面截圖和 PDF
自動(dòng)化表單提交、UI 測(cè)試、鍵盤輸入等
創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的 JavaScript 和瀏覽器功能，可以直接在最新版本的 Chrome 中運(yùn)行測(cè)試。
捕獲站點(diǎn)的時(shí)間線跟蹤，以幫助診斷性能問題。
爬取 SPA 頁面并進(jìn)行預(yù)渲染(即'SSR')

以下就來闡述 puppeteer 的這幾個(gè)作用

1.初始化項(xiàng)目

注: 這里我們會(huì)使用到 es6/7 的新特性，所以用 typescript 來編譯代碼

npm install puppeteer typescript @types/puppeteer

tsconfig.json 配置如下:

{ "compileOnSave": true, "compilerOptions": {  "target": "es5",  "lib": [   "es6", "dom"  ],  "types": [   "node"  ],  "outDir": "./dist/",  "sourceMap": true,  "module": "commonjs",  "watch": true,  "moduleResolution": "node",  "isolatedModules": false,  "experimentalDecorators": true,  "declaration": true,  "suppressImplicitAnyIndexErrors": true }, "include": [  "./examples/**/*", ]}

puppeteer 模塊提供一個(gè)方法啟動(dòng)一個(gè) Chromium 實(shí)例。

import * as puppeteer from 'puppeteer'(async () => { await puppeteer.launch()})()

上述代碼通過 puppeteer 的 launch 方法生成一個(gè) browser 實(shí)例，launch 方法可以接收一些配置項(xiàng)。較為常用的有:

headless [boolean]: 是否以 headless 模式啟動(dòng)瀏覽器
slowMo [number]: 減緩 puppeteer 的操作。這樣就很方便的可以看到正在發(fā)生的事情
args[Array[string]]: 要傳給瀏覽器實(shí)例的額外參數(shù)

2.生成頁面截圖

這里我們以 https://example.com/ 為例

(async () => { const browser = await puppeteer.launch(); //生成browser實(shí)例 const page = await browser.newPage();   //解析一個(gè)新的頁面。頁面是在默認(rèn)瀏覽器上下文創(chuàng)建的 await page.goto("https://example.com/"); //跳轉(zhuǎn)到 https://example.com/ await page.screenshot({          //生成圖片  path: 'example.png' })})()

在這里需要注意的是，截圖默認(rèn)截取的是打開網(wǎng)頁可視區(qū)的內(nèi)容,如果要獲取完整的可滾動(dòng)頁面的屏幕截圖,需要添加 fullPage: true

執(zhí)行 node dist/screenshot.js ，即可在根目錄下生成 example.png

puppeteer 默認(rèn)將頁面大小設(shè)置為 800*600,可以通過 page.setViewport() 來改變頁面大小。

不僅如此，puppeteer 還可以模擬手機(jī)

import * as puppeteer from "puppeteer"; import * as devices from "puppeteer/DeviceDescriptors"; const iPhone = devices["iPhone 6"];(async () => { const browser = await puppeteer.launch({  headless: false }); const page = await browser.newPage(); await page.emulate(iPhone); await page.goto("https://baidu.com/"); await browser.close();})();

3.生成 pdf

(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto("https://example.com/"); await page.pdf({  displayHeaderFooter: true,  path: 'example.pdf',  format: 'A4',  headerTemplate: '<b style="font-size: 30px">Hello world<b/>',  footerTemplate: '<b style="font-size: 30px">Some text</b>',  margin: {   top: "100px",   bottom: "200px",   right: "30px",   left: "30px",  } }); await browser.close();})()

執(zhí)行 node dist/pdf.js 即可。

4.自動(dòng)化表單提交, 輸入

在這里我們模擬一下京東的登錄, 為了能更好的看到整個(gè)過程, 我們使用 headless: false 來關(guān)閉 headless 模式,看一下整個(gè)的登錄流程

(async () => { const browser = await puppeteer.launch({  headless: false }); const page = await browser.newPage(); await page.goto("https://github.com/login"); await page.waitFor(1000)  //延遲1秒輸入 await page.type("#login_field", "1137060420@qq.com"); //立即輸入 await page.type("#password", "bian1992518", {  delay: 100 }) //模擬用戶輸入 await page.click("input[type=submit]"); //點(diǎn)擊登錄按鈕})()

5.站點(diǎn)時(shí)間線追蹤

可以很方便的使用 tracking.start 和 tracking.stop 創(chuàng)建一個(gè)可以在 chrome devtools 打開的跟蹤文件

(async () => { const broswer = await puppeteer.launch(); const page = await broswer.newPage(); await page.tracing.start({  path: "trace.json" }); await page.goto("https://example.com/"); await page.tracing.stop(); broswer.close();})();

執(zhí)行 node dist/trace.js 會(huì)生成一個(gè) trace.json 文件, 然后我們打開 chrome devtools -> Performance, 然后把該文件直接拖進(jìn)去即可。該功能便于我們對(duì)網(wǎng)站進(jìn)行性能分析, 進(jìn)而優(yōu)化性能

6.爬蟲和 SSR

現(xiàn)在大多數(shù)開發(fā)用 react、vue、angular 來構(gòu)建 SPA 網(wǎng)站, SPA 固有很多的優(yōu)點(diǎn), 比方開發(fā)速度快、模塊化、組件化、性能優(yōu)等。但其缺點(diǎn)還是很明顯的, 首先就是首屏渲染問題, 其次不利于 SEO, 對(duì)爬蟲不友好。

以 https://preview.pro.ant.design/#/dashboard/analysis 為例, 我們點(diǎn)擊右鍵, 查看源代碼, 發(fā)現(xiàn)其 body 里面只有 <div id="root"></div> ，假如想把門店銷售額排名情況給爬下來，存到數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)分析(如下圖)

此時(shí)我們以傳統(tǒng)爬蟲的方式去爬的話是拿不到網(wǎng)頁內(nèi)容的。

如 python

# -*- coding : UTF-8 -*-from bs4 import BeautifulSoup import urllib2def spider():   html = urllib2.urlopen('https://preview.pro.ant.design/#')  html = html.read()  soup = BeautifulSoup(html, 'lxml')  print(soup.prettify())if __name__ == '__main__':   spider()

執(zhí)行 python py/index.py , 得到的結(jié)果如下圖:

body 里面并沒有頁面相關(guān)的 dom,因此我們想通過 python 去爬取 SPA 頁面的內(nèi)容是不可行的。

nodejs

import axios from "axios";(async () => { const res = await axios.get("https://preview.pro.ant.design/#"); console.log(res.data);})();

執(zhí)行 node dist/node-spider.js , 得到和上面例子一樣的結(jié)果。

puppeteer

(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto("https://preview.pro.ant.design/#"); console.log(await page.content());})();

執(zhí)行 node dist/spider.js , 得到如下:

此時(shí)我們可以驚奇的發(fā)現(xiàn)可以抓到頁面所有的 dom 節(jié)點(diǎn)了。此時(shí)我們可以把它保存下來做 SSR，也可以爬取我們想要的內(nèi)容了。

(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto("https://preview.pro.ant.design/#"); const RANK = ".rankingList___11Ilg li"; await page.waitForSelector(RANK); const res = await page.evaluate(() => {  const getText = (v, selector) => {   return v.querySelector(selector) && v.querySelector(selector).innerText;  };  const salesRank = Array.from(   document.querySelectorAll(".rankingList___11Ilg li")  );  const data = [];  salesRank.map(v => {   const obj = {    rank: getText(v, "span:nth-child(1)"),    address: getText(v, "span:nth-child(2)"),    sales: getText(v, "span:nth-child(3)")   };   data.push(obj);  });  return {   data  }; }); console.log(res); await browser.close();})();

執(zhí)行 node dist/spider.js , 得到如下: