Cypress は、Web アプリケーション用に構築された堅牢なエンドツーエンドのテスト フレームワークです。テストを簡単かつ信頼性の高いものにするように設計されており、開発者や QA エンジニアは単純なインタラクションから複雑なユーザー ワークフローまであらゆるものをテストできます。 Cypress を使用すると、ユーザー アクションをシミュレートするテストを作成し、フロントエンドの動作を検証し、最小限のセットアップで UI の機能を確認できます。

サイプレスは何に使われますか?

Cypress は主に Web アプリケーションのエンドツーエンド テストに使用されますが、フロントエンド環境での統合テストや単体テストにも効果的です。一般的な使用例をいくつか示します:

• ユーザー フローの自動化: 認証、フォーム送信、電子商取引トランザクションなどの複雑なユーザー フローをテストします。

• レスポンシブ デザインのテスト: Cypress では、さまざまなビューポート サイズにわたってテストできるため、レスポンシブ デザインのテストに最適です。

• 回帰テスト: テスト ケースを自動化することで、新しいコードの変更によってバグが導入されていないことをすぐに検証できます。

• UI コンポーネント テスト: Cypress を Storybook などのツールと併用して、フロントエンド コンポーネントを個別に検証し、さまざまなシナリオで期待どおりに動作することを確認できます。

Cypress は、CI/CD パイプラインへのシームレスな統合を可能にする強力なダッシュボードと CLI を提供し、最新の Web 開発における自動化された継続的テストの有力な選択肢となっています。

Cypress を使用したテストの実行

テストは、テスト ランナー (GUI) とコマンドライン インターフェイス (CLI) を使用するという 2 つの主な方法で Cypress で実行できます。

両方の方法のクイックガイドは次のとおりです:

テスト ランナー (GUI) の使用:

Cypress Test Runner を Cypress Real World App と対話的に使用するには、次の手順に従います。このアプリは、ユーザーのサインアップ、ログイン、トランザクション フローのシナリオを含む、実際の Cypress テストの確かな例を提供します。

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

Open Cypress テスト ランナー :

次に、対話モードで Cypress Test Runner を開きます:

コマンドを実行します:

npx cypress open

これにより、Cypress Test Runner GUI が起動し、実行するテストを表示および選択できます。

E2E をクリックすると、cypress/tests の下にテストの全リストが含まれるこのダッシュボードが表示されます。

cypress/tests/ui/custom.spec.ts のディレクトリに、custom.spec.ts という名前の新しいテストを作成しましょう

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", "/");

1. Setup (beforeEach): 各テストの前に、一貫した状態で開始するようにデータベースがシードされ、サインアップの API 呼び出しと GraphQL リクエストが監視のためにインターセプトされます。

2. テスト:

* **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`.

各テストでは、安全でユーザーフレンドリーなアカウント管理のための重要な機能が保証されています。

注: これにサインアウトとユーザー名の間違ったフローを追加してみてください

CLI からのテストの実行:

CI 環境またはバッチ テストの実行では、CLI は合理化されたアプローチを提供します。すべてのテストを実行するか、個別のテスト ファイルを指定します:

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

サイプレスの利点

Cypress は、高速な実行、セットアップの容易さ、強力なテスト機能で知られています。主な利点をいくつか紹介します:

• リアルタイム リロードとインタラクティブ テスト: サイプレスは、変更が加えられるとテストをリロードすることで即座にフィードバックを提供し、開発者にアプリの動作を即座に把握させます。

• フレークのないテスト: 独自のアーキテクチャのおかげで、Cypress はテスト中のフレークを軽減し、テスト結果の信頼性を高めます。

• 自動待機: Cypress は要素のロード、応答、レンダリングを待機するため、明示的な待機を追加する必要はありません。

• 組み込みアサーションとモッキング: Cypress には、API 応答をモックし、ユーザー インタラクションをシミュレートするための豊富なアサーションとツールのセットが付属しています。

Cypress がユーザー インタラクションを自動化することで効率的な E2E テストをサポートしているのと同じように、Keploy はバックエンドに焦点を当てることでテストに強力な側面をもたらします。

Cypress はフロントエンドとユーザー エクスペリエンスの検証に優れており、Keploy は追加のスクリプトを必要とせずに API テストを自動的に生成および維持することでそれを補完します。

Keploy は、現実世界のインタラクションをキャプチャして実行可能なテストに変換する場合に特に効果的で、アプリケーションの規模に応じてバックエンドの一貫性とデータの信頼性を確保します。

• 自動テスト プラットフォーム: Keploy は、バックエンド サービス、特に API とデータベース インタラクションのテストを自動的に生成することに重点を置いています。

• キャプチャとリプレイ: Keploy は、現実世界のトラフィックをキャプチャしてテスト環境で再生し、実際のテスト ケースを作成します。

• ノーコード テスト生成: 簡単に設計されており、カスタム スクリプトを必要とせずにテストを生成します。

Keploy を使用した E2E テスト:

• API 中心の E2E テスト: バックエンド コンポーネントのエンドツーエンド テストを自動化し、バックエンド機能がユニットとして検証されることを保証します。

• エラー検出と再生: API リクエスト/応答をキャプチャし、インタラクションを再生し、リグレッションを早期に検出します。

• 一貫したデータ検証: データ フローの応答と変更を追跡し、展開全体での正確性を確保します。

• シームレスな統合: CI/CD パイプラインと簡単に統合できるため、チームがバックエンドの変更に関する E2E チェックを自動化できます。

この分野には多くのツールがあり、これらの各ツールは、Puppeteer のブラウザ固有のテストから Playwright や Selenium のブラウザ間の互換性まで、さまざまなタイプのテスト環境に適した機能を提供します。

適切なツールの選択は、最終的にはテストのニーズとアプリケーションの要件によって異なります。

よくある質問

Cypress はバックエンド テストに使用できますか?

Cypress は主にフロントエンド テスト ツールです。バックエンド API やモック応答と対話できますが、広範なバックエンド テスト向けに設計されていません。バックエンド固有のテストの場合、Keploy のようなツールは、サーバー側機能の単体テスト機能と統合テスト機能を提供することで Cypress を補完できます。

サイプレスはクロスブラウザ テストをサポートしていますか?

はい、Cypress は Chrome、Edge、Firefox をサポートしています。ただし、幅広いブラウザー間互換性を提供する Selenium や Playwright などのツールと比較すると、サポートが限定されています。

Cypress は API テストをどのように処理しますか?

Cypress は、テスト コードから直接 HTTP リクエストを作成することで API テストを実行できます。 cy.request() を使用して API 応答を検証できるため、同じエンドツーエンドのテスト フレームワーク内で API を簡単にテストできます。

失敗した Cypress テストをデバッグするにはどうすればよいですか?

Cypress はデフォルトで詳細なログとスクリーンショットを提供し、テスト ランナーを使用すると、テストを視覚的に操作できます。 .only を追加して失敗したテストを分離し、cy.pause() を使用して実行を停止し、Chrome DevTools を使用してさらなるデバッグを行うことができます。