More than 3 years have passed since last update.

Cypress でカスタムヘッダーを付ける方法

Posted at 2020-10-18

はじめに

Cypress を使ったE2Eテストに取り組んでおり、環境に応じたrequest headerを付ける必要があった。
公式ドキュメントに従ったやり方だとうまくheaderを付けることができなかったが、ワークアラウンドを見つけたのでQiitaにメモすることにする。

Browser <--> CDN <--> Reverse Proxy <--> Application Server

テストの特性上、CDNを経由せずReverse Proxyに直接接続したかったのだが、CDNを経由する際にcustom request headerが付与されるため、headerを明示的に付与する必要があった。

Cypressのドキュメントを確認するとrequest headerには2つの方法が用意されていたが、いづれも今回のユースケースには合わなかった。

cy.visit(url, {
  headers: {'CUSTOM-HEADER':  'Header value'}
})

この方法の問題はドキュメントにも記載のあるとおり、initial request にしかヘッダーが付与されないこと。つまりHTML内の画像/JS/CSSなどのサブリクエストにはヘッダーが付与されない

Cypressから発せられるすべてのリクエストに対してカスタムヘッダーを付与したいため、このやり方だと今回のユースケースでは使えない。

cy.server({
  onAnyRequest: (route,  proxy) => {
    proxy.xhr.setRequestHeader('CUSTOM-HEADER',  'Header value')
  }
})

この方法はドキュメントに記載があるのだが、私が試したところコード自体は発動していいないように思える。または最初の一発だけ発動して他ではトリガーされない感じ、、、

テストはChromiumで動けば良いので、ModHeader というChrome拡張でヘッダーを付与できないか試したところ、visit()には付与されなかったが、サブリクエストには付与されることがわかった。

そのためあまりスマートな解決策ではないが、下記で対応することにした

cy.visit(url, {
  headers: {'CUSTOM-HEADER':  'Header value'}
})

ModHeaderの設定内容はChromiumを閉じても維持されるため、次回Cypress経由でChromiumを起動したときはカスタムヘッダーが不要される設定の状態で起動する。

全くスマートさにかける解決策なので onAnyRequest の正しい使い方を教えてください。