e2e測試之cypress怎么使用

今天小編給大家分享一下e2e測試之cypress怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

用e2e測試想要達到什么目的？

• 將被測試的單元放在特定環境下，選中并讓它發生交互，達到目標結果。

• 在測試之前，為測試用例創造它需要的環境，并進行測試，在測試結束后，將環境恢復原狀。

如何啟動cypress測試？

• 在項目中安裝cypress 插件庫

• 在根目錄下可看見自動生成的cypress文件夾以及cypress.config.ts，在cypress.config.ts中配置baseUrl等

• 編寫測試：在cypress/e2e文件夾下編寫測試用例

• 啟動測試： 終端輸入 npx cypress open， 并選擇e2e，選擇瀏覽器，點擊需要測試的用例即可

了解目錄結構：

• e2e: 存放編寫的測試用例

• support：cypress/support/index.js文件在每個規范文件之前運行，比如有些動作是適用于全局的，那么就可以放在這里。

• global.d.ts：存放編寫測試用例中的typing，尤其是自定義的函數需要編寫的ts都是存放在這里。

• fixtures：存放測試數據的地方，可以理解為放接口mock數據的地方

• plugins：存放插件，插件可以是自己編寫的，也可以是第三方，插件是在項目加載之前、瀏覽器啟動之前和測試執行期間在Node中執行用的。

• integration： 一般測試用例會寫在integration下面，自帶官方示例測試用例文件。

• screenshot：當測試發生錯誤時，cypress會自動截圖并保存

• video：當測試發生錯誤時，cypress會自動錄屏并保存

• downloads: 存放測試過程中下載的文件

基礎概念

Cypress和cy的區別 cypress是一個全局對象，在整個測試的過程中會持續存在，當你希望跟蹤整個程序未捕獲或者失敗事件時，比較有用。(以下代碼是自定義的fail方法，可以在各個測試用例中使用)

	Cypress.on('fail', (error, runnable) => {
		throe error;
	})

cy是單個測試的對象，它將綁定到每一個單獨測試中，并且，在完成這個測試后，自動解綁和清理。

describe( )/context( ) 和 it( ) 對于一條可執行的測試用例來說，describe()和it()是兩個必要的組成部分，describe()表示測試套件，context()是它的別名，可以直接用context()代替

鉤子函數 - before() 運行cypress時，在開始測試前都會調用這個鉤子函數，在鉤子中，可以將接口代理到mock數據 - after() 在所有用例跑完后運行 - beforeEach() 每個用例開始前都會運行 - afterEach() 每個用例結束后運行。有人會在這里寫下以下代碼：

	describe('loggout', () => {
		beforeEach(() => {
			cy.login();
		})
	
		afterEach(() => {
			cy.logout();
		})
	})

這樣的行為可能是不必要的，原因是，當測試用例跑完后，這些登錄狀態不僅在測試時被修改，而且會保存到程序的狀態中。意味著你測試完后退出登錄后，當你運行代碼時，就會發現自己回到了登錄頁(cypress保存了你退出登錄的狀態）。

使用場景：

如果你想要在不同的測試用例中共享同一個變量，你可以在before或beforeEach鉤子中定義這個變量，在隨后的用例中使用它。

在開始測試前，準備好測試環境（向后端發起請求，準備好測試數據，或者mock數據）

以上就是“e2e測試之cypress怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。