前言
對(duì)于web的自動(dòng)測(cè)試，很多人熟悉的是selenium、webdriver的解決方案，比如說(shuō)webdriver是按照server – client的經(jīng)典設(shè)計(jì)模式設(shè)計(jì)的，server端是remote server，可以是任意的瀏覽器。以及常用到的一個(gè)爬蟲(chóng)框架PhantomJS 。對(duì)于這兩款工具環(huán)境安裝復(fù)雜，API 調(diào)用不友好的問(wèn)題。puppeteer是一款基于chrome的自動(dòng)化測(cè)試以及爬蟲(chóng)工具。
一、認(rèn)識(shí)puppeteer
在chrome 59 chrome團(tuán)隊(duì)支持了headless模式，在Headless模式下，用于自動(dòng)化測(cè)試和不需要可視化用戶界面的服務(wù)器。例如，你想在一個(gè)網(wǎng)頁(yè)上運(yùn)行一些測(cè)試，從網(wǎng)頁(yè)創(chuàng)建一個(gè)PDF，或者只是檢查瀏覽器怎樣遞交URL。
Puppeteer是谷歌官方出品的一個(gè)通過(guò)DevTools協(xié)議控制headless Chrome的Node庫(kù)。可以通過(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲(chóng)訪問(wèn)頁(yè)面來(lái)收集數(shù)據(jù)。puppeteer的出現(xiàn)讓很多l(xiāng)ib的開(kāi)發(fā)者放棄繼續(xù)開(kāi)發(fā)，比如PhantomJS 的作者當(dāng)他看到puppeteer的出現(xiàn)就果斷的放棄了PhantomJS的維護(hù)，很多小伙伴該傷心了吧。
Puppeteer 核心功能:
?利用網(wǎng)頁(yè)生成PDF、圖片
?爬取SPA應(yīng)用，并生成預(yù)渲染內(nèi)容（即“SSR” 服務(wù)端渲染）
?可以從網(wǎng)站抓取內(nèi)容
?自動(dòng)化表單提交、UI測(cè)試、鍵盤(pán)輸入等
?幫你創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境（chrome），可以直接在此運(yùn)行測(cè)試用例
?捕獲站點(diǎn)的時(shí)間線，以便追蹤你的網(wǎng)站，幫助分析網(wǎng)站性能問(wèn)題
Puppeteer是使用node語(yǔ)言進(jìn)行開(kāi)發(fā)的，在使用中你可以使用async/await異步解決方案，async/await可能是目前為止最簡(jiǎn)單的異步方案了。
二、環(huán)境準(zhǔn)備
node：
Node.js安裝包及源碼下載地址為：https://nodejs.org/en/download/。選著對(duì)應(yīng)的版本進(jìn)行安裝，對(duì)于node官方介紹需要V6.4以后的版本，如果要使用async/await需要V7.6.而以后的版本，這里建議使用最新的穩(wěn)定版本。
通過(guò)node -v 查看版本信息
Npm：
就像NPM的官網(wǎng)（http://npmjs.org/）上介紹的那樣，安裝NPM僅僅是一行命令的事情：
curl http://npmjs.org/install.sh | sh
這里詳解一下這句命令的意思，curl http://npmjs.org/install.sh是通過(guò)curl命令獲取這個(gè)安裝shell腳本，按后通過(guò)管道符| 將獲取的腳本交由sh命令來(lái)執(zhí)行。這里如果沒(méi)有權(quán)限會(huì)安裝不成功，需要加上sudo來(lái)確保權(quán)限
yarn：
brew install yarn mac下使用該命令即可安裝，yarn的安裝也是很簡(jiǎn)單的
其他平臺(tái)參https://yarn.bootcss.com/docs/install.html
Puppeteer：
Puppeteer因?yàn)槭且粋€(gè)npm的包，所以安裝很簡(jiǎn)單，你可以通過(guò)npm或者yarn的方式去安裝：
npm i puppeteer/yarn add puppeteer
三、使用與例子
本篇內(nèi)容主要介紹啟動(dòng)實(shí)例以及debug相關(guān)
Class：Puppeteer
Puppeteer 模塊提供了一種啟動(dòng) Chromium 實(shí)例的方法。
1.下面就是使用 Puppeteer 進(jìn)行自動(dòng)化的一個(gè)典型示例：
上述代碼通過(guò)puppeteer.launch方法生成了一個(gè)browser的實(shí)例，此時(shí)在默認(rèn)情況下是headless模式，對(duì)應(yīng)于瀏覽器，接著通過(guò)browser.newPage方法去打開(kāi)一個(gè)tab，然后使用page.goto打開(kāi)一個(gè)url，接著使用page.screenshot()進(jìn)行截圖，最后browser.close關(guān)閉browser。
2.通過(guò)launch的options設(shè)置參數(shù)
上述代碼通過(guò)puppeteer.launch({headless:false})此時(shí)headless模式是關(guān)閉的，但我們執(zhí)行代碼的時(shí)候回發(fā)現(xiàn)此時(shí)會(huì)打開(kāi)一個(gè)chrome，并且可以看到執(zhí)行的步驟，這在我們平時(shí)的調(diào)試過(guò)程中是非常重要的。
上述代碼中在options中加了slowMo:250,減慢速度，slowMo選項(xiàng)以指定的毫秒減慢Puppeteer的操作。這種情況下執(zhí)行的每個(gè)步驟都會(huì)變緩慢，當(dāng)然對(duì)于人眼而言250ms是很難分出差別的，你可以把slowMo設(shè)置成2500，這時(shí)候你就能清晰的看出做了什么。
3.控制臺(tái)輸出
上述代碼通過(guò)await page.evaluate(() => console.log(url is ${location.href}));在控制臺(tái)把url打印出來(lái)，evaluate是個(gè)非常強(qiáng)大的函數(shù)，來(lái)看下這個(gè)函數(shù)：
page.evaluate(pageFunction, …args)
? pageFunction <[function]|[string]> 要在頁(yè)面實(shí)例上下文中執(zhí)行的方法
? ...args <…[Serializable]|[JSHandle]> 要傳給 pageFunction 的參數(shù)
? 返回: <[Promise]<[Serializable]>> pageFunction執(zhí)行的結(jié)果
如果pageFunction返回的是[Promise]，page.evaluate將等待promise完成，并返回其返回值。
如果pageFunction返回的是不能序列化的值，將返回undefined
來(lái)看下事例：
給pageFunction傳參數(shù)示例：
const result = await page.evaluate(x => {
return Promise.resolve(8 * x);}, 7); // 7 可以是你自己代碼里任意方式得到的值
console.log(result); // prints "56"
也可以傳一個(gè)字符串：
console.log(await page.evaluate('1 + 2')); // prints "3"
const x = 10;
console.log(await page.evaluate(
1 + ${x})); // prints "11"
可以通過(guò)該函數(shù)向頁(yè)面注入我們的函數(shù)，這樣就有了無(wú)限可能
4.調(diào)試技巧
對(duì)于在測(cè)試中的調(diào)試，在puppeteer中可以在launch中配置headless為false關(guān)掉無(wú)界面模式，查看瀏覽器顯示的內(nèi)容這是一種調(diào)試方式，同是通過(guò)添加slowMo的方式也是為調(diào)試提供了方便。除了這些我們還可以打開(kāi)debug的方式進(jìn)行調(diào)試。直接上代碼
上述代碼中通過(guò) await puppeteer.launch({devtools: true});打開(kāi)調(diào)試模式。
我們可以看到在打開(kāi)的界面中可以通過(guò)paused in debugger 中的執(zhí)行或者跳過(guò)對(duì)代碼進(jìn)行任意的操作了。
今天就寫(xiě)到這里吧，這里給出git源代碼的地址 https://github.com/SummerGancf/puppeteerDemo.git
如何執(zhí)行代碼呢？？？
1.通過(guò)git clone https://github.com/SummerGancf/puppeteerDemo.git把代碼checkout在本地。
2.接著進(jìn)入代碼目錄執(zhí)行yarn install該命令會(huì)自動(dòng)的安裝相關(guān)的依賴，當(dāng)然這是在你吧文章中的環(huán)境相關(guān)的都安裝好了的情況下。
3.最后執(zhí)行 node package/launchSetting.js 這會(huì)執(zhí)行本篇文章中的所有的實(shí)例，如果你不想執(zhí)行所有的話可以對(duì)它進(jìn)行注釋，如果有疑問(wèn)歡迎咨詢。
