淺談Cypress（上篇）

原文連接

一直以來，端到端的測試都是前端開發最頭疼的事情。若是沒有好的測試工具，一旦需求發生改變，就須要手工測試，費時費力，還會有漏網的bug。最近接觸了一款開箱即用的端到端測試工具——Cypress，真心不錯。

先看以下視頻，這是使用Cypress測試百度搜索的視頻：

是否是很酷。這是Cypress本身錄製的測試視頻，從視頻中能夠看到，左邊是每一個測試用例的詳情執行狀況，右邊是界面訪問的狀況，直觀且方便。下面咱就詳細的瞭解下Cypress吧。

安裝

建立一個空目錄，並在其下建立package.json文件，能夠經過npm或者yarn安裝：

npm install cypress --save-dev
//或者
yarn add cypress --dev
複製代碼

也能夠直接下載Zip文件，解壓後，直接運行Cypress便可。

關於Cypress安裝的更多內容，可參見文檔。

運行

安裝好以後，就能夠經過以下命令打開Cypress：

./node_modules/.bin/cypress open
複製代碼

這個命令會在當前目錄下建立以下內容：

|-- cypress.json    // 配置文件
|-- cypress
    -- fixtures     // 用於存放自定義的json文件
    -- integration  // 測試代碼
        -- examples  // 示例代碼
    -- plugins       // 自定義指令時，與support文件夾組合使用
        -- index.js
    -- support
        -- commands.js
        -- index.js
複製代碼

這裏注意，修改了cypress.json文件後，Cypress會關閉當前測試的瀏覽器。

也能夠將啓動Cypress的命令添加至npm腳本中：

{
    "scripts": {
        "cypress:open": "cypress open"
    }
}
複製代碼

啓動時直接使用以下命令：

npm run cypress:open
複製代碼

測試代碼

Cypress成功運行後，就開始寫代碼吧。Cypress測試文件的命名規則是***.spec.js。先看一段示例代碼：

describe('Cypress演示', function() {
    beforeEach(() => {
        cy.visit('https://www.baidu.com/')
    })

    //測試function
    it('搜索', function() {
        cy.get('[id=kw]').type('Cypress')
        cy.contains('input','百度一下').click()
        cy.location('pathname').should('equal', '/s')
        cy.screenshot()
    })

    //測試function
    it('搜索-使用環境變量', function() {
        cy.get('[id=kw]').type(Cypress.env('search'))
        cy.contains('input','百度一下').click()
        cy.location('host').should('equal', 'www.baidu.com')
        cy.screenshot()
    })
})
複製代碼

多麼熟悉的代碼。使用Cypress提供的不一樣Command，能夠爲所欲爲的編寫測試代碼，部分Command解釋以下：

1. beforeEach：在每一個測試function都會執行
2. visit：顧名思義，就是訪問遠程URL，跟 cypress.json 文件中的baseURL組合使用；
3. get：經過selectors或者別名，獲取一個或者多個Dom元素
4. contains：獲取包含指定文本的DOM元素
5. type：在DOM元素中鍵入的內容
6. click：單擊操做
7. location：獲取window.location的內容，可用參數有：host、port、hostname、href、pathname等

關於更多以及更詳細的Command用法，請參見文檔，這裏不贅述。

執行測試後，會在Chrome中看到以下測試結果：

關於cypress.json

在cypress.json文件中可設置全局的參數，常見配置內容以下：

選項	默認值	解釋
baseUrl	null	命令cy.visit()或cy.request()的前綴URL
env	{}	可設置任何的配置項，經過Cypress.env調用
numTestsKeptInMemory	50	快照和命令數據在內存中保存的測試數。
trashAssetsBeforeRuns	true	cypress run運行時清空creenshotsFolder和videosFolder
trashAssetsBeforeRuns	cypress/videos	視頻文件保存的路徑
creenshotsFolder	cypress/screenshots	快照文件保存的路徑
reporter	spec	測試報告格式
reporterOptions	{}	測試報告參數

還能夠在測試中，經過Cypress.config() 在測試運行時進行配置。

關於快照和視頻

在測試過程當中，能夠在你但願的地方經過 cy.screenshot() 保存網頁的快照。

可是若是要錄製測試執行的視屏，則須要執行以下命令：

cypress run  
複製代碼

這個命令會將當前目錄下的全部spec文件都執行一遍，執行後，爲每一個spec文件建立同名的mp4文件。亦可經過添加路徑，指定執行某個測試。

cypress run pathname
複製代碼

測試報告

對於測試報告，Cypress缺省支持的是Spec方式，這在咱們執行run命令的時候，在命令行中就看到了：

若是你習慣於teamcity或者junit的報告樣式，Cypress是直接提供的，只須要在cypress.json文件中添加：

"reporter": "junit"  
//或者
"reporter": "teamcity"
複製代碼

而我更習慣於看HTML的測試報告，這就須要作點額外的工做了：

npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator
複製代碼

在cypress.json設置相關參數：

{
    "env": {
        "search":"Cypress e2e"
    },
    "reporter": "mochawesome",
    "reporterOptions": {
        "reportDir": "cypress/results",
        "overwrite": false,
        "html": true,
        "json": true
    }
}
複製代碼

執行run後會看到在當前目錄下生成了測試報告

看下Html的測試報告，是否是很炫？

Cypress Vs. Selenium

既然Cypress簡單、快捷，那它會不會是Selenium的終結者呢？看看下面的對比，就知道答案了。

項目	Cypress	Selenium
支持語言	Javascript	Java, C#, Python, Ruby, R, Dart, Objective-C、Javascript等
支持瀏覽器	Chrome	各類主流瀏覽器
主要使用者	前端開發人員	QA
使用的測試框架	Mocha	無限制
是否須要瀏覽器驅動器	否	須要
測試速度	快	略慢
錄製測試視頻、快照	支持	支持，但須要寫代碼
可交互	能夠	不支持
社區支持	略顯薄弱	強大

看了上面的比較，咱們就會明白，其實兩個工具都不錯，選擇誰取決於哪一個更適合你。我我的仍是側重於Cypress，由於Javascript以及它的簡單耐用。

Cypress 也可配置到CI中，我將在下篇文章中重點講解，敬請期待。

附錄

1. Cypress安裝
2. Cypress命令
3. Cypress測試代碼示例
4. Cypress配置
5. Cypress測試報告