10分鐘快速入門UI自動(dòng)化-Puppeteer

這次帶大家入門的是轉(zhuǎn)轉(zhuǎn)內(nèi)部實(shí)現(xiàn)UI自動(dòng)化測(cè)試的一種方案：?Puppeteer+Mocha

目前應(yīng)用于轉(zhuǎn)轉(zhuǎn)圖書、奢侈品、商業(yè)等業(yè)務(wù)等多個(gè)Web/H5業(yè)務(wù)的線上流程監(jiān)控；

先簡(jiǎn)單介紹一下：

Mocha?是JavaScript的一種單元測(cè)試框架

Puppeteer?是一個(gè) Node 庫(kù)，它提供了一個(gè)高級(jí) API 來通過 DevTools 協(xié)議控制 Chromium

相較于大家熟悉的Appium方案，通過Appium 服務(wù)器 控制已連接的手機(jī)設(shè)備 進(jìn)行UI操作

Puppeteer+Mocha?的方案，就是在Mocha框架里 寫一些js代碼, 調(diào)用Puppeteer 啟動(dòng)一個(gè)瀏覽器并操縱它完成你的UICase的操作

工欲善其事必先利其器，首先把所需要的工具裝好

1. 安裝node

node?-v

2. 安裝npm （node安裝時(shí)會(huì)自動(dòng)安裝npm,如果已安裝node，此步請(qǐng)忽略)

安裝最新版本：

npm?install?npm@latest?-g

查看版本：

npm?-v

3. 安裝cnpm (npm下載包失敗，選擇cnpm安裝)

執(zhí)行命令：

sudo?npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org?（設(shè)置淘寶鏡像）

驗(yàn)證:

cnpm?-v?

4. 新建一個(gè)node工程

npm?i?--save?express

此時(shí)根目錄會(huì)出現(xiàn): package.json、package-lock.json 和 node_modules?文件夾

"mocha":?"^8.3.2",
"puppeteer":?"^1.18.0",

然后執(zhí)行 以下命令，安裝puppeteer和mocha

npm?install

工具裝好了，case寫起來！！

先小試牛刀一下，寫一個(gè)簡(jiǎn)單的demo

創(chuàng)建一個(gè)js文件，編寫以下代碼

const?puppeteer?=?require('puppeteer');

async?function?test()

{

//?創(chuàng)建一個(gè)瀏覽器實(shí)例?Browser?對(duì)象

??const?browser?=?await?puppeteer.launch({

????args:?['--no-sandbox',?'--disable-setuid-sandbox'],?//開啟無頭

????headless:false,

????ignoreHTTPSErrors:?true,

??});

//?通過瀏覽器實(shí)例?Browser?對(duì)象創(chuàng)建頁(yè)面?Page?對(duì)象

??const?page?=?await?browser.newPage();

//?通過url參數(shù)打開指定的頁(yè)面

??await?page.goto('[https://m.zhuanzhuan.com/open/ZZBook/index.html?needHideHead=3#/book-home](https://m.zhuanzhuan.com/open/ZZBook/index.html?needHideHead=3#/book-home)');

//?對(duì)頁(yè)面進(jìn)行截圖

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

//?關(guān)閉瀏覽器

??await?browser.close();

};

module.exports?=?test

test()

運(yùn)行這個(gè)demo，你就完成了一次簡(jiǎn)單的UICase

接下來就可以在demo的基礎(chǔ)上編輯自己的case

• 第一步：獲取你要操作的元素的selector
• 在瀏覽器頁(yè)面 按 F12 打開調(diào)試工具 或者 鼠標(biāo)右鍵菜單-點(diǎn)擊“檢查”，查看頁(yè)面控件樹
• 選擇對(duì)應(yīng)的元素，在控件樹中-鼠標(biāo)右鍵 - 復(fù)制copy -selector
• 第二步：根據(jù)下列對(duì)應(yīng)的puppeteer對(duì)應(yīng)的api，豐富你的uicase的操作

//頁(yè)面返回
page.goBack([options])

//等待xx元素
page.waitForSelector(selector[,?options])

//跳轉(zhuǎn)
page.goto(url[,?options])

//設(shè)置cookies
page.setCookie(...cookies)

//觸摸點(diǎn)擊操作
page.tap(selector)

//鼠標(biāo)點(diǎn)擊操作
page.click(selector[,?options])

//Puppeteer中文手冊(cè)
//https://zhaoqize.github.io/puppeteer-api-zh_CN/

反復(fù)使用以上兩步，就能實(shí)現(xiàn)你自己的UICase啦

另外分享一個(gè)小白福利Chrome插件：puppeteer recorder

它能自動(dòng)錄制頁(yè)面上的操作，生成puppeteer 代碼

• 訪問https://cloud.tencent.com/developer/article/1470481?下載插件
• 安裝到Chrome拓展程序里，開啟它

  

• 開啟后，在瀏覽器的右上角有一個(gè)錄像機(jī)的標(biāo)簽，點(diǎn)擊它并開始錄制，窗口顯示Recording...

  

• 操作頁(yè)面執(zhí)行你的case流程，操作完成之后點(diǎn)擊錄像機(jī)圖標(biāo)，停止錄制，復(fù)制生成puppeteer代碼即可

  

case已經(jīng)會(huì)寫了，那么我們使用mocha測(cè)試框架將case優(yōu)美的執(zhí)行起來吧

因?yàn)閙ocha默認(rèn)執(zhí)行test目錄下的文件，所以在test目錄下新建一個(gè)caseList.js，作為執(zhí)行文件 文件內(nèi)容格式如下：

const?case1?=?require('../cases/demo')

//?describe定義測(cè)試套件名稱
describe('用例集合',function()?{

??before(function()?{console.log('開始執(zhí)行用例啦')});
??
??//?it定義單個(gè)測(cè)試用例
??it('case1',async?function()?{

????[//this.timeout](//this.timeout)(0);

????await?case1();});

??it('case2',async?function()?{

????[//this.timeout](//this.timeout)(0);

????await?case1();});

??after(function()?{console.log('用例都執(zhí)行完啦')});

});

Mocha同時(shí)提供了only，skip等控制用例執(zhí)行方法和鉤子函數(shù)before,after等。

在項(xiàng)目路徑下執(zhí)行mocha命令:

mocha?test/caseList

就能得到一個(gè)簡(jiǎn)潔明了的測(cè)試報(bào)告了

如果覺得這個(gè)報(bào)告太簡(jiǎn)潔明了了，那么mocha還可以生成可視化報(bào)告哦 先安裝可視化報(bào)告插件

?npm?install?--save-dev?mochawesome?

再執(zhí)行

mocha?test/caseList?--reporter?mochawesome

就能在case執(zhí)行完之后，在mochawesome-report目錄下生成HTML的測(cè)試報(bào)告

到這里，你就能使用puppeteer+mocha編輯自己uicase，并生成不錯(cuò)的測(cè)試報(bào)告啦

最后

Puppeteer、Mocha 的功能不僅僅如此

編寫更復(fù)雜的場(chǎng)景case、實(shí)現(xiàn)提效小工具、遠(yuǎn)程自動(dòng)執(zhí)行監(jiān)控，都能完成，大家一起學(xué)起來，玩起來吧~