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

• 2020 年 5 月 22 日
• 筆記
• CukeTest, CukeTest+Puppeteer, Puppeteer

CukeTest+Puppeteer的Web自動化測試

一、初識BDD、Cucumber（黃瓜）、CukeTest

　　行為驅動開發(Behavior Driven Development，BDD)。行為驅動開發能夠保持文檔和測試腳本的一致性，便於維護、也便於業務人員和技術人員溝通，始終保持應用軟體的技術實現反映業務的需求。

Cucumber是行為驅動開發最流行的一個框架，它使用自然語言描述的行為來驅動測試程式碼，也支援多種語言，如Ruby、Python、JavaScript、Java等。

　　Cucumber源碼：//github.com/cucumber/cucumber-js

　　CukeTest是開發測試自動化腳本的一個靈巧方便的工具。用戶可以使用此工具快速創建BDD（行為驅動開發, Behavior Driven Development）測試腳本。它集成了Cucumber框架和JavaScript，可視化編輯，調試功能，並有多個html報告模板可供選擇。同時它能夠

實現了各種類型應用的自動化，包括Web、Windows、移動設備、API等等。

　　CukeTest使用文檔：//www.cuketest.com/zh-cn/

二、Cucumber如何運行的？

• Features：劇本（測試項的目運行文件都在features目錄下，以 .feature 結尾的為劇本文件，一個劇本文件中可以包含多個場景，一個場景包含多個操作步驟。）
• Scenarios：場景（每個劇本可以有一個或多個場景）
• Steps：步驟（每個場景由一個或多個步驟組成）
• Step Definitions：步驟定義（步驟具體程式碼實現方法或定義，.feature 文件中描述的業務步驟要 運行起來，需要根據業務場景定義操作行為 。）
• Support Code：支援程式碼（公共方法或函數可提出作調用）
• Automation Library：自動化庫（自動化API支援）
• Business Facing：面向業務（自然語言表示的測試用例，開發可讀懂）
• Technology Facing：面向技術（技術程式碼語言表示的測試程式碼，開發可讀懂）

 三、開發工具介紹

　　CukeTest和Puppeteer

　　Cucumber用自然語言結合JavaScript編寫的自動化測試腳本。因為它們是用自然語言編寫的，所以你團隊中的任何人都可以閱讀它們，而且可以用它們來幫助改善團隊之間的溝通、協作和信任。

　　Puppeteer是一個Node庫，它提供了一個高級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。Puppeteer 默認以 headless模式運行，但是可以通過修改配置文件運行「有頭」模式。

四、CukeTest

創建新項目時，5個項目模板可選擇：

　　Basic：基本的Cucumber.js項目

　　Web：使用selenium-webdriver的Web測試項目

　　API：API測試項目

　　Windows: Windows測試項目

　　Mobile: iOS或Android應用測試項目

選擇Basic模板，新建項目,CukeTest操作頁面

例：

1、劇本

　　CukeTest是一個強大的劇本文件(或特性文件)編輯器。劇本文件後綴名為*.feature，以(.feature)結尾的文檔叫Gherkin文檔或劇本文檔。在編輯劇本文件時，它提供了2種編輯模式，可視模式和文本模式。

重要知識點：

　　1、編輯模式：可視模式和文本模式

　　2、場景：添加場景、編輯場景、更改場景類型（背景、場景、場景大綱）

　　3、背景：背景允許你在單個劇本中的所有場景中添加「背景」。背景就是一個無標題的場景，包含許多步驟。不同之處在於它們運行的時機：背景在每個場景之前運行，但是在場景的「Before」 hook(鉤子函數)之後運行。

　　4、場景大綱：場景大綱通常用來實現數據驅動的自動化測試

例：

　　5、步驟：添加步驟（追加、插入）、編輯步驟、文檔字元串（步驟的注釋描述定義）、步驟表 

重要知識點：

　　（1）文檔字元串數據將作為參數傳遞給步驟定義

　　（2）步驟表是步驟中的表格數據，它將作為參數傳遞給步驟定義

　　（3）可以選擇在步驟中添加文檔字元串(Doc String) 或步驟表格(Table) ，二者只能選其一。

