前端自動化測試框架Cypress入門


一:Cypress簡介

隨便着Web應用項目的不斷發展,測試也要不斷發展,Cypress是為現代網絡打造的,基於JavaScript語言的一種前端自動化測試工具,測試也是如此,對瀏覽器中運行的所有內容進行快速,輕松和可靠的測試。Cypress是自集成的,它提供了一套完整的端到端的測試體驗,正如官網上所說:

  • 安裝Cypress很簡單,無需依賴項,無需額外下載或更改代碼。
  • 輕松,快速地編寫測試,並在構建Web應用程序時觀察它們的實時執行。
  • 在CI中調試測試就像在本地運行測試一樣容易。具有內置的並行化和負載平衡功能。
  • 記錄CI測試數據,屏幕截圖和視頻-並在“ 儀表盤”中查看匯總的下一級見解。

二:Cypress工作原理

  1. Cypress在與應用程序相同的生命周期里執行,當你運行測試時,Cypress首先使用webpack將測試代碼中的所有模塊bundle到一個js文件中,然后,它會運行瀏覽器,並且將測試代碼注入一個空白的頁面里,然后它將在瀏覽器中運行測試代碼。

  2. 在每次測試首次加載Cypress時,內部Cypress Web應用程序先把自己托管在本地的一個隨機端口上,在識別出測試中發出的第一個cy.visit()命令后,Cypress將會更改其本地的URL以匹配你遠程應用程序的Origin,這使得你的測試代碼和應用程序可以在一個Run Loop中運行。

  3. 因為Cypress測試代碼和應用程序均運行在由Cypress全權控制的瀏覽器中,且它們運行在同一個Domain下的不同iframe內,所以Cypress的測試代碼可以直接操作DOM,Windows Objects甚至Local Storages而無須通過網絡訪問,這就是Cypress可以運行的更快的原因。

  4. Cypress還可以在網絡請求層進行即時讀取和更改網絡流量的操作,Cypress背后是Node.js Process,任何發往瀏覽器之外的HTTP的請求和響應,均由Cypress生成的,被Node.js Process控制的Proxy進行轉發,這使得Cypress不僅可以修改進出瀏覽器的所有內容,還可以更改可能影響自動化瀏覽器操作的代碼。這便得Cypress相對於其它測試工具來講不僅能從根本上控制整個自動化測試的流程,還可以提供穩定性更加可靠的結果 。

三:Cypress的八大特性

  1. 時間穿梭:Cypress會在測試運行時拍攝快照。只需將鼠標懸停在“ 命令日志”中的命令上,即可准確查看每一步都發生了什么

  2. 可調試性:停止猜測你的測試失敗的原因。直接從熟悉的工具如Chrome DevTools進行調試。我們可讀的錯誤和堆棧跟蹤使調試更加快速便捷。

  3. 實時重載:每當你對測試進行更改時,Cypress都會自動重新加載。查看應用程序中實時執行的命令。

  4. 自動等待:不要在測試中添加等待或休眠。Cypress在繼續下一步之前會自動等待元素至可操作狀態時才會執行命令或斷言。異步操作不再是噩夢。

  5. 間諜,存根和時鍾:Cypress允許你驗證並控制函數行為,Mock服務器響應或更改系統時間,你喜歡的單元測試就在眼前。

  6. 網絡流量控制:Cypress可以Mock服務器返回結果,無須連接后端服務器即可實現輕松控制,模擬網絡請求。

  7. 運行結果一致性:Cypress架構不使用Selenium或Webdriver,在運行速度,可靠性測試,測試結果一致性上均有良好的保障。

  8. 截圖和視頻:Cypress在測試運行失敗時自動截圖,在無頭運行時錄制整個測試套件的視頻,使你輕松掌握測試運行情況。

四:下載安裝node.js

1.下載地址:https://nodejs.org/en/

2.安裝路徑

3..配置npm環境變量

五:下載安裝Cypress

Cypress官網:https://www.cypress.io/

1.執行npm init初始化生成package.json文件

命令方式進入要安裝Cypress的文件夾下(如D:\Cypress)

說明:package.json文件也可以由用戶自己創建,通常存放於項目根目錄,它定義了這個項目所需要的各種模塊及項目的各項配置信息,如名稱,版本,依賴,腳本等。

2.Cypress安裝方法一:通過npm安裝

npm install cypress --save-dev

解決辦法,進入package.json文件,將name的值cypress改為cypress-dev即可

3.安裝完成后路徑

4.Cypress安裝方法二:直接下載zip文件:

https://download.cypress.io/desktop

六:運行Cypress

方法一:直接點擊運行Cypress.exe

方法二:修改package.json文件scripts添加

"cypress:open":"cypress open"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM