【cypress】6. cypress的預設檔案結構介紹

把蘋果v咬哭發表於2021-05-05

通過之前的一些介紹,已經大概其明白cypress是個啥,但是具體使用的細節點還有很多,需要一步步的去學習。

在安裝好cypress之後,會生成一個預設專案,這個專案結構裡的各個資料夾是幹嘛使的呢?

一、fixtures

這個名稱簡直太熟悉了,pytest裡我研究最多的就是關於fixtures的用法了。不過在cypress中,倒也沒那麼複雜了,主要是用來存放靜態資料用的。這個位置
可以通過配置指定其他的目錄。

比如說測試的時候需要用到某個依賴介面的返回值,那麼就可以直接copy介面真正的返回值到字尾是.json的檔案裡,配合cy.fixture()就可以使用這個
檔案裡的資料了,不需要真正的去請求那個介面。

示例程式碼裡有個example.json的檔案,裡面內容是:

{
  "name": "Using fixtures to represent data",
  "email": "hello@cypress.io",
  "body": "Fixtures are a great way to mock data for responses to routes"
}

在測試檔案裡就可以使用了。當發出一個匹配GET **/comments/*的請求時,Cypress會攔截它並使用example.json中的物件進行回覆。

所以,使用fixtures有如下優點:

  • 去除對外部功能模組的依賴。
  • 可以在測試檔案裡用上你想要的返回值。
  • 因為沒有真正傳送網路請求而是直接從本地檔案裡取,所以速度也更快了。

二、integration

這裡就是存放測試檔案的地方了,官方的示例測試用例檔案有很多,可以閱讀之後再執行一下。


示例程式碼裡都是.js檔案,不過除了js檔案之外,還有幾種字尾名的檔案,cypress也會把它當成測試檔案:

  • .jsx,是帶有擴充套件的JavaScript檔案,其中可以包含處理xml的ECMAScript。
  • .coffee,是一套JavaScript的轉移語言,相比於JavaScript,語法更嚴格。
  • .cjsx,CoffeeScript中的jsx檔案。

這個同樣也可以配置到別的目錄。

三、plugins

用於存放外掛。
外掛比較特殊,是在專案載入之前、瀏覽器啟動之前和測試執行期間在Node中執行用的。因為cypress的一個獨有特點就是所有在瀏覽器之內執行,因此
如果需要做一些瀏覽器之外的動作,直接通過cypress就比較困難了。這時候就要通過外掛去擴充套件cypress的內部行為,也可以自定義自己的外掛。
這點跟pytest的外掛差不多意思,都是用來擴充套件框架用的。

應用場景舉例:

  • 動態修改環境變數。
  • 修改特定瀏覽器的啟動引數。

四、support

預設情況下,專案都會包含一個cypress/support/index.js支援檔案。在每個測試檔案執行之前,cypress都會自動載入這個支援檔案。
比如有些動作是適用於全域性的,那麼就可以放在這裡。比如說,在cypress/support/index.js裡增加如下程式碼:

beforeEach(() => {
  cy.log('在每個測試執行前都會執行我cypress/support/index.js!!!!!!')
})

執行後,會看到每個測試用例都會有個log輸出。

以上就是預設結構的介紹,cypress是支援自定義專案結構的,這個到後面繼續了。

相關文章