爬蟲利器Puppeteer實(shí)戰(zhàn)
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 引擎中處理而不打開瀏覽器,而且關(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è)試、鍵盤輸入等
- 幫你創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境(chrome),可以直接在此運(yùn)行測(cè)試用例6.捕獲站點(diǎn)的時(shí)間線,以便追蹤你的網(wǎng)站,幫助分析網(wǎng)站性能問(wèn)題
Puppeteer 使用
安裝 Puppeteer
由于封網(wǎng),直接下載 Chromium 會(huì)失敗,可以先阻止下載 Chromium 然后再手動(dòng)下載它
# 安裝命令 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
初試 Puppeteer,截個(gè)圖吧
知識(shí)點(diǎn)
- puppeteer.launch 啟動(dòng)瀏覽器實(shí)例
- browser.newPage() 創(chuàng)建一個(gè)新頁(yè)面
- page.goto 進(jìn)入指定網(wǎng)頁(yè)
- page.screenshot 截圖
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,
// 打開開發(fā)者工具, 當(dāng)此值為true時(shí), headless總為false
devtools: false,
// 關(guān)閉headless模式, 不會(huì)打開瀏覽器
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();
})();
運(yùn)行結(jié)果

進(jìn)階,獲取網(wǎng)易云音樂(lè)的歌詞和評(píng)論
網(wǎng)易云音樂(lè)的API經(jīng)過(guò)AES和RSA算法加密,需要攜帶加密的信息通過(guò)POST方式請(qǐng)求才能獲取到數(shù)據(jù)。但 Puppeteer 出現(xiàn)后,這些都不重要了,只要它頁(yè)面上顯示了,通過(guò) Puppeteer 都能獲取到該元素。
知識(shí)點(diǎn)
- page.type 獲取輸入框焦點(diǎn)并輸入文字
- page.keyboard.press 模擬鍵盤按下某個(gè)按鍵,目前mac上組合鍵無(wú)效為已知bug
- page.waitFor 頁(yè)面等待,可以是時(shí)間、某個(gè)元素、某個(gè)函數(shù)
- page.frames() 獲取當(dāng)前頁(yè)面所有的 iframe,然后根據(jù) iframe 的名字精確獲取某個(gè)想要的 iframe
- iframe.$('.srchsongst') 獲取 iframe 中的某個(gè)元素
- iframe.evaluate() 在瀏覽器中執(zhí)行函數(shù),相當(dāng)于在控制臺(tái)中執(zhí)行函數(shù),返回一個(gè) Promise
- Array.from 將類數(shù)組對(duì)象轉(zhuǎn)化為對(duì)象
- page.click() 點(diǎn)擊一個(gè)元素
- iframe.$eval() 相當(dāng)于在 iframe 中運(yùn)行 document.queryselector 獲取指定元素,并將其作為第一個(gè)參數(shù)傳遞
- iframe.$$eval 相當(dāng)于在 iframe 中運(yùn)行 document.querySelectorAll 獲取指定元素?cái)?shù)組,并將其作為第一個(gè)參數(shù)傳遞
const fs = require('fs');
const puppeteer = require('puppeteer');
(async () => {
const browser = await (puppeteer.launch({ executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium', headless: false }));
const page = await browser.newPage();
// 進(jìn)入頁(yè)面
await page.goto('https://music.163.com/#');
// 點(diǎn)擊搜索框擬人輸入 鬼才會(huì)想起
const musicName = '鬼才會(huì)想';
await page.type('.txt.j-flag', musicName, {delay: 0});
// 回車
await page.keyboard.press('Enter');
// 獲取歌曲列表的 iframe
await page.waitFor(2000);
let iframe = await page.frames().find(f => f.name() === 'contentFrame');
const SONG_LS_SELECTOR = await iframe.$('.srchsongst');
// 獲取歌曲 鬼才會(huì)想起 的地址
const selectedSongHref = await iframe.evaluate(e => {
const songList = Array.from(e.childNodes);
const idx = songList.findIndex(v => v.childNodes[1].innerText.replace(/\s/g, '') === '鬼才會(huì)想起');
return songList[idx].childNodes[1].firstChild.firstChild.firstChild.href;
}, SONG_LS_SELECTOR);
// 進(jìn)入歌曲頁(yè)面
await page.goto(selectedSongHref);
// 獲取歌曲頁(yè)面嵌套的 iframe
await page.waitFor(2000);
iframe = await page.frames().find(f => f.name() === 'contentFrame');
// 點(diǎn)擊 展開按鈕
const unfoldButton = await iframe.$('#flag_ctrl');
await unfoldButton.click();
// 獲取歌詞
const LYRIC_SELECTOR = await iframe.$('#lyric-content');
const lyricCtn = await iframe.evaluate(e => {
return e.innerText;
}, LYRIC_SELECTOR);
console.log(lyricCtn);
// 截圖
await page.screenshot({
path: '歌曲.png',
fullPage: true,
});
// 寫入文件
let writerStream = fs.createWriteStream('歌詞.txt');
writerStream.write(lyricCtn, 'UTF8');
writerStream.end();
// 獲取評(píng)論數(shù)量
const commentCount = await iframe.$eval('.sub.s-fc3', e => e.innerText);
console.log(commentCount);
// 獲取評(píng)論
const commentList = await iframe.$$eval('.itm', elements => {
const ctn = elements.map(v => {
return v.innerText.replace(/\s/g, '');
});
return ctn;
});
console.log(commentList);
})();
運(yùn)行結(jié)果



高級(jí)爬蟲
爬取SPA應(yīng)用,并生成預(yù)渲染內(nèi)容(即“SSR” 服務(wù)端渲染),通俗講就是在頁(yè)面上顯示的內(nèi)容我們都能獲取到。下面我們就通過(guò)爬取 瓜子二手車直賣網(wǎng) 的車輛信息來(lái)認(rèn)識(shí)它。
首先通過(guò) axios 來(lái)試試
const axios = require('axios');
const useAxios = () => {
axios.get('https://www.guazi.com/hz/buy/')
.then(((result) => {
console.log(result.data);
}))
.catch((err) => {
console.log(err);
});
};
結(jié)果它返回給我這個(gè)玩意,這顯然不是我要的內(nèi)容

通過(guò) Puppeteer 爬取
const fs = require('fs');
const puppeteer = require('puppeteer');
(async () => {
const browser = await (puppeteer.launch({ executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium', headless: true }));
const page = await browser.newPage();
// 進(jìn)入頁(yè)面
await page.goto('https://www.guazi.com/hz/buy/');
// 獲取頁(yè)面標(biāo)題
let title = await page.title();
console.log(title);
// 獲取汽車品牌
const BRANDS_INFO_SELECTOR = '.dd-all.clearfix.js-brand.js-option-hid-info';
const brands = await page.evaluate(sel => {
const ulList = Array.from($(sel).find('ul li p a'));
const ctn = ulList.map(v => {
return v.innerText.replace(/\s/g, '');
});
return ctn;
}, BRANDS_INFO_SELECTOR);
console.log('汽車品牌: ', JSON.stringify(brands));
let writerStream = fs.createWriteStream('car_brands.json');
writerStream.write(JSON.stringify(brands, undefined, 2), 'UTF8');
writerStream.end();
// await bodyHandle.dispose();
// 獲取車源列表
const CAR_LIST_SELECTOR = 'ul.carlist';
const carList = await page.evaluate((sel) => {
const catBoxs = Array.from($(sel).find('li a'));
const ctn = catBoxs.map(v => {
const title = $(v).find('h2.t').text();
const subTitle = $(v).find('div.t-i').text().split('|');
return {
title: title,
year: subTitle[0],
milemeter: subTitle[1]
};
});
return ctn;
}, CAR_LIST_SELECTOR);
console.log(`總共${carList.length}輛汽車數(shù)據(jù): `, JSON.stringify(carList, undefined, 2));
// 將車輛信息寫入文件
writerStream = fs.createWriteStream('car_info_list.json');
writerStream.write(JSON.stringify(carList, undefined, 2), 'UTF8');
writerStream.end();
browser.close();
})();
運(yùn)行結(jié)果


以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Node.js?express中的身份認(rèn)證的實(shí)現(xiàn)
本文主要介紹了Node.js?express中的身份認(rèn)證的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Windows系統(tǒng)下使用Sublime搭建nodejs環(huán)境
最近在研究Nodejs開發(fā),俗話說(shuō),工欲善其事,必先利其器,當(dāng)然要找到一款用著順手的編輯器作為開始。這里我們選擇的是Sublime Text 3,除了漂亮的用戶界面,最吸引我的就是它的插件擴(kuò)展功能以及跨平臺(tái)特性。2015-04-04
使用pm2部署node生產(chǎn)環(huán)境的方法步驟
這篇文章主要介紹了使用pm2部署node生產(chǎn)環(huán)境的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用,結(jié)合實(shí)例形式分析了node.js中Event Loop事件循環(huán)相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
nodejs調(diào)用cmd命令實(shí)現(xiàn)復(fù)制目錄
本文給大家介紹的是如何在nodejs中調(diào)用CMD命令,從而實(shí)現(xiàn)目錄的復(fù)制,非常的實(shí)用,有需要的小伙伴可以參考下。2015-05-05
nodejs實(shí)現(xiàn)大文件(在線視頻)的讀取
這篇文章主要為大家詳細(xì)介紹了nodejs實(shí)現(xiàn)大文件的讀取,比如在線視頻,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12
Egret引擎開發(fā)指南之發(fā)布項(xiàng)目
當(dāng)我們制作完成一個(gè)項(xiàng)目后,我們需要把項(xiàng)目發(fā)布為正式版本,并放到網(wǎng)上提供給玩家。那么在egret中簡(jiǎn)單的使用build命令并非打包最終的正式版文件。你還需要進(jìn)行最終的發(fā)布操作。2014-09-09