　　6、標籤：標籤過濾、執行時標籤過濾。（當有很多場景的時候，我們有時只需要運行其中的個別場景，我們可以給不同的場景或劇本添加標籤，然後運行的時候可通過標籤過濾想要運行的場景。）

例：

　　標籤表達式：//www.cuketest.com/zh-cn/cucumber/tag-expressions.html

　　標籤表達式是一個內嵌的布爾表達式。

例：運行配置文件，標籤過濾只運行openPage和pageTwo場景。

2、程式碼編輯

　　劇本對應的測試腳本的編寫。

重要知識點：

　　1、程式碼/劇本匹配：劇本步驟與程式碼的匹配

　　2、具體步驟程式碼的實現（cucumber，puppeteer的API，JavaScript等）

　　3、步驟定義：

步驟定義是Gherkin語言寫的劇本文件和實際被測試的系統之間的粘合劑. 使用 Given, When, Then. 正則表達式中的匹配組匹配到的結果會作為參數傳遞給步驟定義。

　　4、步驟修改後的程式碼更新：跳轉到原先的定義、更新原先的定義程式碼、創建新的定義

　　5、npm包的管理：包管理器（添加/刪除）

　　注意：新添加的npm包自動配置用最新的版本，如果您對某個包的版本有特殊要求，請在包列表保存後，手動編輯package.json, 設定需要的版本。

　　npm包管理新增後，還得進行npm install 的安裝。並不是直接就安裝好。只是一個目錄而已。或直接通過npm install安裝，不用npm包管理

　　6、程式碼工具箱：cucumber一些自帶封裝的方法（一般用不到，我們用的puppeteer）和cucumber的hook函數

　　7、智慧提示和自動完成

　　8、驗證項目：可以幫助用戶檢查項目中可能出現的各種錯誤或警告

例：

　　9、Hooks(鉤子）：Hooks(鉤子) 用於在每個場景之前和之後設置和清理環境

重點知識點：

　　（1）如果定義了多個Before hooks，會按它們被定義的順序執行。

　　（2）多個 After hooks 按照它們被定義的相反順序執行。

　　（3）BeforAll / AfterAll 。所有場景之前或之後完成一些設置/清除工作

　　10、超時：默認情況下，非同步hook和步驟在5000毫秒後超時。這個可以全局修改：

var {setDefaultTimeout} = require('cucumber');
setDefaultTimeout(60 * 1000);

　　超時：//www.cuketest.com/zh-cn/cucumber/support_files/timeouts.html

　　執行及測試報告

　　CukeTest的可視化介面使你能夠以多種方式運行您的項目或你的部分腳本

重要知識點：

　　1、運行項目：運行單個劇本、運行單個場景、運行單個JS文件等

　　2、運行配置

　　 3、執行測試報告

五、Puppeteer

　　Puppeteer是NPM庫，它提供了NodeJS高級API來控制Chrome。Puppeteer 默認以無頭（無介面）方式運行，但也可以配置為運行有介面的Chrome。

使用Puppteer 可以自動化在瀏覽器中手動執行的大多數事情。比如：

• 生成頁面的螢幕截圖和PDF。
• 抓取SPA（單頁面應用程式）並生成預渲染內容（即「SSR」（伺服器端渲染）。
• 自動化表單提交、UI測試、鍵盤輸入等。
• 創建最新的自動化測試環境。使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中運行測試。
• 捕獲網站的時間線跟蹤，以幫助診斷性能問題。
• 測試Chrome擴展程式。

Puppeteer安裝

　　在項目中安裝puppeteer：npm install puppeteer

　　運行：npm install puppeteer，安裝的是puppeteer最新的版本

 重點注意：版本兼容問題

　　當puppeteer3.0.0和node12.13.0時，運行有報錯，提示讓你把node更新至最新版本。最新node為14，更新node版本可能會導致其他問題。建議安裝puppeteer時用2.1.1。

　　兼容報錯：(node:13024) ExperimentalWarning: The fs.promises API is experimental

　　命令：npm install [email protected]

Puppeteer常用的API

class：Puppeteer

class：Browser

class：Page