CukeTest+Puppeteer的Web自動化測試（二）

wuwei丶發表於2020-05-24
Web

　　上一篇我們講了CukeTest+Puppeteer的相關理論知識，帶大家認識熟悉了CukeTest如何執行與如何編寫劇本，Puppeteer大體的理論體系與如何結合使用，但一直沒有給大家進行上手實戰操作。這一篇，我就帶大家一起來實戰燥起來~~~

測試頁面以百度首頁為例，我們用CukeTest+Puppeteer編寫功能測試Demo，將上篇講的相關知識點結合起來練手。

CukeTest官方文件：http://www.cuketest.com/zh-cn/

Puppeteer官方文件：https://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',百度查詢並截圖儲存結果
    假如開啟百度首頁"https://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 });

 

相關文章