Cypress 16 の新機能

Cypress 16 では、Chrome、Chromium、Edge がブラウザのネイティブネットワークスタック上で HTTP/2 を使って動作します。また、デフォルトでテキスト入力と可視性チェックが高速化され、Cypress.env() と cy.exec() が削除されました。アップグレードする際は 16.0.0 ではなく、16.1.0 以降を使用してください。

メジャーアップグレードで問題が起きるのは、たいていローカルではなく CI です。削除された API がサポートファイル内で例外を投げたり、実行中に出力が途絶えてジョブがタイムアウトするまで止まったままになったりします。

本記事では、Cypress 16.0.0（2026年9月1日）と 16.1.0（2026年9月15日）について、何が高速化されるのか、テストの書き方がどう変わるのか、何が動かなくなりどう修正するのか、そしてどのバージョンに固定すべきかを解説します。基本については Cypress による E2E テストを参照してください。

Chrome、Chromium、Edge では HTTP/2 がデフォルトに

Chrome、Chromium、Edge では、Cypress 16 のテストトラフィックを Cypress プロキシ経由で処理するのではなく、ブラウザ自身のネットワークスタック上でインターセプトするようになりました。テスト対象のアプリはサーバーに直接接続し、HTTP/2 や HTTP/3 を含め、双方がサポートする最適なプロトコルを使用します。Firefox、WebKit、Electron は従来の HTTP/1.1 経路を維持します。

ネイティブ HTTP/2 への切り替えが重要なのは、HTTP/1.1 ではオリジンあたりの並列接続数が少数に制限されており、数百のアセットを持つページではリクエストを順番待ちさせる必要があるためです。HTTP/2 では、それらすべてのリクエストを単一の接続上のストリームとして多重化します。1,000 枚の画像を読み込むページを使った Cypress 自身のベンチマークでは、HTTP/1.1 での 3,896ms が HTTP/2 では 1,362ms に短縮されました。ただし、発表ではテスト環境の詳細が説明されていないため、この数値は自分のテストスイートでの予測値ではなく、傾向として捉えてください。

ネイティブ HTTP/2 により、Cypress 16 ではストリーミング UI もテストできるようになりました。HTTP/1.1 では、ブラウザが許可する Server-Sent Events の接続数はドメインあたり 6 つまでであり、リアルタイム通知のような機能はテストが困難でした。HTTP/2 では、同時に実行できるストリーム数をサーバーとブラウザが交渉して決定し、Cypress によれば一般的なデフォルト値は 100 です。

また、Cypress 16 ではテスト対象アプリの TLS を終端しなくなったため、ブラウザはオリジンの実際の証明書を検証します。開発用の自己署名証明書や社内 CA を使用している場合のために、16.1.0 では trustedCertificates が追加されています。

Cypress 16 におけるテスト速度の変化

Cypress 16 では、速度に影響する 3 つのデフォルト設定が変更されました。いずれも元に戻す方法が用意されています。

• キーストローク遅延が 0ms になりました（従来は 10ms）。デバウンス処理された検索フィールドなど、入力速度に依存する入力欄では、以前の遅延を復元できます。

Cypress.Keyboard.defaults({ keystrokeDelay: 10 })
cy.get('[data-cy=search]').type('laptop', { delay: 10 })

16.0.0 では、TypeScript の設定ファイルに keystrokeDelay を記述するとコンパイルに失敗していましたが、16.1.0 で修正されています。

• 可視性チェックに新しいアルゴリズムを使用します。 ブラウザネイティブの Element.checkVisibility() をベースにしており、visibilityStrategy のデフォルトは 'modern' です。
• manageBrowserMemory がデフォルトで有効になりました。 テスト実行中、Cypress は一定間隔でメモリ使用量をチェックします。測定値が設定された上限を超えると、次のテストを開始する前にガベージコレクションを実行します。このクリーンアップには時間がかかるため、軽量なテストスイートでは無効にしたほうが速い場合もあります。無効にする前に、両方の設定で実行時間を計測してください。

Cypress 16 でテストの書き方はどう変わるか

