cypress

Cypress 16 では、Chrome はデフォルトでネイティブの HTTP/2 ネットワークパスを使用しますが、このパスでは mTLS 用の clientCertificates が提示されません。レガシーの HTTP/1 ネットワークスタックを強制するには、cypress.config.ts で forceHttp1: true を設定します:

import { defineConfig } from 'cypress'

export default defineConfig({
  forceHttp1: true,
  clientCertificates: [
    {\n      url: 'https://test.com',
      ca: [],
      certs: [
        {\n          cert: 'certs/client.crt',
          key: 'certs/client.key',
        },
      ],
    },
  ],
})

または、CLI フラグを付けて Cypress を実行します:

cypress run --browser chrome --force-http1

Firefox およびその他の Chromium 以外のブラウザは、引き続きレガシーのネットワークスタックを使用します。この回避策が利用できない場合は、Cypress 15.21.1 にダウングレードしてください。恒久的な修正は、ブラウザのネットワークパスでクライアント証明書を提示する Cypress の PR で追跡されています。

これは Cypress 16.1.0 のネイティブネットワーク/CDP Fetch のバグで、サーバーが 302 を返した場合に redirect: 'follow' を指定して行われた同一オリジンの fetch() POST リクエストに影響します。インターセプトはレスポンス段階で Fetch.requestPaused を待機しますが、それを受信することがなく、30 秒後に Timed out waiting for CDP Fetch response pause で失敗します。ブラウザは正常にリダイレクトをたどっているにもかかわらず、interception.response は undefined になります。

回避策: Cypress 15 で使用されていたレガシープロキシパスを使用するため、cypress.config.js で forceHttp1 を有効にします。

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  forceHttp1: true,
})

ESM 設定の場合:

import { defineConfig } from 'cypress'

export default defineConfig({
  forceHttp1: true,
})

設定を変更した後、Cypress を再起動してください。このオプションを有効にすると、cy.wait('@alias') は 30 秒の遅延なく解決され、期待どおりに POST ホップの 302 ステータスと Location ヘッダーを返します。通常の GET リクエストは影響を受けません。この問題は、Cypress 16 の Chrome ネイティブネットワークパス上でリダイレクトする fetch POST リクエストに固有のものです。

これは Cypress 15.20.0+ のリグレッションです: cy.request() はブラウザの Cookie を更新しますが、Cypress のサーバーサイドの Cookie ジャーは更新しないため、次の AUT フレームのドキュメントナビゲーションで以前の古い Cookie が送信されます。XHR/fetch リクエストは影響を受けません。

回避策: ログインリクエストを cy.session() でラップします。これにより Cookie ジャーがクリア/リセットされます:

beforeEach(() => {
  cy.session('login', () => {
    cy.request('POST', '/login')
  })

  cy.visit('/account')
})

または、Cypress 15.19.x にダウングレードしてください。恒久的な修正は、PR "fix: keep the cookie jar in sync when cookies are set outside the proxy." を含むリリースにアップグレードすることです。

これは、Cypressが現在のページをcy.visit()で直接読み込んでいない場合に発生します。通常、通常のリンクをクリックした後に起こります。XHRをスタブする前に、Cypressで対象のURLを読み込んでください:

cy.visit('/your-page')
cy.server().route('POST', /users\.json/, {})

POSTがページの読み込み中に発生する場合は、訪問する前にルートを定義してください:

cy.server()
cy.route('POST', /users\.json/, {})
cy.visit('/your-page')

前のテストでプレーンな<a>リンクをクリックして行われたナビゲーションに依存しないでください。cy.visit(targetUrl)を直接呼び出すか、cy.server()を使用する前にCypressを通じてページをリロードしてください。クロスオリジンのページはこの方法ではスタブできません。

最新のCypressでは、cy.server()/cy.route()を次のように置き換えてください:

cy.intercept('POST', '**/users.json', {})
cy.visit('/your-page')

これは Cypress のバグです(15.18.1 で再現を確認): .within() 内では、リトライのたびにサブジェクトが再クエリされ、cy.contains() の最初の試行でそれが空のセットに解決されると、getOptions.withinSubject が undefined のままになります。すると、エラーメッセージを生成する getPhrase() が undefined の el.selector にアクセスしてクラッシュし、そのエラーによってリトライが中断されます。その結果、テストは defaultCommandTimeout を待つことなく数ミリ秒で失敗します(典型的なトリガー: 再フェッチ/ローディング状態の間に一時的にアンマウントされるリスト)。

回避策: .within() 内の cy.get() は正しくリトライされるため、cy.contains() を cy.get() とテキストアサーションの組み合わせに置き換えます:

// 不安定 — リトライせずに TypeError をスローする
cy.get('#group').within(() => {
  cy.contains('new');
});

// 確実 — サブジェクトが再マウントされてテキストを含むようになるまでリトライする
cy.get('#group').within(() => {
  cy.get('p').should('contain.text', 'new');
});

あるいは、最初の試行時点でサブジェクトが存在するように contains をガードする方法もあります:

cy.get('#group').within(() => {
  cy.get('p').should('exist'); // ローディング状態をやり過ごす
  cy.contains('new');
});

恒久的な修正: パッチがリリースされたら Cypress をアップグレードしてください。提案されている修正では、withinSubject が undefined の場合に getPhrase がセレクター(または汎用的なフレーズ)にフォールバックするようになり、cy.contains() が cy.get() と同じようにリトライを続けるようになります。