本文來(lái)自網(wǎng)易云社區(qū)

作者：唐釗

最近在看 node 爬蟲相關(guān)的一些東西，我記得還是很久以前常用的 node 爬蟲工具還是 superagengt+cherrio,他們的思路是通過(guò)發(fā)起 http 請(qǐng)求然后截取 respone 的內(nèi)容，但是隨著前端mvvm等框架的盛行，現(xiàn)在更多的內(nèi)容是異步加載了，所以通過(guò)這種傳統(tǒng)的爬蟲方式已經(jīng)很難抓取到我們想要的內(nèi)容了，那么Puppeteer又有什么亮點(diǎn)呢？接下來(lái)我們?cè)敿?xì)介紹一下這個(gè)由 google 官方團(tuán)隊(duì)維護(hù)的大殺器！

Puppeteer是一個(gè)Node庫(kù)，由Chrome官方團(tuán)隊(duì)進(jìn)行維護(hù)，提供接口來(lái)控制headless Chrome。Headless Chrome是一種不使用Chrome來(lái)運(yùn)行Chrome瀏覽器的方式。簡(jiǎn)單的來(lái)說(shuō)就是一個(gè)運(yùn)行在命令行中的 chrome,我們可以通過(guò)代碼來(lái)實(shí)現(xiàn)我們常規(guī)的瀏覽器瀏覽網(wǎng)頁(yè)的功能。這樣就能保證我們拿到的內(nèi)容和正常通過(guò)瀏覽器查看的是一毛一樣的！

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è)試用例

• 捕獲站點(diǎn)的時(shí)間線，以便追蹤你的網(wǎng)站，幫助分析網(wǎng)站性能問(wèn)題

接下來(lái)我們通過(guò)一些簡(jiǎn)單的示例來(lái)看一下它的使用

安裝

安裝還是常規(guī)的流程，通過(guò)yarn或npm來(lái)完成。只需運(yùn)行下面的命令：

yarn?add?pupeeter//ornpm?i?-S?puppeteer

DEMO

demo-截屏

const?puppeteer?=?require("puppeteer");???//引入?puppeteer(async()?=>?{????/*通過(guò)?launch?生成一個(gè)’瀏覽器‘實(shí)例,option?中的?headless?是個(gè)布爾值，如果是?false?的話你就會(huì)看到一個(gè)瀏覽器從打開，到完成你整個(gè)任務(wù)的全過(guò)程，默認(rèn)是?true，也就是在后臺(tái)自動(dòng)完成你的任務(wù)*/const?browser?=?await?puppeteer.launch({?headless:?false?});??//打開一個(gè)新的標(biāo)簽頁(yè)const?page?=?await?browser.newPage();????//跳轉(zhuǎn)到我們想要的地址去await?page.goto("http://www.hockor.com/");????//默認(rèn)打開的視口大小是800X600?,我們可以通過(guò)如下代碼來(lái)設(shè)置窗口的大小，await?page.setViewport({width:1920,height:1080})????//通過(guò)screenshot方法完成截屏，并且保存在指定的?path?中await?page.screenshot({?path:?"nba.png"?});????//最后關(guān)閉整個(gè)‘瀏覽器‘browser.close(); })();

過(guò)程如下：

demo-通過(guò)搜索引擎拉取圖片

上面我們展示了 puppeteer一個(gè)基礎(chǔ)的 demo 完整實(shí)例，但是它更強(qiáng)大的地方還有很多，不僅支持在網(wǎng)頁(yè)上點(diǎn)擊，還可以填寫表單，讀取數(shù)據(jù)。大家可以去官方 api 查看，傳送鏈接

接下來(lái)開始我們下一個(gè) demo，這個(gè)示例我們完成一個(gè)在搜索引擎中爬取我們想要的圖片并保存到本地的功能。來(lái)更進(jìn)一步的了解這個(gè)強(qiáng)大的工具。

• 我們的任務(wù)是在搜狗圖片中爬取關(guān)鍵詞為“NBA”的圖片，并且保存在我們當(dāng)前的 imgs 目錄下。

