首頁 >web前端 >js教程 >掌握 Cypress API 測試:附有範例的綜合指南

掌握 Cypress API 測試:附有範例的綜合指南

DDD
DDD原創
2024-12-27 10:48:10146瀏覽

應用程式介面,通常稱為 API,是軟體開發生命週期的重要方面,不僅從開發的角度來看,而且從測試的角度來看。這些 API 促進不同系統之間的互動以交換資料。因此,徹底測試這些 API 以確保應用程式的無縫運作變得極為重要。

在本文中,我們將探索使用 Cypress 測試框架進行 API 測試,並了解如何自動化 API 來進行高效測試。我們將在本文中介紹以下幾點 -

API 檢定概述

API 測試涉及向後端伺服器發送 HTTP 請求(無論是 GET、POST、PUT、DELETE(或其他方法))並檢索回應。一旦檢索到回應,就會對其進行驗證以確保已收到預期值。以下列出了 API 測試的一些關鍵面向

  • 驗證狀態代碼 – 對回應中的狀態代碼進行驗證,以確保收到所需的狀態代碼。例如,需要 200 個狀態代碼才能確保成功。您可以參考 wiki 文件中用於 HTTP 請求的其他標準狀態碼。
  • 回應正文斷言 – 驗證 HTTP 回應正文,以確保 XML 或 JSON 包含預期資料並具有正確的結構。
  • 測試請求參數 – 透過在參數和標頭中傳遞不同的值來驗證 API 的行為。
  • 身份驗證和授權 - 驗證正確的身份驗證機制和安全方面。 在測試 API 時,考慮上述幾點以確保 API 的端對端功能沒有錯誤。

利用 Cypress 進行 API 檢定

Cypress 是一種流行的前端測試工具,用於瀏覽器和端到端自動化測試。 Cypress 具有網路請求功能,這使其成為 API 測試的好選擇。 Cypress 為 API 測試提供的一些關鍵功能是 -

  • 語法熟悉 – 與 UI 測試類似,Cypress API 指令使用相同的 .should() 和 .then() 語法。
  • 內建斷言 –我們可以輕鬆地使用 Cypress 提供的斷言來斷言 API 請求的狀態代碼、標頭甚至回應正文。
  • 重試失敗的請求 –Cypress 會自動重試失敗的請求,以確保沒有網路或其他類似問題。

詳細的文件 –Cypress 擁有詳細記錄的請求和斷言,可以輕鬆獲得運行支援。

Cypress API 測試的主要特點

Cypress 具有多種功能,可協助您有效且有效率地執行 API 測試。以下討論一些功能 -

  • cy.wait() – 提供等待網路請求的機制,並協助載入非同步資料。
  • cy.route() – 協助將測試請求路由到特定處理程序。
  • cy.server() – 幫助維護測試套件的整個伺服器。
  • 測試運行者 – 幫助並行執行測試以實現快速週轉時間。
  • cy.login() – 透過在呼叫之前使用單一指令設定授權標頭來協助發出安全的 API 請求。
  • cy.intercept() – 控制回應,或透過攔截請求來模擬行為。 有了這些功能,使用者就可以非常輕鬆方便地開始編寫具有增強功能和高效框架的 API 測試。

現在我們了解了 Cypress 如何幫助自動化我們的 API,讓我們使用 Cypress 編寫一個簡單的 API 測試。但在此之前,您需要確保滿足以下先決條件 -

  • 安裝 Visual Studio 等 IDE(這是最常用的 IDE,但您也可以參考其他 IDE,例如 IntelliJ)
  • 在系統中安裝 Node.js 現在讓我們逐步完成使用 Cypress 編寫第一個 API 測試的步驟。

使用 Cypress 寫第一個 API 檢定

在本文中,我們將介紹使用 GET、POST、PUT 和 DELETE 方法發送 HTTP 請求的簡單場景。但在開始編寫測試腳本之前,我們將設定環境。

  1. 在您的系統本機建立一個資料夾,我在我的系統中建立了一個名為 CypressAPITests 的資料夾。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

柏樹 API
2.接下來,開啟 Visual Studio Code 編輯器並開啟在步驟 #1 中建立的資料夾。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

3.現在您已經開啟了該資料夾,下一步是設定節點項目。為此,請在終端機中使用命令 npm init -y,這將建立一個 package.json 檔案。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

4.現在,我們將使用命令 npx cypress install 從終端機安裝 Cypress(如果尚未安裝)。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

5.現在,我們將為測試建立設定文件,為此,我們將在終端機中運行命令 npx cypress open。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

6. Cypress 工具開啟後,選擇 E2E 測試。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

7.點選下一個畫面上的「繼續」。

8.設定檔設定完成後,回到 Visual Studio Code 編輯器,您將看到設定檔已建立。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

9.至此Cypress已經安裝成功,環境也已經搭建完畢。我們現在將開始編寫測試。

我們將使用一些虛擬 API 呼叫來示範 Cypress API 自動化。

在 Visual Studio Code 編輯器中,在 Cypress 目錄下建立一個資料夾 e2e。在 e2e 資料夾下,您可以建立另一個名為 APITests 的資料夾。請注意,您可以根據需要選擇資料夾名稱。

