これはEDOCODE Advent Calendar 2022、8日目の記事です。

サーバーサイドエンジニアの井内です。

先日のWanoグループ Advent Calendar 2022 の記事の続きで、TestCafeのCI設定をしてみました。

GitLabでのCI設定

CIは、EDOCODEで使っているGitLabで設定をしました。
下記にドキュメントがありまして、これを参考にして.gitlab-ci.ymlに設定を追加しています。
https://testcafe.io/documentation/402816/guides/continuous-integration/gitlab

.gitlab-ci.yml

e2e_tests:
  image:
    name: testcafe/testcafe
    entrypoint: ["/bin/sh", "-c"]
  script:
    - /opt/testcafe/docker/testcafe-docker.sh firefox:headless test.js

TestCafeのDocker Imageを使っています。
ChromiumとFirefoxが使えるはずなのですが、Chromiumはエラーが出ていたので削除してあります。
（--no-sandboxをつければ大丈夫そうな情報を見つけたのですが、ダメでした）

TestCafe+LambdaTestのローカル実行

TestCafeのDocker Imageでは確認できるブラウザが少ないので、こちらもEDOCODEで既に導入しているLambdaTestを使えるかどうか試してみました。

調べたところ、こちらもドキュメントがありましてすぐ導入できそうです。
まずはGitLab CIではなく、ローカルで試してみます。
https://www.lambdatest.com/support/docs/npm-plugin-for-testcafe-integration-with-lambdatest/

最初にtestcafe-browser-provider-lambdatestというnpm packageをインストールします。

$ npm install -g testcafe-browser-provider-lambdatest

次にユーザー名とアクセスキーを環境変数で設定します。（以下はMac, Linuxの場合）
どちらもLambdaTestの管理画面から確認できます。

$ export LT_USERNAME= {YOUR_LAMBDATEST_USERNAME}
$ export LT_ACCESS_KEY= {YOUR_LAMBDATEST_ACCESS_KEY}

これで実行準備ができました。
下記コマンドでTestCafeをLambdaTest上で実行できます。

$ testcafe "lambdatest:Chrome@74.0:Windows 8" test.js

LambdaTest上で使えるブラウザ一覧は、下記コマンドで確認できます。
Freeプランだと使えないブラウザがあるようです。

$ testcafe -b lambdatest

TestCafe+LambdaTestのCI実行

こちらは上記の設定を.gitlab-ci.ymlに追記するだけです。

.gitlab-ci.yml

lambdatest:
  stage: test
  image:
    name: node
  before_script:
    - npm install -g testcafe testcafe-browser-provider-lambdatest
  script:
    - testcafe "lambdatest:Chrome@74.0:Windows 8" test.js

TestCafeのDocker Imageだとnpm packageがインストールできなかったので（多分権限の問題）、Node.jsのDocker Imageを使っています。

動作確認は下記のリポジトリで行ないました。
https://gitlab.com/masahiro.iuchi/testcafe-sample

使ってみた感想

TestCafeのCI設定・LambdaTest連携ともに、特につまづくことなく簡単に設定できました。
今後は小さいなところから具体的なテストを試していければと思っています。

最後に

（前回の記事に引き続きになりますが）現在EDOCODEでは、エンジニア・デザイナー・プロダクトマネジャーを募集しています。ご興味のある方は、こちらの採用ページも是非ご覧ください！