介紹一款強(qiáng)大全新的 E2E（end to end）Web 測(cè)試框架 Cypress[1]，號(hào)稱 :

Fast, easy and reliable testing for anything that runs in a browser.

從下載量看還是很不錯(cuò)的，本文介紹 Cypress 的安裝與配置。

安裝限制

?Mac OS 10.9+；?Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit;?Windows 7+(目前 Windows 僅提供 32 位 Cypress 應(yīng)用程序)

安裝 NodeJS

如何安裝 NodeJS 參考 NodeJSd官網(wǎng)[1]，里面有各種平臺(tái)的安裝包 . 直接下載安裝即可。安裝完后通過node -v指令查看是否安裝成功。

安裝 Cypress

?選擇一個(gè)目錄或新建一個(gè)目錄作為你 Cypress 項(xiàng)目試水的目錄，進(jìn)入這個(gè)目錄 (Windows 推薦使用 Power Shell 終端，Mac 和其他 L/Uinux 系統(tǒng)則使用默認(rèn)的 Terminal)；?使用npm init指令來初始化一個(gè)本地的 NodeJS 包文件；?運(yùn)行指令npm install cypress --save-dev來安裝 Cypress；?運(yùn)行指令.\node_modules\.bin\cypress open來打開 Cypress 應(yīng)用程序；不出意外，你將會(huì)看到這個(gè)界面：

接下來，我們還需要安裝一款 IDE，用來快速開發(fā)自動(dòng)化！先不要關(guān)閉 Cypress 應(yīng)用程序，因?yàn)槟阍诖藨?yīng)用程序外所有的操作，它都能動(dòng)態(tài)加載刷新，包括寫用例的時(shí)候！

安裝 VSCode

?微軟：要說 IDE，我微軟敢說第二，沒人敢說第一！?JetBrains：？？？?吃瓜群眾：快點(diǎn)！瓜子、板凳 …

微軟的 VSCode 是一款相當(dāng)優(yōu)秀的 IDE，推薦使用它來進(jìn)行自動(dòng)化開發(fā)。安裝教程參考 VSCode官網(wǎng)[2]，直接根據(jù)平臺(tái)下載安裝。

配置 Cypress 運(yùn)行環(huán)境

VSCode(目前筆者測(cè)試發(fā)現(xiàn)僅在 Ubuntu16.04 下開發(fā) C++ 程序時(shí)會(huì)有部分按鍵無效或跳鍵的情況) 下載完成后，我們將配置 JS/Cypress 運(yùn)行環(huán)境以便進(jìn)行代碼開發(fā)。

1.在 VSCode 里，File>Open Folder， 選擇{your_project}/cypress?目錄，比如我這里就是C:\Users\T10051\CypressTest\cypress， 打開之后大概是這樣

2.接下來我們創(chuàng)建第一個(gè)用例，點(diǎn)擊integration目錄>New Folder， 起名為MyTests，再在MyTests下面新建一個(gè)myFirstTestSuites.js的文件，切換到 Cypress，你是否發(fā)現(xiàn) Cypress 自動(dòng)給你刷新了目錄，你新建的myFirstTestSuites.js測(cè)試集文件，它已經(jīng)幫你監(jiān)測(cè)到了！只不過它現(xiàn)在還沒有任何內(nèi)容

3.Cypress 提供了很多示例程序，所以我建議你暫時(shí)不要?jiǎng)h除它們，以便隨時(shí)可以參考?，F(xiàn)在我們開始寫第一個(gè)自動(dòng)化示例程序。

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

describe(' 百毒網(wǎng)站首頁測(cè)試用例集 ',?function() {?

?beforeEach(() => { ? ?

? ? ?cy.visit('https://www.baidu.com') ? ? ?

?}) ? ?

?it(' 百度一下按鈕文本檢查 ', function() { ??

? ? ?cy.get("#su").then($button_start_search=>{ ? ? ? ? ? ?expect($button_start_search.attr("value")).to.eq(" 百度一下 "); ?

?? ? ?}) ??

? ?}) ??

?})

Cypress 會(huì)自動(dòng)檢測(cè)你可用的瀏覽器，為了以防萬一，我建議把 Chrome 設(shè)置為默認(rèn)瀏覽器，當(dāng)然你也可以運(yùn)行 Cypress 的時(shí)候手動(dòng)指定cypress run --browser chrome。運(yùn)行效果如下圖：

代碼解釋：

?reference表示告訴 VSCode 要去Cypress?package 里找相關(guān)的語義解析，這樣一來 Cypress 相關(guān)的語法和函數(shù)等就可以盡情地使用了；?describe聲明了一個(gè)測(cè)試用例集；?beforeEach相當(dāng)于單元測(cè)試的setup，即在每個(gè)測(cè)試用例運(yùn)行前需要做的事；?it聲明了一個(gè)測(cè)試用例；?cy.get接受一個(gè) js selector， 就是元素定位字符串，當(dāng)然 Cypress 也支持 xpath 定位，詳見 這里[3]；?通過then或should，我們可以把get到的元素對(duì)象傳遞到下一步，以便做進(jìn)一步處理，這里通過then把找到的button_start_search傳遞到下一步，并最終通過expect函數(shù)來判斷button_start_search的value屬性是否跟預(yù)期一致。

保存代碼，在 Cypress 應(yīng)用程序里找到myFirstTestSuites.js，點(diǎn)擊它，你會(huì)發(fā)現(xiàn)它跑起來了，而且如果再次對(duì)用例修改并保存，Cypress 會(huì)自動(dòng)檢測(cè)到新的改動(dòng)，并馬上運(yùn)行！當(dāng)然，你也可以去掉這個(gè)自動(dòng)重載機(jī)制 …

備注?：目前官方團(tuán)隊(duì)正在開發(fā) Python 版本，同樣的 Free to use，對(duì) JS 恐懼的同學(xué)不妨等一等，或者直接 JS 上手，也非常簡單，VSCode 裝上之后，你會(huì)愛上 Cypress 和 JS，筆者會(huì)慢慢介紹各種 Web UI 自動(dòng)化復(fù)雜場(chǎng)景下 Cypress 的強(qiáng)大應(yīng)對(duì)，目前還沒發(fā)現(xiàn) Cypress 無法處理的問題！歡迎一起入坑！

Cypress 入門系列文章

?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - 初嘗甜頭[4]?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - 調(diào)用 Python 腳本[5]?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - Cypress 處理 iframe[6]?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - 只測(cè)該測(cè)之處[7]?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - Cypress 處理新頁簽[8]?強(qiáng)大的全新 Web UI 測(cè)試框架 Cypress - 優(yōu)雅地處理提示消息