如何同時運行 cypress run 和 cypress open

Cypress 是一個為 Web 應用程式建構的強大的端到端測試框架。它旨在使測試變得簡單可靠，使開發人員和 QA 工程師能夠測試從簡單互動到複雜用戶工作流程的所有內容。借助 Cypress，您可以建立模擬使用者操作、驗證前端行為並以最少的設定確保 UI 功能的測試。

賽普拉斯有什麼用途？

Cypress 主要用於 Web 應用程式中的端到端測試，但它對於前端環境中的整合和單元測試也很有效。以下是一些常見用例：

• 自動化使用者流程：測試複雜的使用者流程，例如驗證、表單提交和電子商務交易。

• 測試響應式設計：Cypress 允許跨不同視口大小進行測試，使其成為響應式設計測試的理想選擇。

• 回歸測試：透過自動化測試案例，您可以快速驗證新的程式碼變更是否沒有引入錯誤。

• UI 組件測試：Cypress 可以與 Storybook 等工具一起使用來單獨驗證前端組件，確保它們在各種場景中按預期運行。

Cypress 提供了強大的儀表板和 CLI，可以無縫整合到 CI/CD 管道中，使其成為現代 Web 開發中自動化、持續測試的首選。

使用 Cypress 執行測試

可以透過兩種主要方式在 Cypress 中執行測試：使用測試運行器 (GUI) 和命令列介面 (CLI)。

這是兩種方法的快速指南：

使用測試運行器 (GUI)：

要與 Cypress Real World 應用程式 互動使用 Cypress Test Runner，請依照下列步驟操作。該應用程式提供了賽普拉斯實際測試的可靠範例，以及用戶註冊、登入和交易流程的場景。

我們以 Cypress 的範例應用程式「Cypress Real World App」為例。

在本地設定並運行 Cypress Real World 應用程式：

這些是設定範例應用程式的初始步驟

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

開啟 Cypress 測試運行器：

現在，以互動模式開啟Cypress Test Runner：

運行指令：

npx cypress open

這將啟動 Cypress Test Runner GUI，您可以在其中查看並選擇要執行的測試。

點擊 E2E 後，您可以看到此儀表板，其中在 cypress/tests 下包含完整的測試清單。

讓我們在 cypress/tests/ui/custom.spec.ts 下的目錄中建立一個名為 custom.spec.ts 的新測試

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

1. 設定（beforeEach）：在每次測試之前，資料庫都會以一致的狀態開始，並攔截註冊和 GraphQL 請求的 API 呼叫以進行監控。

2. 檢定：

npx cypress open

每項測試都確保關鍵功能的安全性和用戶友好的帳戶管理。

注意：嘗試向此添加註銷和用戶名不正確的流程

從 CLI 執行測試：

在 CI 環境或批次測試執行中，CLI 提供了一種簡化的方法。執行所有測試或指定單獨的測試檔案：

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

賽普拉斯的好處

賽普拉斯以其快速執行、易於設定和強大的測試功能而聞名。以下是一些主要好處：

• 即時重新載入和互動式測試：Cypress 透過在發生變更時重新載入測試來提供即時回饋，讓開發人員立即了解應用程式的行為。

• 無碎片測試：憑藉其獨特的架構，Cypress 減少了測試中的碎片，使您的測試結果更加可靠。

• 自動等待：Cypress 等待元素載入、回應和渲染，因此您不需要添加明確等待。

• 內建斷言和模擬：Cypress 附帶了一組豐富的斷言和工具，用於模擬 API 回應和模擬使用者互動。

就像 Cypress 透過自動化使用者互動來支援高效的 E2E 測試一樣，Keploy 透過專注於後端為測試帶來了強大的維度。

Cypress 擅長驗證前端和使用者體驗，而 Keploy 則透過自動產生和維護 API 測試來補充它，而無需額外的腳本。

Keploy 對於捕捉現實世界的互動並將其轉化為可執行測試特別有效，確保隨著應用程式規模的擴大後端一致性和資料可靠性。

• 自動化測試平台：Keploy 專注於為後端服務自動產生測試，特別是 API 和資料庫互動。

• 捕獲和重播：Keploy 捕獲真實世界的流量並在測試環境中重播，創建真實的測試案例。

• 無程式碼測試產生：專為輕鬆而設計，它無需自訂腳本即可產生測試。

使用 Keploy 進行端對端檢定：

• 以 API 為中心的 E2E 測試：自動化後端組件的端到端測試，確保後端功能作為一個單元進行驗證。

• 錯誤偵測與重播：擷取 API 請求/回應、重播互動並儘早偵測迴歸。

• 一致的資料驗證：追蹤資料流中的回應和變化，確保跨部署的準確性。

• 無縫集成：輕鬆與 CI/CD 管道集成，幫助團隊自動化對後端變更進行端到端檢查。

這個領域有很多工具，每個工具都提供適合不同類型測試環境的功能，從 Puppeteer 中的瀏覽器特定測試到 Playwright 和 Selenium 中的跨瀏覽器相容性。

選擇正確的工具最終取決於您的測試需求和應用程式要求。

常問問題

Cypress 可以用於後端測試嗎？

Cypress 主要是一個前端測試工具。雖然它可以與後端 API 和模擬回應交互，但它並不是為廣泛的後端測試而設計的。對於特定於後端的測試，Keploy 等工具可以透過為伺服器端功能提供單元和整合測試功能來補充 Cypress。

Cypress 支援跨瀏覽器測試嗎？

是的，Cypress 支援 Chrome、Edge 和 Firefox。然而，與 Selenium 或 Playwright 等提供更廣泛的跨瀏覽器相容性的工具相比，它的支援有限。

Cypress 如何處理 API 測試？

Cypress 可以透過直接從測試程式碼發出 HTTP 請求來執行 API 測試。您可以使用 cy.request() 來驗證 API 回應，以便輕鬆地在同一端對端測試框架中測試 API。

如何調試失敗的 Cypress 測試？

Cypress 預設提供詳細的日誌和螢幕截圖，測試運行器可讓您以視覺方式與測試進行互動。您可以新增 .only 來隔離失敗的測試，使用 cy.pause() 停止執行，並利用 Chrome DevTools 進行進一步偵錯。

以上是如何同時運行 cypress run 和 cypress open的詳細內容。更多資訊請關注PHP中文網其他相關文章！