介紹一款強大全新的 E2E（end to end）Web 測試架構 Cypress[1]，号稱 :
Fast, easy and reliable testing for anything that runs in a browser.
從下載下傳量看還是很不錯的，本文介紹 Cypress 的安裝與配置。
安裝限制
•Mac OS 10.9+；•Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit;•Windows 7+(目前 Windows 僅提供 32 位 Cypress 應用程式)
安裝 NodeJS
如何安裝 NodeJS 參考 NodeJSd官網[1]，裡面有各種平台的安裝包 . 直接下載下傳安裝即可。安裝完後通過node -v指令檢視是否安裝成功。
安裝 Cypress
•選擇一個目錄或建立一個目錄作為你 Cypress 項目試水的目錄，進入這個目錄 (Windows 推薦使用 Power Shell 終端，Mac 和其他 L/Uinux 系統則使用預設的 Terminal)；•使用npm init指令來初始化一個本地的 NodeJS 封包件；•運作指令npm install cypress --save-dev來安裝 Cypress；•運作指令.\node_modules\.bin\cypress open來打開 Cypress 應用程式；不出意外，你将會看到這個界面：
接下來，我們還需要安裝一款 IDE，用來快速開發自動化！先不要關閉 Cypress 應用程式，因為你在此應用程式外所有的操作，它都能動态加載重新整理，包括寫用例的時候！
安裝 VSCode
•微軟：要說 IDE，我微軟敢說第二，沒人敢說第一！•JetBrains：？？？•吃瓜群衆：快點！瓜子、闆凳 …
微軟的 VSCode 是一款相當優秀的 IDE，推薦使用它來進行自動化開發。安裝教程參考 VSCode官網[2]，直接根據平台下載下傳安裝。
配置 Cypress 運作環境
VSCode(目前筆者測試發現僅在 Ubuntu16.04 下開發 C++ 程式時會有部分按鍵無效或跳鍵的情況) 下載下傳完成後，我們将配置 JS/Cypress 運作環境以便進行代碼開發。
1.在 VSCode 裡，File>Open Folder， 選擇{your_project}/cypress 目錄，比如我這裡就是C:\Users\T10051\CypressTest\cypress， 打開之後大概是這樣
2.接下來我們建立第一個用例，點選integration目錄>New Folder， 起名為MyTests，再在MyTests下面建立一個myFirstTestSuites.js的檔案，切換到 Cypress，你是否發現 Cypress 自動給你重新整理了目錄，你建立的myFirstTestSuites.js測試集檔案，它已經幫你監測到了！隻不過它現在還沒有任何内容
3.Cypress 提供了很多示例程式，是以我建議你暫時不要删除它們，以便随時可以參考。現在我們開始寫第一個自動化示例程式。
/// <reference types="Cypress" />
describe(' 百毒網站首頁測試用例集 ', 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 會自動檢測你可用的浏覽器，為了以防萬一，我建議把 Chrome 設定為預設浏覽器，當然你也可以運作 Cypress 的時候手動指定cypress run --browser chrome。運作效果如下圖：
代碼解釋：
•reference表示告訴 VSCode 要去Cypress package 裡找相關的語義解析，這樣一來 Cypress 相關的文法和函數等就可以盡情地使用了；•describe聲明了一個測試用例集；•beforeEach相當于單元測試的setup，即在每個測試用例運作前需要做的事；•it聲明了一個測試用例；•cy.get接受一個 js selector， 就是元素定位字元串，當然 Cypress 也支援 xpath 定位，詳見 這裡[3]；•通過then或should，我們可以把get到的元素對象傳遞到下一步，以便做進一步處理，這裡通過then把找到的button_start_search傳遞到下一步，并最終通過expect函數來判斷button_start_search的value屬性是否跟預期一緻。
儲存代碼，在 Cypress 應用程式裡找到myFirstTestSuites.js，點選它，你會發現它跑起來了，而且如果再次對用例修改并儲存，Cypress 會自動檢測到新的改動，并馬上運作！當然，你也可以去掉這個自動重載機制 …
備注 ：目前官方團隊正在開發 Python 版本，同樣的 Free to use，對 JS 恐懼的同學不妨等一等，或者直接 JS 上手，也非常簡單，VSCode 裝上之後，你會愛上 Cypress 和 JS，筆者會慢慢介紹各種 Web UI 自動化複雜場景下 Cypress 的強大應對，目前還沒發現 Cypress 無法處理的問題！歡迎一起入坑！
Cypress 入門系列文章
•強大的全新 Web UI 測試架構 Cypress - 初嘗甜頭[4]•強大的全新 Web UI 測試架構 Cypress - 調用 Python 腳本[5]•強大的全新 Web UI 測試架構 Cypress - Cypress 處理 iframe[6]•強大的全新 Web UI 測試架構 Cypress - 隻測該測之處[7]•強大的全新 Web UI 測試架構 Cypress - Cypress 處理新頁簽[8]•強大的全新 Web UI 測試架構 Cypress - 優雅地處理提示消息[9]
本文原文标題為《強大的全新 Web UI 測試架構 Cypress - 初嘗甜頭》，作者為非洲趙子龍，TesterHome 連結：
強大的全新 Web UI 測試架構 Cypress - 初嘗甜頭 · TesterHome