天天看點

自動化測試架構[Cypress架構拆解]

閱讀本篇博文前,請確定已經閱讀過自動化測試架構[cypress測試執行個體凸顯其優勢] 閱讀本篇博文前,請確定已經閱讀過自動化測試架構[cypress環境搭建與配置詳解]

在cypress安裝完成後,用<code>cypress open</code>指令首次打開cypress,會自動進行初始化配置并生成一個預設的檔案夾結構,如下圖所示

自動化測試架構[Cypress架構拆解]

fixture通常配合cy.fixture()指令來使用,主要用來存儲測試用例的外部靜态資料,通常目錄是在cypress/fixtures中,但也可以配置到另一個目錄;靜态資料通常存儲在.json字尾檔案裡,例如自動生成的<code>example.json</code>

自動化測試架構[Cypress架構拆解]
這裡的資料通常是某個網絡請求的對應響應部分,包括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>,并寫入如下代碼

執行測試,結果如下圖所示

自動化測試架構[Cypress架構拆解]

繼續閱讀