Ecom 賽普拉斯測試

使用Cypress 進行E2E 測試教您如何使用Cypress 執行端到端(E2E) 測試<script> </script>

什麼是端到端測試？

端到端測試 (E2E) 是自動化測試，用於驗證應用程式從開始到結束的完整行為，模擬使用者與介面的互動。這些測試很重要，因為它們驗證應用程式的所有部分在真實環境中是否按預期正常運作。

賽普拉斯：它是什麼以及它如何運作？

Cypress 是一個用於 Web 應用程式自動化測試的工具。它被設計為易於使用、功能強大且快速。它允許您編寫與應用程式的使用者介面互動的測試，就像使用者一樣，點擊按鈕、填寫表單、驗證文字等等。

• 即時測試：它在瀏覽器本身中執行測試，讓您可以即時查看正在運行的測試。
• 易於設定：無需複雜的設定即可開始。
• 快速執行：由於Cypress在瀏覽器中運行，因此與其他E2E測試工具相比，測試執行速度更快。
• CI/CD 整合：它可以輕鬆與 CI/CD 管道整合以實現測試自動化。

模組 34 演練

1.概念化 Cypress 工具

E2E測試。它旨在直接與瀏覽器中的應用程式程式碼交互，使測試更有效率。

2.在機器上安裝 Cypress

3.啟動賽普拉斯

這將開啟 Cypress Test Runner，您可以在其中看到瀏覽器中執行的測試。它還會在您的專案中建立一個 cypress 資料夾，其中儲存所有測試和配置。

4.使用描述函數將測驗分組

在 Cypress（和 Jest）中，我們使用 describe 將屬於同一套件或模組的多個測試分組。這有助於以更結構化的方式組織測試。

在上面的例子中：

• describe 用於將登入相關測試分組。
• 它定義了組內的特定測試。其內部接下來是執行驗證的程式碼（測試步驟）。

5.使用 it 函數

it 函數用來定義各個測試案例。每個測試案例必須是獨立的並代表應用程式的特定功能或行為。

6.使用 cy.get 函式檢索元素

cy.get 函數用於選擇要在測試中互動的頁面元素。

範例：

這裡，cy.get 搜尋 name="username" 的輸入和 type="submit" 的提交按鈕，然後執行 type 和 點擊。

7. VScode 與自動完成簡介

您可以使用 VSCode 編輯測試並利用 Cypress 自動完成功能，這可以透過在您鍵入時建議方法和命令來輕鬆正確編寫測試。

8.使用層級關係

Cypress 讓您可以使用更複雜的 CSS 選擇器根據頁面層次結構選擇元素。例如，您可以選擇具有特定類別的 div 內的按鈕：

9.建構過濾測試

過濾測試的一個例子是檢查應用過濾器時項目清單是否正確更新。 Cypress 讓您可以輕鬆執行此類測試，與過濾器互動並檢查結果。

10。使用 beforeEach 函數

beforeEach 函數對於在每次測試之前配置應用程式狀態非常有用。當您需要在執行測試之前確保應用程式處於初始狀態時，這一點尤其重要。

11。了解 Cypress 返回類型

Cypress 使用 Promise 來管理非同步時間，但它會自動處理這些 Promise，從而使測試變得更簡單。在許多情況下沒有必要使用await或.then()，因為Cypress在內部處理這個問題。

12。組織程式碼以減少行數

保持測驗的組織性和可重複使用性至關重要。您可以建立輔助函數並重複使用程式碼片段。

範例：

13。了解 Cypress 的其他功能

• 截圖：Cypress 可以在測試過程中自動截圖。這可以幫助您直觀地了解測試失敗時發生的情況。

• 產生報告：Cypress 讓您產生測試執行報告，這使得分析結果變得更加容易。

• Cypress Run：若要在無頭模式（沒有圖形介面）下執行測試，請使用下列指令：
  

• HTTP 請求模擬：您可以使用 Cypress 模擬伺服器回應，而無需實際呼叫。這對於使用特定資料測試場景非常有用。

14。模擬 Service Worker (MSW) 安裝

Mock Service Worker 是一個允許您在測試中攔截 HTTP 請求的工具。它可以與 Cypress 一起使用來模擬請求並控制回應。

然後您可以設定網路處理程序來攔截請求。

結論

在第 34 單元中，您學習如何使用 Cypress 對您的應用程式執行 E2E 測試，確保其在實際使用情況下正常運作。您學習如何設定 Cypress、編寫測試、與頁面元素互動以及使用 beforeEach、cy.get、螢幕截圖、報告等功能。這些測試對於確保您的應用程式正常運作並且不會引入新的錯誤至關重要。

以上是Ecom 賽普拉斯測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！