これは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
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に追記するだけです。
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では、エンジニア・デザイナー・プロダクトマネジャーを募集しています。ご興味のある方は、こちらの採用ページも是非ご覧ください！