Cypress 16 では、Cookie やストレージの読み取りが他のクエリと同様にリトライされるようになり、環境変数へのアクセスは 2 つの別々の API に分割されました。

cy.getCookie()、cy.getCookies()、cy.getAllCookies()、cy.getAllLocalStorage()、cy.getAllSessionStorage() は、defaultCommandTimeout に従うリトライ可能なクエリコマンドになりました。responseTimeout は使用しなくなりましたが、cy.setCookie() は引き続き responseTimeout を使用します。.should() をチェーンすると、成功するまでリトライが続きます。チェックを .then() の中に記述した場合は、リトライなしで一度だけ実行されます。

cy.getCookie('auth_token').should('have.property', 'value')

テストスイートでこれらのコマンドをオーバーライドしている場合は、Cypress.Commands.overwriteQuery() に切り替えてください。これらのコマンドに対して Cypress.Commands.overwrite() は機能しなくなりました。

Cypress.env() は 15.10.0 で非推奨となり、今回削除されました。cy.env() は非同期で、機密性の高い値を Node プロセスから取得し、指定したキーのみをテストに渡します。Cypress.expose() は、ブラウザに表示しても安全な値を扱うための同期的な選択肢です。

// Before (Cypress 15)
const token = Cypress.env('STRIPE_KEY')

// After (Cypress 16)
cy.env(['STRIPE_KEY']).then(({ STRIPE_KEY }) => {
  cy.request({ url: '/api/charge', headers: { Authorization: STRIPE_KEY } })
})
const apiBase = Cypress.expose('PUBLIC_API_URL')

cy.env() はキー名をコマンドログに書き出しますが、値は書き出しません。ただし、この保護はオブジェクトを受け取った時点で終わります。.its()、.invoke()、アサーション、あるいは失敗したコマンドによって値が出力される可能性があるため、シークレットは .then() の中にとどめてください。テスト単位およびスイート単位のオーバーライドでは、env: {...} の代わりに expose: {...} を指定するようになり、allowCypressEnv は削除されました。

Cypress 16 の破壊的変更と対処法

Cypress 16 の破壊的変更の多くは機械的に対応できる削除であり、移行ガイドにはそれぞれの直接的な代替手段が記載されています。注意深い検討が必要なのは cy.intercept() です。

cy.intercept() の API 自体は変更されていません。しかし、ネイティブネットワーク上では req.httpVersion が報告されず、ボディがすでにデコードされた状態で届くため content-encoding などの圧縮関連ヘッダーが含まれず、再検証されたレスポンスは 304 ではなく 200 として報告され、HTTP/2 および HTTP/3 では res.statusMessage が空になります。また、responseTimeout はレスポンスハンドラーに適用されなくなりました。レスポンスが届かない場合、Cypress は固定の 30 秒で待機を打ち切ります。別の上限が必要な場合は cy.wait() で設定してください。アサーションは、トランスポートの詳細ではなく振る舞いを対象とするように変更しましょう。Cypress におけるモックとスタブで紹介しているパターンは引き続き有効です。

// Before: expect(req.httpVersion).to.eq('1.1')
cy.intercept('GET', '/api/cart').as('cart')
cy.visit('/checkout')
cy.wait('@cart', { timeout: 15000 }).its('response.statusCode').should('eq', 200)

16.0.0 の破壊的変更の全一覧と、それぞれを放置した場合に起こることは以下のとおりです。

ビューポートについては、設定をブロックの config に移します。

describe('mobile nav', { viewportWidth: 375, viewportHeight: 667 }, () => {
  it('opens the menu', () => { /* ... */ })
})

Cypress 16 の回避策は一時的なもの

Cypress 16 には 2 つのオプトアウト手段が用意されていますが、changelog ではどちらも非推奨とされています。forceHttp1: true を指定すると、すべてのブラウザが従来のプロキシ経路に戻ります。Cypress はこのオプションを追加したのと同じリリースで非推奨とし、Chrome と Firefox の両方でネイティブ経路が長期サポートされるようになった時点で削除する予定です。visibilityStrategy: 'legacy' は以前の可視性アルゴリズムを復元します。このオプション自体が非推奨であり、changelog では legacy の値は移行期間中の暫定措置として扱うよう記載されています。

