什么是Cypress
image.png
- Cypress是屬于下一代前端測試工具，用來測試UI web application
- Cypress編程語言使用Java script
- Cypress解決了其它測試工具無法實現(xiàn)的痛點
- Cypress是在node.js上面部署并且引用npm的模塊
- Cypress能夠使用超過9成Node.js的語言模塊，并且容易理解
- Cypress是一款易上手的框架
- 更快，更簡單并且更加穩(wěn)定的使用
Cypress的官網(wǎng)：
Selenium VS Cypress的優(yōu)缺點
- Selenium也是UI Automation工具，它的特點在于使用browser driver進行調(diào)度執(zhí)行
- Cypress并不需要依賴browser driver,是直接在browser里面進行執(zhí)行
- Cypress能夠檢查并且同時定位到browser中間DOM
- Cypress可以實時等待DOM加載，并不需要額外添加等待時間
image.png
Cyress的生態(tài)圈
- Cypress是一個open source工具
- Test Runner是用來添加測試用例，管理，執(zhí)行測試用例
-
Dashboard Service 可以提供執(zhí)行報告功能
image.png
Cypress與其他工具的區(qū)別
- Cypress不同于Selenium
- Cypres用于端對端的UI自動化測試
- Cypress是用于前端測試
- Cypress只能使用JavaScript
- Cypress可以用于開發(fā)，測試工作
-
Cypress的特點是執(zhí)行快，啟動快
image.png
Cypress工具有哪些功能
image.png
Cypress的缺陷
- 支持瀏覽器：Chrome，Canary，Electron
- Page Object Model 是不支持
- 文件讀取方法少，讀寫文件格式有限
- 第三方的日志報告模板有限
Cypress安裝-下載Node & NPM
- 進入node.js官網(wǎng)：https://nodejs.org/en/download/
-
根據(jù)使用系統(tǒng)進行下載就可以，本人使用win
image.png
設(shè)置環(huán)境變量NODE_HOME
- 默認安裝以后進入win的環(huán)境變量配置頁面
-
創(chuàng)建NODE_HOME并且將安裝路徑填寫正確
image.png
創(chuàng)建Cypress工作目錄
-
創(chuàng)建一個工作目錄
image.png
生成package.json文件
-
npm init
image.png -
創(chuàng)建package文件內(nèi)容
image.png
image.png
安裝Cypress
- 使用npm install cypress
因為cpyress是需要訪問國外網(wǎng)址，下載速度比較慢
image.png
image.png
-
使用yarn安裝
image.png -
使用安裝包
下載地址：
image.png
使用Cypress
-
本人下載zip文件，解壓到工作目錄中就可以找到Cypress.exe
image.png -
雙擊執(zhí)行文件打開Cypress
暫時只有英文版本，沒有本地化
image.png -
打開example文件，并查看相關(guān)測試用例
所有的demo文件都是js格式，當(dāng)點擊某一個文件后，Cypress就開始執(zhí)行腳本
image.png 查看需要執(zhí)行的瀏覽器
本人使用Chrome進行測試，Cypress支持的瀏覽器不多，但是常用瀏覽器都可以使用
image.png
- 執(zhí)行單個，多個測試用例
- 如果單個測試用例的執(zhí)行，只需要單擊指定的js文件就開始執(zhí)行工作
-
如果需要執(zhí)行多條測試用例，需要點擊“Run * integration specs”
image.png - 如果執(zhí)行多個測試用例，也可以放入commands.js文件中，后面介紹
總結(jié)
根據(jù)官方文檔有很多API，Help信息可以查詢，上手難度不大。
文檔也配合響應(yīng)的視頻，圖片使用。
使用范圍有限，比如只支持瀏覽器測試，而且支持瀏覽器數(shù)量有限。
生成報告比較弱，沒有很好的第三方支持，如果需要比較詳細的報告，需要在官網(wǎng)付費購買。
