CukeTest+Puppeteer的Web自動化測試
CukeTest+Puppeteer的Web自動化測試
一、初識BDD、Cucumber（黃瓜）、CukeTest
行為驅動開發(Behavior Driven Development，BDD)。行為驅動開發能夠保持文檔和測試腳本的一緻性，便于維護、也便于業務人員和技術人員溝通，始終保持應用軟體的技術實作反映業務的需求。
Cucumber是行為驅動開發最流行的一個架構，它使用自然語言描述的行為來驅動測試代碼，也支援多種語言，如Ruby、Python、JavaScript、Java等。
Cucumber源碼：https://github.com/cucumber/cucumber-js
CukeTest是開發測試自動化腳本的一個靈巧友善的工具。使用者可以使用此工具快速建立BDD（行為驅動開發, Behavior Driven Development）測試腳本。它內建了Cucumber架構和JavaScript，可視化編輯，調試功能，并有多個html報告模闆可供選擇。同時它能夠
實作了各種類型應用的自動化，包括Web、Windows、移動裝置、API等等。
CukeTest使用文檔：http://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或安卓應用測試項目
選擇Basic模闆，建立項目,CukeTest操作頁面
例：
1、劇本
CukeTest是一個強大的劇本檔案(或特性檔案)編輯器。劇本檔案字尾名為*.feature，以(.feature)結尾的文檔叫Gherkin文檔或劇本文檔。在編輯劇本檔案時，它提供了2種編輯模式，可視模式和文本模式。
重要知識點：
1、編輯模式：可視模式和文本模式
2、場景：添加場景、編輯場景、更改場景類型（背景、場景、場景大綱）
3、背景：背景允許你在單個劇本中的所有場景中添加“背景”。背景就是一個無标題的場景，包含許多步驟。不同之處在于它們運作的時機：背景在每個場景之前運作，但是在場景的“Before” hook(鈎子函數)之後運作。
4、場景大綱：場景大綱通常用來實作資料驅動的自動化測試
例：
5、步驟：添加步驟（追加、插入）、編輯步驟、文檔字元串（步驟的注釋描述定義）、步驟表
重要知識點：
（1）文檔字元串資料将作為參數傳遞給步驟定義
（2）步驟表是步驟中的表格資料，它将作為參數傳遞給步驟定義
（3）可以選擇在步驟中添加文檔字元串(Doc String) 或步驟表格(Table) ，二者隻能選其一。
6、标簽：标簽過濾、執行時标簽過濾。（當有很多場景的時候，我們有時隻需要運作其中的個别場景，我們可以給不同的場景或劇本添加标簽，然後運作的時候可通過标簽過濾想要運作的場景。）
例：
标簽表達式：http://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); 逾時：http://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（單頁面應用程式）并生成預渲染内容（即“s-s-r”（伺服器端渲染）。
- 自動化表單送出、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
| 方法名稱 | 方法說明 |
| puppeteer.launch(options) | 建立一個Browser執行個體。建立浏覽器執行個體Brower對象，啟動浏覽器 |
class：Browser
| 方法名稱 | 方法說明 |
| browser.newPage() | 建立一個 Page 執行個體。通過Brower對象建立頁面Page執行個體對象 |
| browser.close() | 關閉浏覽器 |
| browser.pages() | 擷取所有打開的Page執行個體。打開多個Tab頁處理時切換page操作頁面 |
class：Page
| 方法名稱 | 方法說明 |
| page.goto(url) | 打開指定網站 |
| page.screenshot(options) | 目前頁面截圖 |
| page.$(selector) | 擷取單個元素 |
| page.$$(selector) | 擷取一組元素 |
| page.click() | 點選一個元素 |
| page.waitFor() | 設定等待或逾時時間 |
| page.evaluate(pageFunction, …args) | pageFunction 表示要在頁面執行的函數， args 表示傳入給 pageFunction 的參數。如引用外部JS時使用 |