如何使用Node爬蟲利器Puppteer進行自動化測試

文：華爲雲DevCloud 樂少

一、背景

1.1 前端自動化測試較少

前端瀏覽器衆多致使頁面兼容性問題比較多，另外界面變化比較快，一個月內可能頁面改版兩三次，這樣致使對前端自動化測試較少，你們也不是很care。18年英國的一位開發者作過一些前端測試工具調查如圖1-1所示。從圖中能夠發現有43%的用戶未使用過任何前端測試工具。

圖1-1

1.2 基於Puppteer的自動化測試

Puppeteer（中文翻譯爲「木偶」）是Google

Chrome團隊官方的無界面（Headless）Chrome工具。這是一個node庫。提供高級API來控制DevTools協議無頭版Chrome。Chrome的DevTools提供了很是之多和很是方便的頁面工具，而Puppteteer則把這種能力經過Headless方式提供出來，能夠在Linux操做能力，必將成爲web應用的自動化測試行業標杆，場景很是之多。

1.3 解決實際問題

筆者是在華爲雲DevCloud的前端團隊，團隊採用前端微服務架構，也就是說，有不少前端portal，同時每一個portal有若干個前端開發進行開發維護，開發之間溝通交流較少，並且仍是在異地進行開發。但每一個服務同屬於DevCloud產品，因此頁面體驗、場景、控件、術語都須要保持一致，若是經過人工的方式來對每一個服務頁面進行檢測是十分困難的一件工做。

二、Puppeteer能作什麼

能夠這麼說，在chrome瀏覽器手動能完成的大部分事情可使用puppteteer完成！你能夠操做頁面的dom、抓取內容等等。另外puppeteer還能夠：

生成頁面的截圖和PDF；

抓取SPA並生成預先呈現的內容（SSR）

從網站上抓取你所想要的內容。自動錶單提交，UI測試，鍵盤輸入等等

建立一個最新的自動化測試環境，使用最新的JavaScript和瀏覽器功能，直接在最新版的chrome中運行測試。

三、Puppeteer版本

我最先使用的版本是puppetter@1.5.0版本，經過npm i pupptetter下載。裏面包含自帶瀏覽器版本。如圖所示3-1所示。

圖3-1 puppeteer自帶瀏覽器

在版本1.7.0以後，google把puppeteer拆成puppteteer-core和瀏覽器兩部分。也就是說瀏覽器須要本身手動去下載。下載地址能夠經過華爲雲鏡像站搜索chromium進行匹配下載，如圖3-2所示。

圖3-2 puppteteer瀏覽器chrome下載

固然不一樣的puppeteer-core版本匹配不一樣的瀏覽器版本，否則會有報錯。版本匹配如圖2-3所示。你們也能夠在官網github上進行查看：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

圖3-3 puppeteer版本匹配

四、 輕鬆入門

這部分包括windows和linux上的配置和運行。由於最終是須要部署到linux服務上去。

4.1 簡單實現

若是windows下使用puppeteer很是容易，在package.json加上下面一行代碼：

"puppeteer-core":"1.13.0",

下面是一點簡單截頻實現：

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://example.com');

await page.screenshot({path: 'example.png'});

await browser.close();

})();

4.2 基本語法

這些是puppeteer一些基礎的語法，能夠知足一些經常使用功能。

async/await

看官方的例子就能夠看出來，幾乎全部的操做都是異步的，若是堅持使用回調或者Promise.then 寫出來的代碼會很是醜陋且難讀，Puppeteer 官方推薦的也是使用高版本 Node 用 async/await 語法

async確保了函數返回一個promise，即便其中包含非promise。夠簡單了吧？可是不只僅只是如此，還有另外一個關鍵詞await，只能在async函數裏使用，一樣，它也很cool。

關鍵詞await可讓JavaScript進行等待，直到一個promise執行並返回它的結果，JavaScript纔會繼續往下執行。

let value = await promise

查找元素

這是 UI 自動化測試最經常使用的功能了，Puppeteer 的處理也至關簡單

page.$(selector)

page.$(selector)

這個在底層依然是執行document.querySelector和document.querySelectorAll。但返回的不是dom對象。而是封裝的。

獲取DOM屬性

咱們寫爬蟲爬取頁面圖片列表，感受能夠經過

page.$$(selector) 獲取到頁面的元素列表，而後再去轉成 DOM 對象，獲取 src，而後並不行，想作對獲取元素對應 DOM

屬性的獲取，須要用專門的 API：page.$eval(selector, pageFunction[, ...args])

Evaluate

若是咱們有一些及其個性的需求，沒法經過 page.$() 或者 page.$eval() 實現，能夠用大招——evaluate。以下所示：

const result = await page.evaluate(() => {

return Promise.resolve(8 * 7);

});

console.log(result); // prints "56"

const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));