現在我們將開始編寫我們的第一個測試文件。我們將在 APITests 資料夾下建立一個檔案。我們將其命名為 HttpGetRequest。該檔案名稱的副檔名為 .cy.js,如下面的快照所示 -

Mastering Cypress API Testing: A Comprehensive Guide with Examples
現在我們開始編寫主要程式碼。在此之前,讓我們先來看看請求的基本語法 -

cy.request(METHOD,url,body)

在使用 Cypress 發出的請求中,url 是必填參數,但 Method 和 body 等其他參數是可選的。您可以查看 Cypress 官方文件中的不同請求語法,以更好地了解我們如何以不同的方式使用它。

在我們的範例場景中,我們將使用 GET 方法來取得一些資源,因此我們將使用 Method 和 url 作為 cy.request 的參數。

cy.request('GET','https://dummy.restapiexample.com/api/v1/employees')
此命令將對伺服器進行 API 呼叫。

接下來,我們將斷言一些回應值,例如狀態碼。

.its('狀態')
.should('等於',200);
這行程式碼將驗證回應狀態碼並斷言其值為 200。

讓我們看看這段程式碼組合在一起後的樣子:

描述('HTTPGet',()=>{

it('GET 請求',()=>{

cy.request('GET','https://dummy.restapiexample.com/api/v1/employees')
.its('狀態')
.should('等於',200);

})

})
編寫完 GET 請求的程式碼後,我們將執行相同的操作。要執行它,我們可以使用兩種方式中的任何一種 -

  1. 透過終端執行
  2. 透過Cypress工具執行 我們將一一看看如何執行。

透過終端執行

要透過終端機執行 Cypress 程式碼,請開啟終端機視窗並簡單地傳遞命令:

npx cypress run –spec「檔案路徑」

在上面的命令中,檔案路徑是您要執行的檔案的相對路徑。下面的快照顯示了 HTTPGetRequest 檔案在我的系統上的執行情況 -

Mastering Cypress API Testing: A Comprehensive Guide with Examples

可以看到測試執行成功,我們的API測試已經通過了。

現在讓我們嘗試透過 Cypress Tool 執行相同的測試。

透過 Cypress 工具執行

1.只需編寫指令 npx cypress open 即可開啟工具。

  1. 看到工具視窗開啟後,按一下「E2E 測試」。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. 現在選擇任意瀏覽器。我選擇 Electron。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. 您將看到 Electron 瀏覽器打開,並顯示我們編寫的 Visual Studio Code 規格。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. 選擇 HttpGetRequest,您將看到執行開始並顯示日誌。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

您已經執行了第一個 Cypress API 自動化測試。我們現在將增強程式碼以執行其他幾個 HTTP 方法。

POST 方法

執行 POST HTTP 請求的程式碼-

描述('HTTPGet',()=>{

it('POST 請求',()=>{
cy.request({
方法:'POST',
url: 'https://dummy.restapiexample.com/api/v1/create',
正文:{
"name":"測試貼文",
"工資":"1234",
"年齡":"23"

}
})
.its('狀態')
.should('等於',200);
})
})
執行上述程式碼後,日誌將顯示執行結果,如下所示-

Mastering Cypress API Testing: A Comprehensive Guide with Examples
在接下來的示範中,我們將使用另一個假 API 集合,並了解 HTTP 請求方法如何為它們運作。

PUT 方法

執行 PUT HTTP 請求的程式碼-

描述('HTTPPut',()=>{

it('PUT 請求',()=>{
cy.request({
方法: 'PUT',
url: 'https://jsonplaceholder.typicode.com/posts/1',
正文:{
id: 1,
title: '這是 PUT 更新',
body: '這是 PUT 更新正文',
使用者 ID: 1,
}
})
.its('狀態')
.should('等於',200) ;
})
})

上面程式碼的執行結果顯示在下面-

Mastering Cypress API Testing: A Comprehensive Guide with Examples

刪除方法

執行刪除 HTTP 請求的程式碼(請注意,我在上面使用的相同範例中附加了以下程式碼段)-

it('刪除請求',()=>{
cy.request({
方法:'刪除',
url: 'https://jsonplaceholder.typicode.com/posts/1',
})
.its('狀態')
.should('等於',200) ;
})
由於 PUT 和 DELETE 請求都在同一個檔案中,因此這兩個方法都被執行,結果如下所示 -

Mastering Cypress API Testing: A Comprehensive Guide with Examples
所以,就是這樣,您現在知道如何使用 Cypress 執行不同方法的基本 HTTP 請求。現在您可以繼續嘗試在您的專案中實作 Cypress API 測試,看看您能夠如何輕鬆地以快速週轉時間測試 API。

結論

在了解了 API 和 Cypress 的 API 測試基礎知識後,我們得出以下幾點結論 -

  1. Cypress API 測試提供了一組強大的工具,可幫助您熟悉 Cypress 的 UI 測試語法。
  2. 我們可以方便地使用斷言來驗證回應狀態碼和任何其他回應參數。

資料來源:本文原刊於 testgrid.io。

以上是掌握 Cypress API 測試:附有範例的綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn