Cypressは2014年に米サンフランシスコで創業されたCypress.io社が開発する、JavaScript製のエンドツーエンド（E2E）テストフレームワークです。オープンソース版が2017年10月に1.0として公開され、Selenium全盛だったブラウザテスト市場に「ブラウザ内で同じイベントループに乗る」独自アプローチを持ち込みました。GUIテストランナーが各ステップのDOMスナップショットを撮るTime Travel機能は、デバッグ体験を大きく変えた象徴的な仕組みです。
この記事の目次
- Cypressを特徴づける機能
- Cypressの登場と進化
- プロジェクトでの導入
- Selenium・Playwright・Puppeteerとの違い
- まとめ
Cypressを特徴づける機能
Cypress最大の特徴はTime Travel機能で、cy.get / cy.click / cy.containsなど各コマンドの実行時点でDOMスナップショットを残し、後からテストランナーUI上で時系列に遡ってホバー確認できます。「テストが落ちた瞬間の画面はもう存在しない」というSelenium時代の悩みが大幅に軽減されました。
もうひとつの差別化要素が自動待機で、要素が表示されるまでデフォルト4秒間自動でリトライします。それまで主流だったexplicit waitやsleepコマンドが不要になり、フレーキー（不安定な）テストが減りました。GUIのテストランナー（Cypress App、旧Test Runner）はWebKit/Electron上で動作し、ブレークポイント挿入とテストコード保存後の自動再実行を組み合わせて、開発者体験を高めています。
Cypressの登場と進化
創業者ブライアン・マン（Brian Mann）はSeleniumベースのテスト構築に苦労した経験から、「ブラウザの中で動き、開発者の試行錯誤に寄り添うテストツール」を目指してCypressを設計しました。2014年に開発を始め、長いプライベートベータ期間を経て2017年10月に1.0を一般公開。当初はChromiumエンジンのElectronのみに対応し、シングルブラウザのE2Eテストとして広まりました。
2021年公開の8.0でMicrosoft Edge、Firefox（および各種Chromium派生）への対応が安定。10.0（2022年）ではコンポーネントテストモードがGAされ、Reactなどのコンポーネント単位テストにも使えるようになりました。2023年〜2024年のv12〜v13系では、TypeScript型推論強化やセッションキャッシュ、retries、Cloud（旧Dashboard）との連携によるテスト並列化・録画機能の整備が進み、企業導入が加速しています。
プロジェクトでの導入
Cypressの導入はnpm一発で済み、cypress openでテストランナーが起動します。テストファイルはcypress/e2e/以下に*.cy.tsとして置き、describe/itブロックの中でcy.visit('/login')、cy.get('input[name=email]').type('...')、cy.contains('Sign In').click()のように操作を記述します。Chai/Mocha風のアサーション（.should('be.visible')、.and('contain', ...)）もそのまま使えます。
APIスタブはcy.intercept、固定データはcy.fixtureを使い、フロントエンドだけでテストを完結させられるのも強み。CI上ではcypress run（ヘッドレス）を実行し、GitHub Actions・GitLab CI・CircleCIなどで並列実行します。Cypress Cloud（旧Dashboard）に接続すると、スクリーンショット・ビデオ・並列分散・失敗解析がブラウザから確認可能になります。EコマースのSlack社内事例やNetflixの開発体験ブログなど、採用事例の公開も多いツールです。
Selenium・Playwright・Puppeteerとの違い
競合の最大手は、後発で急成長したMicrosoftのPlaywrightです。Cypressがブラウザ内のJavaScriptランタイムから操作する設計なのに対し、PlaywrightはCDP/WebKit/Firefoxプロトコルで外部から駆動するため、iframeやcross-originの扱い、Safari/WebKit対応、複数タブ操作などはPlaywrightが有利とされる場面が多くなりました。
古参のSeleniumは2004年にThoughtWorks出身のジェイソン・ハギンズ（Jason Huggins）が公開して以来の老舗で、言語非依存のW3C標準WebDriver規格を持つ強みがあります。Puppeteerは2017年にGoogleがChrome開発者ツール用に公開した低水準ライブラリで、自由度が高い反面E2Eテストフレームワークではありません。Cypressは「JS/TSで完結し、開発者体験を最優先する」立ち位置に強みがあり、SPA（特にReactやVueベース）でフロントエンドに閉じたテスト中心の現場で支持され続けています。
まとめ
CypressはSelenium主流の時代に「ブラウザの内側に飛び込む」E2Eテスト像を提示し、Time Travelと自動待機で定着した先駆者です。Playwrightの台頭で選択肢は増えましたが、JS/TS中心のSPA開発で開発者体験を重視するチームではいまも有力な候補です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント