閱讀本篇博文前,請確定已經閱讀過自動化測試架構[cypress測試執行個體凸顯其優勢] 閱讀本篇博文前,請確定已經閱讀過自動化測試架構[cypress環境搭建與配置詳解]
在cypress安裝完成後,用<code>cypress open</code>指令首次打開cypress,會自動進行初始化配置并生成一個預設的檔案夾結構,如下圖所示
fixture通常配合cy.fixture()指令來使用,主要用來存儲測試用例的外部靜态資料,通常目錄是在cypress/fixtures中,但也可以配置到另一個目錄;靜态資料通常存儲在.json字尾檔案裡,例如自動生成的<code>example.json</code>
這裡的資料通常是某個網絡請求的對應響應部分,包括http狀态碼和傳回值,如果測試中需要對某些外部接口進行通路并依賴其傳回結果,則可以使用fixtures而無須真正的通路這個接口,使用fixtures消除了對外部功能子產品的依賴,可以使用fixtures提供的固定的期望的傳回值,同時也因為無需真正的發送網絡請求然後依賴其傳回結果使得測試執行更有效率
測試代碼檔案,預設位于cypress/integration路徑下,也可以配置到另一個目錄中,且以如下字尾的檔案均會被cypress視為測試檔案
.js檔案:普通的javascript編寫的檔案
.jsx檔案:帶有擴充的javascript檔案,其中可能包含處理xml的ecmascript
.coffee檔案:是一套javascript的轉譯語言,相對于javascript它的文法更嚴格
.cjsx檔案:coffeescript中的jsx檔案
建立測試檔案很簡單,隻要建立上述格式的檔案,便可以使用test runner去執行
cypress獨一無二的優點便是測試運作在浏覽器之内,但也帶來了問題,就是在浏覽器之外的通信變得很困難,為了解決此類問題,cypress提供了現成的插件,當然也可以自定義插件,預設情況下插件位于<code>cypress/plugins/index.js</code>中,也可以配置到另一個目錄下,在每個測試檔案運作之前,cypress都會自動加載插件檔案<code>cypress/plugins/index.js</code>
通常情況下,插件的應用包括“
動态更改來自<code>cypress.json</code>,<code>cypress.env.json</code>,<code>cli</code>或系統環境變量等
修改特定浏覽器的啟動參數
将消息直接從測試代碼傳遞到後端
該路徑下通常放置可重用的配置,例如通用函數或全局預設配置等,預設位于<code>cypress/support/index.js</code>,也可以配置到另一個目錄,每個測試檔案運作之前,cypress都會自動加載<code>cypress/support/index.js</code>
實際使用非常簡單,隻需要在<code>cypress/support/index.js</code>檔案中使用<code>beforeeach()</code>函數即可,例如要實作每次測試運作前列印出所有的環境變量,如下代碼所示
cypress不僅支援使用者自定義檔案結構,還支援使用者自定義cypress的各項配置,cypress通過<code>cypress.json</code>檔案來實作各項配置的自定義,當一個項目被添加到cypress中後,該檔案就會被建立在與cypress同級目錄下,它用來儲存projectid和任何使用者定義的配置資訊
配置項
預設值
描述
baseurl
null
通常就設定為系統主域名
env
{ }
任何想用作環境變量的變量就都可以設定在env裡
ignoretestfiles
<code>*.hot-update.js</code>
忽略某些測試用例,被此選項規則比對的測試用例不會被執行
numtestskeptinmemory
50
保留在記憶體中的測試用例(主要是快照和指令資料)條數,預設50,過大将消耗大量記憶體
port
cypress占用的端口号,預設随機生成
reporter
spec
在cypress運作期間使用哪個reporter,例如mocha内置的reporter,teamcity和junit等
reporteroptions
reporter支援的選項配置
testfiles
<code>**/*.*</code>
要加載的測試檔案,可以指定具體檔案,也可以模糊比對
watchforfilechanges
true
cypress在運作中自動檢測檔案變化,當檔案有變化時,則自動重新運作受影響的測試用例
defaultcommandtimeout
4000
指令預設逾時時間,機關毫秒
exectimeout
60000
在cy.exec()指令執行期間,等待系統指令完成執行的逾時時間,機關毫秒
tasktimeout
在cy.task()指令執行期間,等待任務完成執行的逾時時間,機關毫秒
pageloadtimeoutpage
等待頁面加載或cy.visit(),cy.go(),cy.reload()指令觸發其頁面加載事件的逾時時間,機關毫秒
requesttimeout
5000
等待cy.wait()指令中的xhr請求發出的逾時時間,機關毫秒
responsetimeout
30000
cy.request(),cywait(),cy.fixture(),cy.getcookie(),cy.getcookies(),cy.setcookie(),cy.clearcookie(),cy.clearcookies()和cy.screenshot()指令的響應逾時時間,機關毫秒
cypress支援使用者自定義檔案結構
fileserverfolder
項目根目錄
fileserver目錄
fixturesfolder
cypress/fixtures
fixtures預設檔案夾,可更改預設值為false來禁用它
integrationfolder
cypress/integration
測試用例預設檔案夾
pluginsfile
cypress/plugins/index.js
插件預設檔案夾,可以更改預設值為false來禁用它
supportfile
cypress/support/index.js
同樣可以更改預設值為false來禁用它
videosfolder
cypress/videos
運作期間儲存視訊的預設路徑
screenshotsfolder
cypress/screenshots
測試失敗或者cy.screenshot()指令引發的截圖預設存放路徑
cypress在test runner運作期間,會顯示一個可視視圖
viewportheight
660
被測應用程式視圖下應用程式的預設高度,機關像素(可以使用cy.viewport()指令覆寫)
viewportwidth
1000
被測應用程式視圖下應用程式的預設寬度,機關像素(可以使用cy.viewport()指令覆寫)
更多的配置項可參考cypress官方
除了直接在cypress.json檔案裡更改配置項之外,cypress還允許使用<code>cypress.config()</code>去擷取或者覆寫某些配置項,文法如下
在<code>cypress/support/index.js</code>寫入如下代碼
在<code>cypress/integration/</code>建立檔案<code>testconfig.js</code>,并寫入如下代碼
執行測試,結果如下圖所示