aWindowHandle; // Handle for the window object. 至關於把返回對象作了一層包裹

性能

經過 page.getMetrics() 能夠獲得一些頁面性能數據。

Timestamp The timestamp when the metrics sample was taken.

Documents 頁面文檔數

Frames 頁面 frame 數

JSEventListeners 頁面內事件監聽器數

Nodes 頁面 DOM 節點數

LayoutCount 頁面 layout 數

RecalcStyleCount 樣式重算數

LayoutDuration 頁面 layout 時間

RecalcStyleDuration 樣式重算時長

ScriptDuration script 時間

TaskDuration 全部瀏覽器任務時長

JSHeapUsedSize JavaScript 佔用堆大小

JSHeapTotalSize JavaScript 堆總量

會返回以下數據：

{

Timestamp: 382305.912236,

Documents: 5,

Frames: 3,

JSEventListeners: 129,

Nodes: 8810,

LayoutCount: 38,

RecalcStyleCount: 56,

LayoutDuration: 0.596341000346001,

RecalcStyleDuration: 0.180430999898817,

ScriptDuration: 1.24401400075294,

TaskDuration: 2.21657899935963,

JSHeapUsedSize: 15430816,

JSHeapTotalSize: 23449600

}

更多功能請查看puppeteer的github官網。

https://github.com/GoogleChrome/puppeteer#usage

4.3 Linux安裝Puppeteer

windows下調試好的項目，在linux上運行，仍是須要費一番功夫，須要配置更多的參數。以下：

1、下載相關依賴包，這些依賴包都是chrome運行所須要的。

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64

libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64

alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi

xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

2、字體安裝：

yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

3、增長—no-sandbox –disable-setuid-sandbox

const browser = await puppeteer.launch({args:['--no-sandbox', '--disable-setuid-sandbox']})

筆者的工做環境比較複雜，中間由於權限問題致使運行報錯，這個時候須要增長一些代理設置。

五、puppeteer體驗度量實踐

前面主要是講一些puppeteer基本功能和實踐。那咱們基於puppeteer怎麼解決實際問題的呢。

5.1 規範的創建

在使用puppeteer以前，須要先梳理各微服務使用的場景，以及術語規範等，梳理清楚以後在來進行工具自動化。首先咱們參照尼爾森可用性原則。

上面這位略顯陰柔的帥哥就是尼爾森（Jakob Nielsen），人機交互學博士。他經過本身的郵件列表以及網站，向成千上萬的web設計師傳授web易用性方面的只是。是web設計師眼中的頂尖領袖。Jakob

Nielsen在1995年發表了「尼爾森十大可用性原則」。

在尼爾森十大原則裏有一項是UI一致性原則，咱們基於這個梳理出DevCloud的一些細化的點，並給出每一個測試因子的權重和分值，計算出各個服務的UI體驗，最後換算成百分值，最後加權計算服務體驗總分。圖5-1就是咱們梳理出來的部分規則。

圖5-1 測試分類

5.2 具體使用puppteer

在上面創建規則以後，咱們再針對每一個檢測項評估是否能夠量化，怎麼量化。好比咱們想檢測組件的覆蓋度。圖4-2是咱們產品所使用的公共組件庫。都是以ave-開頭，checkbox的命名就是ave-button。那普通的checkbox則是以input[type=checkbox]來寫的。咱們針對每一個服務去掃面線上各個頁面，看使用ave-check和使用原生input

checkbox的數量，這樣就能統計出組件庫的覆蓋度。最終驅動各服務去整改。

經過組件的形式使得各個服務體驗基本一致。

圖5-2 DevCloud組件庫

最終經過圖表的形式來進行展現。如圖5-3所示。

圖5-3 ave-checkbox覆蓋度

從圖上咱們能夠看到ave-checkbox獲得整改。

經過以上的方式，咱們能夠在組件、樣式、以及體驗旅程方面都能很好的把握整個產品設計是否與咱們預期是一致的。

咱們團隊在自動化方面一直在探索，除了在前端測試、接口測試以及編譯構建方面也一直聽從可以使用工具提高效率，毫不靠人工來進行檢測的理念，不斷的實踐，極大的減小了人力成本。固然這些能力也一直是對外開放的：華爲雲軟件開發服務DevCloud。也歡迎你們來建議和探討。

​​​​​​​六、 參考資料及擴展閱讀材料

The Front-End Tooling Survey 2018 - Results

尼爾森可用性十大原則

https://www.jianshu.com/p/53daaa5ba794

華爲雲DevCloud做爲一站式雲端DevOps平臺，集成華爲近30年研發實踐和前沿理念，面向開發者提供研發工具服務，讓軟件開發簡單高效。現支持5人如下額度範圍內，能夠無償使用，而且能夠預定免費的產品演示和技術交流，詳情查看華爲雲官網