Cypress: PCとSPで異なるテストを実行する

Cypressの仕様

Cypressでは、UserAgentや環境変数などの設定を、テストの実行中に変更することはできません。(https://docs.cypress.io/api/cypress-api/config.html#Not-all-config-values-can-be-changed-at-all-times)

そのため、PCとSPなどUserAgentに応じて異なるテストを実行したい場合、UserAgentごとにテストファイルを分けてテストを実行するなどの工夫を行う必要があります。

そのような時、環境変数でUserAgentや実行するテストファイルの設定を上書きして切り替えられるような仕組みを用意すると便利です。

cypress/plugins/index.js

設定の上書き処理は、cypress/plugins/index.jsに記述します。

PCとSPでテストを分ける例

module.exports = (on, config) => {
  const configOverride = {};

  if (config.env.device === 'sp') { // sp用の設定
    configOverride.userAgent = '< SPテスト用のUserAgent >';
    configOverride.testFiles = 'sp/**/*.*';
  } else { // pc用の設定
    configOverride.userAgent = '< PCテスト用のUserAgent >';
    configOverride.testFiles = 'pc/**/*.*';
  }

  return { ...config, ...configOverride };
};

上記のように設定の上書き処理を追加してあげることで、
PC用のテストファイルをintegration/pc配下に、
SP用のテストファイルをintegration/sp配下にまとめておくだけ、
cypress run --env device=pcでPCのテスト、
cypress run --env device=spでSPのテストを実行できるようになります。

---

また、同じようにして、環境変数でテストを実行するURLを変更することもできます。

テストを実行するURLを切り替える例

module.exports = (on, config) => {
  const configOverride = {};

  if (config.env.env === 'dev') {
    configOverride.baseUrl = '< 開発環境のURL >';
  } else if (config.env.env === 'prod') {
    configOverride.baseUrl = '< 本番環境のURL >';
  } 

  return { ...config, ...configOverride };
};

cypress run --env env=devで開発環境でのテスト、
cypress run --env env=prodで本番環境のテストを実行できるようになりました。

このような感じで、cypress/plugins/index.jsに、環境変数による設定の上書きをすることで、Cypressはとても便利になります。

皆さんもぜひ、cypress/plugins/index.jsを上手に活用して、Cypressをより便利にしていきましょう！！

参考

https://docs.cypress.io/api/cypress-api/config.html#Not-all-config-values-can-be-changed-at-all-times
https://github.com/cypress-io/cypress/issues/2100