CukeTest+Puppeteer的Web自動化測試一

1、初識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/

2、Cucumber如何運行的？

 

 

 

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

3、開發工具介紹

CukeTest和Puppeteer

Cucumber用天然語言結合JavaScript編寫的自動化測試腳本。由於它們是用天然語言編寫的，因此你團隊中的任何人均可以閱讀它們，並且能夠用它們來幫助改善團隊之間的溝通、協做和信任。

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

4、CukeTest

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

Basic：基本的Cucumber.js項目

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

API：API測試項目

Windows: Windows測試項目

Mobile: iOS或安卓應用測試項目

 

 

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

例：

 

 

一、劇本

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

 

重要知識點：

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

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

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

四、場景大綱：場景大綱一般用來實現數據驅動的自動化測試

例：

 

 

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

重要知識點：

（1）文檔字符串數據將做爲參數傳遞給步驟定義

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

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

六、標籤：標籤過濾、執行時標籤過濾。（當有不少場景的時候，咱們有時只須要運行其中的個別場景，咱們能夠給不一樣的場景或劇本添加標籤，而後運行的時候可經過標籤過濾想要運行的場景。）

例：

 

 

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

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

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

 

 

 

二、代碼編輯

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

重要知識點：

一、代碼/劇本匹配：劇本步驟與代碼的匹配

 

 

二、具體步驟代碼的實現（cucumber，puppeteer的API，JavaScript等）

三、步驟定義：

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

四、步驟修改後的代碼更新：跳轉到原先的定義、更新原先的定義代碼、建立新的定義

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

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

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

六、代碼工具箱：cucumber一些自帶封裝的方法（通常用不到，咱們用的puppeteer）和cucumber的hook函數

七、智能提示和自動完成

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

例：

 

 

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

重點知識點：

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

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

（3）BeforAll / AfterAll 。全部場景以前或以後完成一些設置/清除工做

十、超時：默認狀況下，異步hook和步驟在5000毫秒後超時。這個能夠全局修改：

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

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

執行及測試報告

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

重要知識點：

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

二、運行配置

 

 三、執行測試報告

 

 

5、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時使用