CukeTest+Puppeteer的Web自動化測試（二）
- 2020 年 5 月 24 日
- 筆記
- CukeTest, CukeTest+Puppeteer, Puppeteer
上一篇我們講了CukeTest+Puppeteer的相關理論知識，帶大家認識熟悉了CukeTest如何運行與如何編寫劇本，Puppeteer大體的理論體系與如何結合使用，但一直沒有給大家進行上手實戰操作。這一篇，我就帶大家一起來實戰燥起來~~~
測試頁面以百度首頁為例，我們用CukeTest+Puppeteer編寫功能測試Demo，將上篇講的相關知識點結合起來練手。
CukeTest官方文檔：//www.cuketest.com/zh-cn/
Puppeteer官方文檔：//zhaoqize.github.io/puppeteer-api-zh_CN/
一、實例1
功能測試：參數化形式打開多個網頁
1、打開CukeTest我們來新建一個空項目，安裝Node和Puppeteer，注意（兩者版本兼容問題），上文中已提到過的。
2、編輯劇本相關參數
3、編寫劇本對應的腳本
4、運行
如下圖
劇本的文本如下
# language: zh-CN 功能: 百度首頁 打開百度首頁 @openPage 場景大綱: 頁面打開 假如打開百度首頁"<param1>" @pageOne 例子: | param1 | | https://www.baidu.com/ | | https://www.runoob.com/ | @pageTwo 例子: | param1 | | https://www.csdn.net/ | | https://www.cnblogs.com/ | @baiduSearch 場景: 百度首頁搜索 打開百度首頁，搜索'puppeteer',百度查詢並截圖保存結果 假如打開百度首頁"//www.baidu.com/" 當輸入"puppeteer",點擊百度一下 那麼截圖保存搜索結果
劇本對應的腳本
1 //引用cucumber和puppeteer，使用各自相關的API 2 const { 3 Given, 4 When, 5 Then 6 } = require('cucumber'); 7 const puppeteer = require('puppeteer'); 8 //默認情況下，非同步hook和步驟在5000毫秒後超時，這個可以全局修改超時時長 9 const { 10 setDefaultTimeout 11 } = require('cucumber'); 12 setDefaultTimeout(60 * 1000); 13 //變數定義 14 let browser = null; 15 let page = null; 16 17 //// 你的步驟定義 ///// 18 19 Given("打開百度首頁{string}", async function (arg1) { 20 /* 21 當 Puppeteer 連接到一個 Chromium 實例的時候會通過 puppeteer.launch 創建一個 Browser 對象。 22 創建一個 Browser 類的實例對象 23 executablePath:可運行 Chromium 或 Chrome 可執行文件的路徑 24 headless: 是否以 無頭模式 運行瀏覽器 25 defaultViewport: null, args: ['--start-maximized']:視圖窗口最大化 26 defaultViewport選項設置為null以禁用800x600解析度。它需要最大解析度 27 ignoreDefaultArgs: ['--enable-automation']: 28 禁止展示chrome左上角有個Chrome正受自動軟體控制，避免puppeteer被前端JS檢測到 29 */ 30 browser = await puppeteer.launch({ 31 executablePath: 'D:\\Demo\\node_modules\\puppeteer\\.local-chromium\\win64-722234\\chrome-win\\chrome.exe', 32 headless: false, 33 defaultViewport: null, 34 args: ['--start-maximized'], 35 ignoreDefaultArgs: ['--enable-automation'] 36 }); 37 //創建一個新的Page對象 38 page = await browser.newPage(); 39 //打開鏈接 40 await page.goto(arg1); 41 //等待3s 42 await page.waitFor(3000); 43 //關閉chromium 44 await browser.close(); 45 });
運行：瀏覽器按順序打開劇本中編輯的四個網頁，打開一個網頁後關閉瀏覽器，緊接著打開下一個。
二、實例2
功能：打開百度首頁搜索，並保存截圖。
在基於上面的實例1，接著編寫場景2，如下圖
場景對應的腳本：
1 //場景2：百度首頁搜索 2 When("輸入{string},點擊百度一下", async function (arg1) { 3 //匹配定位元素，定位輸入框元素,並輸入'puppeteer' 4 await page.type('#kw', arg1); 5 //等待2s 6 await page.waitFor(2000); 7 //點擊「百度一下」按鈕 8 await page.click('#su'); 9 //等待3s 10 await page.waitFor(3000); 11 }); 12 13 Then("截圖保存搜索結果", async function () { 14 //截圖並保存，截圖路徑為path，截圖類型可以是 jpeg 或者 png，默認 'png'. 15 await page.screenshot({ path: 'baiduHomeSearch.png' }); 16 //關閉chromium 17 await browser.close(); 18 });
