UI自動化測試框架Cypress初探

前言

開發中經常使用的三種測試方式：

• 單元測試

經過提供輸入並確保輸出符合預期，對諸如函數或類等級別的單個單元進行測試。

• 集成測試

測試過程跨多個單元，好比組件API、UI等，確保單元間協同工做符合預期。

• 功能測試

也叫e2e測試，經過編寫測試用例，自動化模擬用戶操做，確保組件間通訊正常。

CyPress簡介：

CyPress是在mocha式API基礎上構建的一套開箱可用的測試框架，對比其餘測試框架，它提供一套本身的最佳實踐方案，無需其餘測試工具庫，配置方便簡單但功能異常強大，可使用webpack項目配置，還提供了一個強大的GUI圖形工具。因此做爲常用JavaScript開發語言的人，會很是容易入門這個自動化測試框架。

在vue-cli3中也對自動化測試作了集成，在vue-cli中有兩種自動化測試框架，其中的一種就是cypress，這也是爲何我選擇這一款自動化測試框架，針對咱們目前項目大部分使用的vue技術棧，也能更好的應用於實際業務當中。

安裝

CyPress能夠經過yarn add cypress 或 npm install cypress安裝，也能夠在vue-cli中選擇集成，而工程目錄裏也會出現一個cypress的文件夾，用來存放測試用例。下面簡要介紹下cypress下的各個子文件夾的做用：

cypress //cypress目錄
    ---- fixtures //測試數據配置文件，可使用fixture方法讀取
    ---- integration //測試腳本文件
    ---- plugin //插件支持
    ---- support //支持文件
    -cypress.json //cypress全局配置文件複製代碼

運行

按照如上所示安裝好以後，下面就來運行一下來了解這個框架的測試流程。在vue-cli中集成的cypress有已經配置好的命令可運行npm run test:e2e，而在老的項目中咱們可使用node_modules/.bin/cypress open的命令運行。

輸入運行命令以後，咱們會看到出現以下的界面。

在這個頁面中咱們會看到咱們所編寫的測試用例的js文件，而後能夠選擇一個或者選擇Run all specs來執行用例文件。運行以後會打開一個新的chrome頁面，這裏咱們能夠看到用例文件中的每一條測試語句的執行狀態，而且能夠看到他的執行過程和執行結果（綠色表示成功、紅色表示失敗）。

在chrome頁面的右半部會顯示每一個節點的快照信息，而且可以對比以前和以後的變化差異，能夠容易的讓開發者感覺到執行某個測試語句先後頁面發生的變化。

語法

在這裏會對CyPress的語法作一個簡要介紹，具體可查看官方文檔。

• 查詢元素

查詢的語法很是近似於jQuery的元素選擇器，例如：JQ->$('.my-selector')、CY->cy.get('.my-selector')

• 文本內容查詢

匹配內容是否符合預期使用 cy.get('XX').contains('inner')，inner爲預期的內容值

• 文本輸入

當須要在輸入框輸入值時使用type關鍵字

• 斷言語句

須要判斷元素的內容、value、類名等信息可以使用should('have.attributs',value)

• 命令能夠是promise的形式

cy.get('button').then(($btn)=>{})

• 元素交互

多種動做命令：blur、focus、clear、check、select等

• 超時機制

可根據不一樣的需求修改超時時長（大多數命令超時默認爲4秒）

• 條件測試

可使用if else進行條件判斷

• 鉤子函數

CyPress提供了一些鉤子函數before、beforeEach、after、afterEach

對於鉤子函數的功能介紹：

• before(()=>{//在所有案例執行以前執行一次})
• after(()=>{//在所有案例執行以後執行一次})
• beforeEach(()=>{//在每一條案例以前執行})
• afterEach(()=>{//在每一條案例以後執行})

自動化測試流程圖

CyPress的優點

1. 上手快、文檔詳細，官網帶有視頻教程（很是適合新手）
2. 使用js語法對前端開發者友好
3. 執行速度，優點在於編輯保存腳本後執行速度會優於selenium，可以保證快速驗證界面功能
4. 強大的快照功能，能夠顯示在某一條測試語句先後的頁面比對
5. 工具提供控件定位：1.點擊選擇器->2.點擊定位元素->3.複製生成代碼

1. 提供多種元素交互api，例如：blur、focus、clear、select、dbclick
2. 自帶GUI工具，能夠看到整個測試過程，也可錄屏

與其餘框架的差異

大多數測試工具（如Selenium）經過在瀏覽器外部運行並在網絡上執行遠程命令來運行。Cypress偏偏相反，Cypress在與你的應用程序相同的生命週期裏執行。

Cypress背後是Node服務進程。Cypress和Node進程不斷進行通訊，同步和執行任務。訪問這兩個部分（前端和後端）使咱們可以實時響應你的web應用程序的事件，與此同時也能完成須要更高權限的任務。

一些思考

• 爲何要作端到端的測試？

在負責的系統中會有一些比較穩定的模塊（不常常改動），在有些時候改了其餘模塊的一小塊可能會影響到穩定的模塊，而這時就須要對這個模塊作迴歸測試以保不受影響能夠穩定使用，若是每一次都須要開發人員對其進行迴歸是耗時耗力的，而這時就須要了咱們爲這個模塊編寫的e2e測試用例，只須要執行一下這個測試用例就能夠看到模塊的各項功能是否可以完整運行。

• 對於編寫的測試用例要加以註釋或有文檔：

測試用例是一個能夠上傳到倉庫的文件，因此爲了方便別人維護測試用例或者是瞭解你的測試流程，請務必要寫上測試流程的註釋，或者創建一個專門用於統計測試用例的文檔來記錄有哪些測試用例和用例的內容，這樣可以很好的保證用例的完整性、可讀性和可維護性。

• 關於測試覆蓋率：

目前cypress沒有內置測試覆蓋率的統計功能，目前可使用Chrome自帶的來查看。在GUI打開的測試瀏覽器中打開devtools，切換到Sources，按下cmd+shift+p（或ctrl+shift+p），輸入coverage，選擇從新刷新並統計代碼執行覆蓋率。

參考資料

• www.cypress.io/
• docs.cypress.io/zh-cn/guide…
• docs.cypress.io/zh-cn/guide…