Cypressとは？フロントエンドテストツールを解説

Cypressはフロントエンドのテストツールで、アプリと並んでブラウザ内でテストを実行し、高速なフィードバックループと充実したデバッグを提供します。

Cypressはエンドツーエンドテストとコンポーネントテストの開発者体験に注力しました。アプリケーションと同じrun loopの中で動作し、各ステップを検査できるtime-travelデバッグを提供し、信頼できるブラウザテストを書くことをフロントエンドチームにとって身近なものにしました。

Cypressとは何か

CypressはJavaScriptのエンドツーエンドおよびコンポーネントテストのフレームワークで、実際のブラウザ内でテストを実行します。test runner、（Chaiの上に構築された）アサーションライブラリ、自動待機、そしてコマンドを実行しながら各ステップのsnapshotとともに表示するインタラクティブなtest runnerのUIをまとめて備えています。

アーキテクチャと開発者体験

Cypressはテスト対象のアプリと並んでブラウザ内で動作します。これによりDOMやネットワークへ直接アクセスでき、自動リトライやtime-travelデバッグといった機能が可能になります。読みやすいコマンドチェーンと明快な失敗出力により、テストの記述と診断が容易になっており、これが最大の魅力です。

テストの例

コマンドが連鎖してアプリを操作し、アサーションを行います。

A minimal Cypress test

describe("login", () => {
  it("shows the dashboard", () => {
    cy.visit("/login");
    cy.get("#email").type("a@b.com");
    cy.contains("Sign in").click();
    cy.url().should("include", "/dashboard");
  });
});

CI/CDでの役割

CIでは、"cypress run"がテストをheadlessで実行し、失敗時にゼロ以外の終了コードを返し、失敗したspecのスクリーンショットと動画をキャプチャします。すべてのブラウザテストと同様に、実行はリソースを多く消費し、遅くなりがちです。複数のマシンに並列化し、一時的な失敗にauto-retryを使いつつより高速なマネージドrunnerで実行することで、E2Eステージを高速かつ安定に保てます。

代替ツール

Playwrightは複数エンジンのサポートと組み込みの並列化を、異なるアーキテクチャで提供します。Seleniumは言語に依存しないベテランです。Cypressはその開発者体験、インタラクティブなデバッグ、そしてフロントエンドチームにとって身近なコンポーネントテストで好まれています。

重要なポイント

Cypressはエンドツーエンドテストとコンポーネントテストを実際のブラウザ内で実行します。
そのin-browserアーキテクチャがtime-travelデバッグとauto-waitingを可能にします。
CIでは"cypress run"を使い、並列化とリトライで重い実行を高速に保ちましょう。