forceHttp1 と visibilityStrategy: 'legacy' は、恒久的な設定ではなく、失敗の原因を診断するために使用してください。フラグを有効にすると失敗が解消される場合は、ドキュメントに記載されたネイティブネットワークとの違いと照らし合わせ、アサーションを書き直してからフラグを削除しましょう。

結論：16.0.0 ではなく Cypress 16.1.0 以降にアップグレードする

アップグレードする際は、16.1.0 またはそれより新しい 16.x リリースに固定し、16.0.0 は決して使用しないでください。16.1.0 では、Chrome、Chromium、Edge での実行が途中で出力しなくなり、いつまでも終了しない 16.0.0 のリグレッションが修正されています。また、これらのブラウザで blockHosts が適用されない問題も修正されています。この問題では、本来 503 で失敗すべきブロック対象ホストへのリクエストがネットワークに送信されていました。ブロック対象ホストに依存するテストスイートは、16.0.0 では本来テストすべき内容を実際には検証しないまま成功してしまう可能性がありました。さらに 16.1.0 では、keystrokeDelay の TypeScript エラーと Service Worker のメモリリークも修正されています。

Cypress 16 で最初にグリーンのビルドを確認する際は、Electron だけでなく Chrome で実行してください。Electron は従来の経路のままなので、Electron のみの実行ではネイティブネットワークがまったく使われません。その後、Cypress のベストプラクティスに照らしてテストスイートを見直しましょう。Firefox と WebKit での実行は引き続き HTTP/1.1 を使用しますが、本番環境の実際の Firefox ユーザーや Safari ユーザーは HTTP/2 を使用しています。そのため、実ユーザーのセッションリプレイは、E2E テストスイートで一度も検証されていないフローやブラウザを見つけるのに役立ちます。

まとめ

Cypress 16 による高速化の大部分は、特に作業を必要としません。そして、動かなくなる箇所の大部分はリポジトリを検索すれば見つけられます。Cypress.env、cy.exec、cy.end、実行時の Cypress.config() 呼び出し、そして削除された experimental 系のキーを検索してください。見つかった箇所は上の表に従って置き換え、CI を Node 22 以降と Chrome に移行し、16.1.0 以降を直接インストールしましょう。

よくある質問

cy.exec() が削除された Cypress 16 では、シェルコマンドをどのように実行すればよいですか？

setupNodeEvents で Node の child_process モジュール（例：execFileSync）を呼び出すタスクを登録し、テストから cy.task('resetDatabase') のように呼び出します。すべてのタスクは値または null を返す必要があります。デフォルトでは、タスクは 60 秒で打ち切られます。この上限は taskTimeout で変更できます。サーバーの起動のように終了しないプロセスは cy.task() では実行できません。cy.exec() は Cypress 15.21.0 で非推奨となり、16.0.0 で削除されました。

Cypress の trustedCertificates と clientCertificates の違いは何ですか？

Cypress 16.1.0 で追加された trustedCertificates は、自己署名証明書や社内 CA が発行した開発用証明書など、サーバーが提示する証明書をブラウザに信頼させるためのものです。clientCertificates は相互 TLS 用で、Cypress がサーバーに対して証明書を提示します。trustedCertificates の各エントリには filePath、pem、spki のいずれか 1 つだけを指定し、Chrome、Chromium、Edge のネイティブネットワーク経路に適用されます。宣言されたオリジンでは、ブラウザの HTTP キャッシュも使用できるようになります。

Cypress 16 で Angular 20 のコンポーネントテストを実行できますか？

組み込みのハーネスでは実行できません。Cypress 16 のコンポーネントテストは Angular 18、19、20 をサポートしなくなり、サポートされる最小バージョンは Angular 21.0.0 です。暫定措置として、非推奨の @cypress/angular 4.x パッケージを npm からインストールし、cypress/angular の代わりにそこから mount をインポートする方法がありますが、Cypress はこのハーネスをサポートしていないため、Angular 21 への移行を計画してください。また、同じリリースで CoffeeScript の組み込みサポートも削除されたため、.coffee のスペック、サポートファイル、フィクスチャは解決されなくなりました。