那么核心的關(guān)鍵點(diǎn)就在于輸入我們的關(guān)鍵詞并且跳轉(zhuǎn)到對(duì)應(yīng)的列表頁(yè)面，然后爬取內(nèi)容中所有的 img 標(biāo)簽，并將其保存在我們制定的目錄中。接下來(lái)我們?cè)敿?xì)剖析。

通過(guò)查看Puppeteer API，可以找到定義點(diǎn)擊的函數(shù)和聚焦的函數(shù)：

page.click(selector[,?options]) page.focus(selector);

以上selector 一個(gè)選擇器來(lái)指定要點(diǎn)擊的元素。如果多個(gè)元素滿足，那么默認(rèn)選擇第一個(gè)。 這不正好滿足了我們前面的邏輯，輸入框聚焦和點(diǎn)擊，那么怎么輸入關(guān)鍵詞呢？

For?finer?control,?you?can?use?keyboard.down,? keyboard.up,?and?keyboard.sendCharacter?to?manually? fire?events?as?if?they?were?generated?from?a?real?keyboard.

可以看到我們可以通過(guò) page.keyboard.sendCharacter 來(lái)輸入我們自己的文字

正好，這樣子我們就滿足了我們前期的條件，那么完整的代碼如下

const?puppeteer?=?require("puppeteer"); (async?()=>{????const?brower?=?await?puppeteer.launch();????const?page?=?await?brower.newPage();await?page.goto("http://pic.sogou.com/");await?page.setViewport({width:1920,height:1080})????//上面的代碼和之前是一樣的，不同是下面幾句//await?page.focus("#form_querytext");await?page.keyboard.sendCharacter("nba");await?page.click("#searchBtn")await?page.waitFor(1000);????//監(jiān)聽頁(yè)面?load?完成page.on('load',async?()=>{????????console.log("page?loaded");????????const?srcs?=?await?page.evaluate(()=>?{????????????const?images?=?document.querySelectorAll("img.img-hover");????????????return?Array.prototype.map.call(images,img=>img.src)})????????//遍歷圖片并且保存srcs.forEach(async?(src)=>?{????????????console.log(src)????????????const?ext?=?path.extname(src)???path.extname(src):".jpg";????????????const?file?=?path.join('./imgs',`${Date.now()}${ext}`)http.get(src,res=>{res.pipe(fs.createWriteStream(file)).on('finish',(err)=>{????????????????????if(err){????????????????????????console.log(err)}?else?{????????????????????????console.log("done")}})})})await?brower.close()}) })()

我們可以看到上面的流程就像我們正常瀏覽網(wǎng)頁(yè)一樣，而不是以前那種在 http response 中去抓取內(nèi)容，這樣子對(duì)于現(xiàn)在的很多懶加載頁(yè)面或者前端渲染來(lái)講我們都能成功的爬取到我們想要的內(nèi)容。

更多的官方 demo 例子我們可以去https://try-puppeteer.appspot.com/編輯查看。

目前 puppeteer在爬蟲和前端自動(dòng)化測(cè)試上使用也日益增大，大家可以去官方 API 文檔查看它的更多功能！大家也可以結(jié)合自己的需求／業(yè)務(wù)場(chǎng)景，充分挖掘Puppeteer功能。

網(wǎng)易云免費(fèi)體驗(yàn)館，0成本體驗(yàn)20+款云產(chǎn)品！?

更多網(wǎng)易研發(fā)、產(chǎn)品、運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)

相關(guān)文章：
【推薦】?分布式存儲(chǔ)系統(tǒng)可靠性系列一：如何估算
【推薦】?常用數(shù)據(jù)清洗方法大盤點(diǎn)
【推薦】?【你離硅谷只差一步】網(wǎng)易中國(guó)創(chuàng)業(yè)家大賽項(xiàng)目火熱征集中

轉(zhuǎn)載于:https://www.cnblogs.com/zyfd/p/9711947.html

總結(jié)

以上是生活随笔為你收集整理的Puppeteer入门初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。