puppeteer庫(kù)入門初探
puppeteer 是一個(gè)Chrome官方出品的headless Chrome node庫(kù)。它提供了一系列的API, 可以在無(wú)UI的情況下調(diào)用Chrome的功能, 適用于爬蟲(chóng)、自動(dòng)化處理等各種場(chǎng)景
根據(jù)官網(wǎng)上描述，puppeteer 具有以下作用:
- 生成頁(yè)面截圖和 PDF
- 自動(dòng)化表單提交、UI 測(cè)試、鍵盤輸入等
- 創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境。使用最新的 JavaScript 和瀏覽器功能，可以直接在最新版本的 Chrome 中運(yùn)行測(cè)試。
- 捕獲站點(diǎn)的時(shí)間線跟蹤，以幫助診斷性能問(wèn)題。
- 爬取 SPA 頁(yè)面并進(jìn)行預(yù)渲染(即'SSR')
以下就來(lái)闡述 puppeteer 的這幾個(gè)作用
1.初始化項(xiàng)目
注: 這里我們會(huì)使用到 es6/7 的新特性，所以用 typescript 來(lái)編譯代碼
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()
})()
上述代碼通過(guò) puppeteer 的 launch 方法生成一個(gè) browser 實(shí)例，launch 方法可以接收一些配置項(xiàng)。較為常用的有:
- headless [boolean]: 是否以 headless 模式啟動(dòng)瀏覽器
- slowMo [number]: 減緩 puppeteer 的操作。這樣就很方便的可以看到正在發(fā)生的事情
- args[Array[string]]: 要傳給瀏覽器實(shí)例的額外參數(shù)
2.生成頁(yè)面截圖
這里我們以 https://example.com/ 為例
(async () => {
const browser = await puppeteer.launch(); //生成browser實(shí)例
const page = await browser.newPage(); //解析一個(gè)新的頁(yè)面。頁(yè)面是在默認(rèn)瀏覽器上下文創(chuàng)建的
await page.goto("https://example.com/"); //跳轉(zhuǎn)到 https://example.com/
await page.screenshot({ //生成圖片
path: 'example.png'
})
})()
在這里需要注意的是，截圖默認(rèn)截取的是打開(kāi)網(wǎng)頁(yè)可視區(qū)的內(nèi)容,如果要獲取完整的可滾動(dòng)頁(yè)面的屏幕截圖,需要添加 fullPage: true
執(zhí)行 node dist/screenshot.js ，即可在根目錄下生成 example.png
puppeteer 默認(rèn)將頁(yè)面大小設(shè)置為 800*600,可以通過(guò) page.setViewport() 來(lái)改變頁(yè)面大小。
不僅如此，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è)過(guò)程, 我們使用 headless: false 來(lái)關(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 打開(kāi)的跟蹤文件
(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 文件, 然后我們打開(kāi) chrome devtools -> Performance, 然后把該文件直接拖進(jìn)去即可。該功能便于我們對(duì)網(wǎng)站進(jìn)行性能分析, 進(jìn)而優(yōu)化性能
6.爬蟲(chóng)和 SSR
現(xiàn)在大多數(shù)開(kāi)發(fā)用 react、vue、angular 來(lái)構(gòu)建 SPA 網(wǎng)站, SPA 固有很多的優(yōu)點(diǎn), 比方開(kāi)發(fā)速度快、模塊化、組件化、性能優(yōu)等。但其缺點(diǎn)還是很明顯的, 首先就是首屏渲染問(wèn)題, 其次不利于 SEO, 對(duì)爬蟲(chóng)不友好。
以 https://preview.pro.ant.design/#/dashboard/analysis 為例, 我們點(diǎn)擊右鍵, 查看源代碼, 發(fā)現(xiàn)其 body 里面只有 <div id="root"></div> ，假如想把門店銷售額排名情況給爬下來(lái)，存到數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)分析(如下圖)
此時(shí)我們以傳統(tǒng)爬蟲(chóng)的方式去爬的話是拿不到網(wǎng)頁(yè)內(nèi)容的。
如 python
# -*- coding : UTF-8 -*-
from bs4 import BeautifulSoup
import urllib2
def 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 里面并沒(méi)有頁(yè)面相關(guān)的 dom,因此我們想通過(guò) python 去爬取 SPA 頁(yè)面的內(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)可以抓到頁(yè)面所有的 dom 節(jié)點(diǎn)了。此時(shí)我們可以把它保存下來(lái)做 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 , 得到如下:
此時(shí)，我們已經(jīng)利用 puppeteer 把我們所需要的數(shù)據(jù)給爬下來(lái)了。
到此，我們就把 puppeteer 基本的功能點(diǎn)給實(shí)現(xiàn)了一遍,本文示例代碼可在 github 上獲取。
參考
https://github.com/GoogleChrome/puppeteer
https://pptr.dev/#?product=Puppeteer&version=v1.6.0
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解前端任務(wù)構(gòu)建利器Gulp.js使用指南
這篇文章主要介紹了前端任務(wù)構(gòu)建利器Gulp.js使用指南，對(duì)Gulp.js感興趣的同學(xué)，可以參考下2021-04-04
本篇文章主要介紹了nodejs 圖片預(yù)覽和上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
SQLite是一種輕量級(jí)的嵌入式關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng),它以庫(kù)的形式存在,可以嵌入到應(yīng)用程序中,使用Node.js操作SQLite數(shù)據(jù)庫(kù)有多種方式,其中常用的方式包括使用sqlite3模塊、sequelize模塊和knex模塊,本文將詳細(xì)的給大家介紹這幾種方式,需要的朋友可以參考下2023-10-10
node.js突破nginx防盜鏈機(jī)制，下載圖片案例分析
這篇文章主要介紹了node.js突破nginx防盜鏈機(jī)制，下載圖片的方法,結(jié)合具體案例形式分析了防盜鏈的相關(guān)原理與node.js使用axios庫(kù)下載防盜鏈圖片的相關(guān)操作技巧,需要的朋友可以參考下2023-04-04
初識(shí)NodeJS服務(wù)端開(kāi)發(fā)入門（Express+MySQL）
本篇文章主要介紹了初識(shí)NodeJS服務(wù)端開(kāi)發(fā)入門（Express+MySQL），可以對(duì)數(shù)據(jù)庫(kù)中的一張表進(jìn)行簡(jiǎn)單的CRUD操作，有興趣的可以了解一下。2017-04-04
本篇文章主要介紹了淺談Node模塊系統(tǒng)及其模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
nodejs基于express實(shí)現(xiàn)文件上傳的方法
這篇文章主要介紹了nodejs基于express實(shí)現(xiàn)文件上傳的方法,結(jié)合實(shí)例形式分析了nodejs基于express框架實(shí)現(xiàn)文件上傳功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
Node.js連接數(shù)據(jù)庫(kù)實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Node.js連接數(shù)據(jù)庫(kù)實(shí)現(xiàn)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Nodejs探秘之深入理解單線程實(shí)現(xiàn)高并發(fā)原理
這篇文章主要介紹了Nodejs單線程實(shí)現(xiàn)高并發(fā)原理，對(duì)Node.js感興趣的同學(xué)，可以參考下2021-04-04
如何在Windows上更新Node.js版本呢？有沒(méi)有那種不需要重新安裝軟件再修改配置文件和環(huán)境變量的方法？你是否還在為可能要重新安裝Node然后配置文件修改環(huán)境變量困擾？面就來(lái)介紹一下nvm更換node版本的步驟,需要的朋友可以參考下2024-01-01