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（單頁面應用程式）並生成預渲染內容（即“SSR”（伺服器端渲染）。
- 自動化表單提交、UI測試、鍵盤輸入等。
- 建立最新的自動化測試環境。使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中執行測試。
- 捕獲網站的時間線跟蹤，以幫助診斷效能問題。
- 測試Chrome擴充套件程式。
Puppeteer官方文件：https://zhaoqize.github.io/puppeteer-api-zh_CN/
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 puppeteer@2.1.1
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時使用 |