Cypress 系列之----01 安裝和使用

The web has evolved. Finally, testing has too.

一. 簡介

　　Cypress是新一代前端測試框架，它基於node js。解決了開發人員和QA工程師在測試現代應用程序時面臨的關鍵難點問題。

　　Cypress包含免費的、開源的、可本地安裝的Test Runner 和 能夠記錄測試的控制面板服務。

功能特點

• 【時間旅行】測試的每一步都有 snapshot，只需將鼠標懸停在命令日志中的命令上，就可以准確地查看每個步驟中發生了什么。
• 【實時重新加載】
• 【可調試】　我們無需猜測測試用例為何失敗，直接從熟悉的工具進行調試（例如：谷歌瀏覽器的開發者工具），可讀錯誤和堆棧跟蹤讓調試更有效率。
• 【自動等待】再也無需在測試用例代碼中添加 wait 或 sleep 代碼，Cypress 會自動等待命令和斷言完成。
• 【函數間諜】響應劫持、時鍾回撥：驗證和控制函數、服務器響應和時鍾（spies，stubs，clock）。常用的單元測試功能。
• 【網絡流量控制】無需涉及服務器即可控制、保存和測試邊緣情況。你可以根據需要保留網絡流量。
• 【視圖快照和視頻】從命令行運行測試時，我們可以查看失敗用例的視圖快照和整個測試過程的視頻。

參考資料：官網，github，API詳解參考

二. 環境准備

系統要求

• macOS 10.9 and above (64-bit only)
• Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
• Windows 7 and above

如果使用npm安裝cypress，支持：

• Node.js 8 and above

1  VSCode安裝，參考這里，直接系統環境下載並安裝。

• 格式化代碼的快捷鍵：On Windows Shift + Alt + F
• 插件推薦

2  Cypress安裝，參考這里

3  初識Cypress

• Test status menu（測試狀態欄）:從左向右分別顯示：成功數、失敗數、未運行、耗時，是否自動滾屏和重新運行按鈕
• Viewport sizing:（視窗尺寸）：
  • 默認情況下，窗口將為1000*660px，頁面左上角會顯示；
  • 代碼中可用cy.viewport命令指定；
  • 在cypress.json中指定的值也能覆蓋默認視口維度。
• Command Log（命令日志）:將鼠標懸停在日志中的某個命令上，將顯示測試運行時完整的過程
• App preview（應用用程序預覽）：在執行時，實時查看應用程序中發生了什么。使用DevTools檢查或調試每個命令。

//第一個樣例腳本

/// <reference types="Cypress" />

 

describe('My first test case for cypress',function(){

    it('visit baidu home page and search for testerhome:',function(){
        cy.visit('http://www.baidu.com') 　　　　　　　　　　 //訪問url
        cy.title().should('contain','百度一下，你就知道')     //驗證頁面 title 是否正確
        cy.get('#kw')      　　　　　　　　　　　　　　　　　　  //根據 css 定位搜索輸入框
         .type('testerhome')        　　　　　　　　　　　　　 //輸入關鍵字
         .should('have.value','testerhome')  　　　　　　　　//驗證關鍵字自動是否展示正確
        cy.get('#su').click()   　　　　　　　　　　　　　　　　//根據 css 定位搜索按鈕並點擊
        cy.url().should('include','wd=testerhome')     　　//驗證目標url 是否正確包含關鍵字
        cy.title().should('contain','testerhome_百度搜索')  //驗證頁面 title 是否正確
        cy.get('[id="1"]')   
        .should('contain','TesterHome')   // 驗證第一個結果中是否包含TesterHome
        cy.screenshot()
    })
})    

代碼解釋：

• reference表示告訴 VSCode 要去Cypress package 里找相關的語義解析
• describe聲明一個測試用例集；
• it聲明了一個測試用例，it.only只測試這個, it.skip 不要測這個；
• beforeEach在每個測試用例運行前需要做的事，before在所有測試用例運行前需要做的事；
• cy.get接受一個 js selector， 就是元素定位字符串（Cypress 也支持 xpath 定位）
• 通過then或should，我們可以把get到的元素對象傳遞到下一步，以便做進一步處理，這里通過then把找到的button_start_search傳遞到下一步，

三. Cypress使用

1. 默認文件組織結構

cypress_demo
├── cypress # Cypress 工作目錄
│   ├── fixtures # 測試用例中要用到的資源，比如：數據庫模擬數據、圖片、json信息等等，可以使用fixture方法讀取
│   │   └── example.json
│   ├── integration # Cypress 腳本測試文件，允許多級目錄
│   │   └── examples # 這個文件夾中存放了 Cypress 官方提供的一些測試樣例
│   │       ├── actions.spec.js
│   ├── plugins # 存放 Cypress 插件
│   │   └── index.js
│   └── support # 存放 Cypress 自定義命令
│       ├── commands.js
│       └── index.js
├── cypress.json # Cypress 配置文件
└── package.json # 這個要自己創建

2. 配置文件說明--//待補充

2.1 Configuration

 官網說明

baseUrl：當指定baseUrl配置項后，Cypress會忽略掉 cy.visit() 或 cy.request() 中的url。

當沒有baseUrl配置項設定時，Cypress會用localhost加隨機端口的方式來先運行，然后遇到 cy.visit() 或 cy.request() 會再變化請求的url，這樣會有一點點閃爍或reload的情況。所以指定的baseUrl后，能節省啟動時間。

numTestsKeptInMemory：保存在內存中的快照和命令數據。如果在測試運行期間瀏覽器內存消耗過大，可以減少此數字

2.2 Node.js Version (12.8.1)

2.3 Proxy Settings

3. 運行

3.1 進入 Cypress安裝目錄\node_modules\bin ，輸入
>cypress run
>cypress run -spec "D:\testProject\CypressProject\node_modules\.bin\cypress\integration\Mytests\pdd. js"

3.2 進入Cypress安裝目錄，輸入
>yarn run cypress open
>yarn run cypress run --record --key 401f5c8d-466d-495d-be73-59e315905295

3.3 管理員模式打開 cmd 窗口
>npx cypress open

4. 生成報告

//1. Junit-allure
// 在 cypress.json 中添加依賴：
{
    "reporter": "junit",
    "reporterOptions": {
    "mochaFile": "results/my-test-output[hash].xml",   // 通過hash 標簽區分不同文件的用例結果
    "toConsole": true
}

// 執行 cypress run 的時候會自動生成xml文件
// 使用 allure 生成對應報告：
// 生成allure 報告
allure generate results --clean
// 打開報告
allure open allure-report

//2. mochawesome
{
    "reporter": "mochawesome",
    "reporterOptions": {
    "reportDir": "cypresse/results",
    "overwrite": false,
    "html": true,
    "json": true
    }
}
//執行 cypress run 的時候會自動生成json格式報告

5. 如何獲取控件定位值

1.點擊選擇器 -> 2.點擊定位元素 -> 3.復制生成代碼

四. 總結

優點：

• 安裝簡單，API簡單易上手
• 速度上比selenium 要快
• 某些步驟運行失敗時自動重試。這樣可以提高運行的穩定性，更可靠些
• 測試過程直觀，運行失敗時自動截圖
• 內置的request 方法可以直接跳過UI 層的登錄，但要求是你能調用對應的登錄接口。
• 自帶數據 mock 機制
• 支持 webpack 配置

除了上述這些外，還有如下不足之處：

• 不擅長瀏覽器兼容性測試
• 不擅長微信、微博等 Oauth2.0 授權登錄測試
• 只能測試 web 頁面（不能測試小程序）
• 痛點：和外部通信困難