一文詳解e2e測試之cypress的使用
用e2e測試想要達到什么目的?
- 將被測試的單元放在特定環(huán)境下,選中并讓它發(fā)生交互,達到目標結果。
- 在測試之前,為測試用例創(chuàng)造它需要的環(huán)境,并進行測試,在測試結束后,將環(huán)境恢復原狀。
如何啟動cypress測試?
- 在項目中安裝cypress 插件庫
- 在根目錄下可看見自動生成的cypress文件夾以及cypress.config.ts,在cypress.config.ts中配置baseUrl等
- 編寫測試:在cypress/e2e文件夾下編寫測試用例
- 啟動測試: 終端輸入 npx cypress open, 并選擇e2e,選擇瀏覽器,點擊需要測試的用例即可
了解目錄結構:
- e2e: 存放編寫的測試用例
- support:cypress/support/index.js文件在每個規(guī)范文件之前運行,比如有些動作是適用于全局的,那么就可以放在這里。
- global.d.ts:存放編寫測試用例中的typing,尤其是自定義的函數(shù)需要編寫的ts都是存放在這里。
- fixtures:存放測試數(shù)據(jù)的地方,可以理解為放接口mock數(shù)據(jù)的地方
- plugins:存放插件,插件可以是自己編寫的,也可以是第三方,插件是在項目加載之前、瀏覽器啟動之前和測試執(zhí)行期間在Node中執(zhí)行用的。
- integration: 一般測試用例會寫在integration下面,自帶官方示例測試用例文件。
- screenshot:當測試發(fā)生錯誤時,cypress會自動截圖并保存
- video:當測試發(fā)生錯誤時,cypress會自動錄屏并保存
- downloads: 存放測試過程中下載的文件
基礎概念
Cypress和cy的區(qū)別 cypress是一個全局對象,在整個測試的過程中會持續(xù)存在,當你希望跟蹤整個程序未捕獲或者失敗事件時,比較有用。(以下代碼是自定義的fail方法,可以在各個測試用例中使用)
Cypress.on('fail', (error, runnable) => {
throe error;
})
cy是單個測試的對象,它將綁定到每一個單獨測試中,并且,在完成這個測試后,自動解綁和清理。
describe( )/context( ) 和 it( ) 對于一條可執(zhí)行的測試用例來說,describe()和it()是兩個必要的組成部分,describe()表示測試套件,context()是它的別名,可以直接用context()代替
鉤子函數(shù) - before() 運行cypress時,在開始測試前都會調用這個鉤子函數(shù),在鉤子中,可以將接口代理到mock數(shù)據(jù) - after() 在所有用例跑完后運行 - beforeEach() 每個用例開始前都會運行 - afterEach() 每個用例結束后運行。有人會在這里寫下以下代碼:
describe('loggout', () => {
beforeEach(() => {
cy.login();
})
afterEach(() => {
cy.logout();
})
})
這樣的行為可能是不必要的,原因是,當測試用例跑完后,這些登錄狀態(tài)不僅在測試時被修改,而且會保存到程序的狀態(tài)中。意味著你測試完后退出登錄后,當你運行代碼時,就會發(fā)現(xiàn)自己回到了登錄頁(cypress保存了你退出登錄的狀態(tài))。
使用場景:
如果你想要在不同的測試用例中共享同一個變量,你可以在before或beforeEach鉤子中定義這個變量,在隨后的用例中使用它。
在開始測試前,準備好測試環(huán)境(向后端發(fā)起請求,準備好測試數(shù)據(jù),或者mock數(shù)據(jù))
以上就是一文詳解e2e測試之cypress的使用的詳細內容,更多關于e2e測試cypress使用的資料請關注腳本之家其它相關文章!
相關文章
js和jQuery以及easyui實現(xiàn)對下拉框的指定賦值方法
下面小編就為大家分享一篇js和jQuery以及easyui實現(xiàn)對下拉框的指定賦值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Javascript 使用function定義構造函數(shù)
Javascript并不像Java、C#等語言那樣支持真正的類。但是在js中可以定義偽類。做到這一點的工具就是構造函數(shù)和原型對象。首先介紹js中的構造函數(shù)。2010-02-02
使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
今天工作中遇到個小問題,情況如下,當我在后臺頁面中設置Checkbox的Enable的值為false時,我在前端頁面中使用腳本(chk.disabled = false),無法改變disabled的值為false,下面看看小編是怎么解決此問題的,需要的朋友一起了解了解吧2015-09-09
解析JavaScript中 querySelector 與 getElementById 方法的區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法的區(qū)別,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
uniapp?js修改數(shù)組某個下標以外的所有值完整代碼
在UniApp開發(fā)中,經常需要對數(shù)組進行操作,若要修改數(shù)組中特定下標外的所有元素,可通過map方法或for循環(huán)實現(xiàn),map方法適用于生成新數(shù)組,for循環(huán)則直接修改原數(shù)組,根據(jù)項目需求選擇最佳方案,需要的朋友可以參考下2024-09-09

