e2e測試框架之Cypress

談起web自動化測試，你們首先想到的是Selenium！隨着近幾年前端技術的發展，出現了很多前端測試框架，這些測試框架大多並不依賴於Selenium，這一點跟後端測試框架有很大不一樣，如Robot Framework作Web自動化測試本質上仍是使用的Selenium，包括各語言的xUnit單元測試框架。

多吧！這還只是一部分呢？你覺得這些都是不知名的小項目？錯了！

我特意把Selenium加了進來，其中mocha和jtest在Github上的stats是多於Selenium的，剩下的其它項目也都不弱。

本文要介紹的是Cypress測試框架! why? 由於人家的文檔都是帶視頻的。

看一下人家官方的文檔，像這樣的視頻還有好幾段，簡直是對新手的寵愛。

看到這麼好的教程，不學一學感受都對不起人家，是的！這就是我選擇瞭解一下Cypress的緣由。

官網：

https://docs.cypress.io

The web has evolved. Finally, testing has too.

Web已經進化了，最後，測試也有。

這類測試框架統稱爲e2e測試，即end to end（端到端）測試。理論上前端頁面由前端框架來測試確實更爲合適。這幾天我在搭建UI自動化測試框架，順便封裝了一些元素定位，隨着對前端技術的瞭解，我幾乎將全部元素定位都換成了CSS，配合JS處理一些Selenium很難操做的元素，確實效率提升了不少，頁面元素也沒那麼難操做了，包括學了點Jenkins的配置，固然，這個話題會放到下一次來分享。

安裝：

安裝很簡單，首先你要安裝node.js。

建立cypress_sample練習目錄：

> mkdir cypress_sample
> cd cypress_sample

安裝cypress：

cypress_sample > npm install cypress --save-dev

啓動cypress：

cypress_sample > ./node_modules/.bin/cypress open

第一次啓動Cypress，它已經爲咱們準備了豐富的例子。

經過vs code 打開cypress_sample項目。

在examples/目錄下面建立baidu.spec.js文件，代碼以下：

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")

        cy.get("#kw", {timeout: 2000}).type("cypress test")
       
        cy.wait(100)
       
        cy.get("#su", { timeout: 2000 }).click()

    })
})

上上圖，找到在Tests列表中找到 baidu.spec.js文件，點擊運行。

在VS code 中編輯保存腳本後，上圖的窗口會自動執行，速度上比selenium快多了，Selenium啓動瀏覽器怎麼着也得3~5秒吧，上面的腳本不到2秒就跑完了，元素定位主要以CSS爲主，這其實不是問題，CSS原本就很強大的說。

也許，這是將來前端測試的方向，至少對於前端人員來講，快速驗證界面功能，我想不到有什麼理由不選擇它，而是Selenium。固然，對於測試人員，腳本的可維護性，報告的生成，以及與持續集成的結合都有一整套成熟的方案。對於Cypress來講（其它前端測試框架不瞭解），整合能力還不夠強，可能JavaScript也是一個門檻。畢竟，這兩年，你們剛學會Python。