puppeteer 是一個Chrome官方出品的headless Chrome node庫。它提供了一系列的API, 可以在無UI的情況下調用Chrome的功能, 適用于爬蟲、自動化處理等各種場景
根據官網上描述，puppeteer 具有以下作用:
以下就來闡述 puppeteer 的這幾個作用
1.初始化項目
注: 這里我們會使用到 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 模塊提供一個方法啟動一個 Chromium 實例。
import * as puppeteer from 'puppeteer'(async () => { await puppeteer.launch()})()上述代碼通過 puppeteer 的 launch 方法生成一個 browser 實例，launch 方法可以接收一些配置項。較為常用的有:
2.生成頁面截圖
這里我們以 https://example.com/ 為例
(async () => { const browser = await puppeteer.launch(); //生成browser實例 const page = await browser.newPage(); //解析一個新的頁面。頁面是在默認瀏覽器上下文創建的 await page.goto("https://example.com/"); //跳轉到 https://example.com/ await page.screenshot({ //生成圖片 path: 'example.png' })})()在這里需要注意的是，截圖默認截取的是打開網頁可視區的內容,如果要獲取完整的可滾動頁面的屏幕截圖,需要添加 fullPage: true
執行 node dist/screenshot.js ，即可在根目錄下生成 example.png
puppeteer 默認將頁面大小設置為 800*600,可以通過 page.setViewport() 來改變頁面大小。
不僅如此，puppeteer 還可以模擬手機
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();})()執行 node dist/pdf.js 即可。
4.自動化表單提交, 輸入
在這里我們模擬一下京東的登錄, 為了能更好的看到整個過程, 我們使用 headless: false 來關閉 headless 模式,看一下整個的登錄流程
(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]"); //點擊登錄按鈕})()5.站點時間線追蹤
可以很方便的使用 tracking.start 和 tracking.stop 創建一個可以在 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();})();執行 node dist/trace.js 會生成一個 trace.json 文件, 然后我們打開 chrome devtools -> Performance, 然后把該文件直接拖進去即可。該功能便于我們對網站進行性能分析, 進而優化性能
6.爬蟲和 SSR
現在大多數開發用 react、vue、angular 來構建 SPA 網站, SPA 固有很多的優點, 比方開發速度快、模塊化、組件化、性能優等。但其缺點還是很明顯的, 首先就是首屏渲染問題, 其次不利于 SEO, 對爬蟲不友好。
以 https://preview.pro.ant.design/#/dashboard/analysis 為例, 我們點擊右鍵, 查看源代碼, 發現其 body 里面只有 <div id="root"></div> ，假如想把門店銷售額排名情況給爬下來，存到數據庫進行數據分析(如下圖)
此時我們以傳統爬蟲的方式去爬的話是拿不到網頁內容的。
如 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()執行 python py/index.py , 得到的結果如下圖:
body 里面并沒有頁面相關的 dom,因此我們想通過 python 去爬取 SPA 頁面的內容是不可行的。
nodejs
import axios from "axios";(async () => { const res = await axios.get("https://preview.pro.ant.design/#"); console.log(res.data);})();執行 node dist/node-spider.js , 得到和上面例子一樣的結果。
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());})();執行 node dist/spider.js , 得到如下:
此時我們可以驚奇的發現可以抓到頁面所有的 dom 節點了。此時我們可以把它保存下來做 SSR，也可以爬取我們想要的內容了。
(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();})();執行 node dist/spider.js , 得到如下:
此時，我們已經利用 puppeteer 把我們所需要的數據給爬下來了。
到此，我們就把 puppeteer 基本的功能點給實現了一遍,本文示例代碼可在 github 上獲取。
參考
https://github.com/GoogleChrome/puppeteer
https://pptr.dev/#?product=Puppeteer&version=v1.6.0
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
