最新一期TW的技術(shù)雷達(dá)上出現(xiàn)了一款端到端的開源測試神器Cypress，號稱是不懂代碼的測試人員、業(yè)務(wù)人員都可以使用，同時還不依賴于已經(jīng)是端到端測試扛把子的Selenium，CC先生很好奇，以下是開箱試用報告：
- 安裝cypress
https://www.cypress.io/
cypress官網(wǎng)下載，Windows下的安裝包大概有233M，下載耗費時間依賴于你的網(wǎng)速咯。
也可以直接到github的cypress項目下獲取 ：
https://github.com/cypress-io/cypress
Windows下解壓后點擊cypress的安裝文件，一路默認(rèn)，直到出現(xiàn)以下畫面：
install.jpeg
1）打開cypress客戶端， 點擊箭頭位置，通過資源管理器選擇/CypressTest目錄或者新建一個目錄名稱為CypressTest（此處為自己取的名字，你也可以寫其它名稱）
2）如果/CypressTest目錄下沒有cypress目錄，那么cypress就會在CypressTest目錄下新建cypress目錄，并初始化一些文件
想使用npm安裝的小伙伴先要需要配置node的環(huán)境。（此環(huán)節(jié)可Google）
- 初始化cypress
安裝完成后安裝目錄下有一個cypress目錄和cypress.json的配置文件，cypress目錄下的結(jié)構(gòu)如下：
|-- fixtures
|-- integration
| `-- example_spec.js
|-- plugins
| `-- index.js
`-- support
|-- commands.js
`-- index.js
fixtures 文件夾存放自定義 json 文件，integration 文件夾編寫測試，plugins 和 support 是非必須使用的文件夾，需要自定義指令的時候會用到。
-
運行Cypress
可以點擊examples里的任意一個js文件，它會單獨打開一個瀏覽器并開始執(zhí)行。下圖是執(zhí)行了actions_example.js的情況。
actions_example.png 編寫一個測試用例
設(shè)計一個常見的登錄功能的測試流程訪問某個頁面
查找DOM進行交互，例如輸入，點擊，選擇之類
進行斷言
describe('InfoQ登錄測試', () => {
it('登錄頁面', () => {
cy.visit('https://account.geekbang.org/infoq/signin?redirect=https%3A%2F%2Fwww.infoq.cn%2F')
cy.get('input[name="cellphone"]').eq(0).type('18013457889')
cy.get('input[name="password"]').eq(0).type('password')
cy.get('input[value="登錄"]').click()
cy.get('body').should('contain', 'Bad login')
})
})
運行后得到以后結(jié)果：
可以看到以上的運行結(jié)果時有錯誤的提示，出錯的地方來自于DOM中“登錄”按鈕沒有被識別到。
具體的可參考： https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html# 這個就當(dāng)課后作業(yè)了。
以下給一個進階版的腳本，大家可以運行一下看看效果：
describe('should display a correct error message when you enter wrong login information', function () {
before(function () {
cy.visit('https://www.amazon.com/')
})
var randomEmail = Math.random();
var randomPassword = Math.random();
it('displays a correct error message', function () {
cy.get('#nav-your-amazon').click()
cy.get('#ap_email').type(randomEmail + '@gmail.com')
cy.get('#ap_password').type(randomPassword)
cy.get('#signInSubmit').click()
cy.get('#auth-error-message-box').should('be.visible')
})
})
上面的代碼涉及到了before函數(shù)的用法。cypress本身是支持before,beforeEach的這類測試套件的用法。
試用小結(jié)
Cypress感覺非常容易上手而且它使用了Mocha和Chai來寫測試用例，已有Mocha和Chai使用經(jīng)驗的同學(xué)可以很容易轉(zhuǎn)換，對于已經(jīng)習(xí)慣使用Selenium+Python/Java的同學(xué)來說有沒有必要一定要轉(zhuǎn)過來需要進一步考慮一下，而且Selenium Grid對分布式的支持目前在Cypress上還沒有看到很好的實現(xiàn)。
具體一點來說，喜歡Cypress的理由：
- cypress不使用Selenium：我們已經(jīng)嘗試過的大多數(shù)端到端工具都在使用Selenium，這就是為什么他們有幾乎相同的問題。
- cypress很好地支持任何框架或網(wǎng)站：有數(shù)百個項目使用最新的React，Angular，Vue，Elm等框架。cypress在舊服務(wù)器渲染頁面或應(yīng)用程序上也同樣有效。
- cypress測試只用JavaScript編寫：雖然您可以從任何其他語言編譯成JavaScript，但最終測試代碼在瀏覽器內(nèi)部執(zhí)行。沒有語言或驅(qū)動程序綁定 ，只有JavaScript。
- 沒有依賴關(guān)系，你把測試放在package.json中就是這樣。
- 與我們已經(jīng)實驗過的Selenium的端到端工具相比，cypress的運行速度要快得多。集成在CI中的時候速度的優(yōu)勢可以盡情體現(xiàn)。
- 你的腳本的每一步都有屏幕截圖，如果有任何錯誤的通過或失敗的測試，這可能非常有用，所見即所得，這一點和以前大家用LoadRunner等老牌的商用工具的體驗感是一樣的棒，非常有利于調(diào)試！
- 當(dāng)然cypress也有一個明確的cyntax，容易閱讀，從學(xué)習(xí)成本的角度出發(fā)大部分人都會喜歡它！
不喜歡cypress的理由：
- 該結(jié)構(gòu)與其他Selenium端到端工具不同，之前習(xí)慣使用其它E2E測試工具的使用者來說，您可能需要花費更多時間來理解結(jié)構(gòu)并找到創(chuàng)建腳本的最佳方法。
- 社區(qū)：由于cypress相對較新，社區(qū)規(guī)模較小。 你很難找到問題的答案等。
- 特征。 沒有文件上傳支持。 沒有跨瀏覽器測試。 誰知道什么時候會涵蓋這些東西，對于大項目這些功能至關(guān)重要。
- 頁面對象模型。 這已經(jīng)被時間證明了。 賽普拉斯支持一種可能引起爭議的不同方法。
- 它僅適用于一個客戶端（語言），即僅適用于JavaScript。 因此，要使用它，您必須知道JavaScript：但是這可能是JavaScript應(yīng)用程序的一個優(yōu)勢，同時也將是cypress的一個缺點。
