クロスブラウザに対応したE2Eテスト環境の技術選定

ハコベルの中村です。

みなさんのチームではE2Eテストをやってますか？このブログでも紹介した通り、印刷サービスの開発チームでもE2Eの記事が出たばかりですが、ハコベルコネクトの開発チームでも同時期にE2Eテストを構築しました。（事業部も違えば、プロダクトのフェーズも違うので、力をいれたいポイントが異なっていて、読み比べするのも面白いと思いますので是非両方読んでいただけると！）

ハコベルコネクトの関心としては主にこれらの点でした。

物流業界の幅広いお客様に使って頂くために、IE11などのブラウザでも使えるようにチェックする必要があるが、時間がかかってしまう
機能追加・変更の影響範囲チェック漏れでバグが出にくくしたい
フロントエンドのテストとしてブラックボックステストをしたい

この課題を軽減するためにE2Eテスト環境の構築をスタートしました。TestCafe + Browserstack という組み合わせを選択しました。今回の記事ではどのような基準で選定したのか、組み合わせて使用する際に必要な設定を紹介してみます。

ツール・フレームワーク選定

クロスブラウザテストツール

我々の課題を解決するには IE11、Edge など、複数のブラウザでテストを実行できるクロスブラウザテストの実行環境が必要です。自前でSelenium Gridなどを構築するよりも、クラウドサービスを利用して、テストの拡充の方を優先しようと考えました。

また、テストのためには会社のFW内にある開発用サーバーにアクセスするという前提がありました。そのために、プロキシ機能が提供されていることも選定に当たっての条件でした。

クロスブラウザテストが可能、プロキシ機能があることの2点を満たす候補として、以下のクロスブラウザテストツールが候補となりました。

・BrowserStack https://www.browserstack.com/

・Testing Bot https://testingbot.com/

・Sauce Labs https://saucelabs.com/

・LambdaTest https://www.lambdatest.com/

テストフレームワーク

同時にテストフレームワークの選定を始めました。こちらでもクロスブラウザテストが可能であることを必須条件としました。それを満たした上で、コードの書きやすさを比較・検討しました。速に着目したのは、Promise, async/await に対応しているかどうかという点でした。E2Eテストを書いていると、数秒待つためのコードを書いて実行の終了を待つような調整が必要なのはよくある悩みかと思います。それをフレームワークで扱いやすくしてくれると、テストコードを書くのが楽になって良いですよね。

複数のテストフレームワークを調査し、条件に合致している候補としてこの2つがありました。

・TestCafe https://devexpress.github.io/testcafe/

・WebDriverIO https://webdriver.io/

このどちらも機能的には申し分なかったです。TestCafe は印刷サービスの開発チームも使用していますが、我々ハコベルチームでも書きやすさは大きなメリットと感じて候補にあげました。一方でクロスブラウザテストツールが対応しているのかという懸念がありました。なので、両者の組み合わせが可能かを検討します。それがクリアできれば TestCafe + XXX という構成で進める。できないならば WebDriverIO + XXX にする。という前提で調査を進めました。

クロスブラウザテストツール x テストフレームワーク

DevExpress(TestCafe の開発元) から、BrowserStack と Sauce Labs 向けのプラグインが提供されています。

https://github.com/DevExpress/testcafe-browser-provider-browserstack

https://github.com/DevExpress/testcafe-browser-provider-saucelabs

他に自分でプラグインを作る方法もあります。

https://devexpress.github.io/testcafe/documentation/extending-testcafe/browser-provider-plugin/

しかし、今回はそこに時間を使うよりも、E2E自体の拡充に時間を使いたいと考えました。なので、BrowserStack か Sauce Labs の2択です。両者の比較では、機能も価格も大きな差はありませんでした。最終的にはプロキシを使うためのライブラリを npm package で管理できるのが楽というのが決め手で BrowserStackを選択することにしました。

テスト実行環境構築

環境の構築自体はシンプルなので、TestCafeのドキュメントに沿って開発すればOKです。なので、今回は TestCafe と BrowserStack を組み合わせて使う際の設定を紹介しようと思います。

TestCafe + BrowserStackの設定

TestCafe と BrowserStackの連携には testcafe-browser-provider-browserstack を使いました。このプラグインを使えば簡単に連携できます。プロキシ機能についても、このプラグインを入れれば利用可能になります。

利用方法は

NPM パッケージとしてインストール

npm install testcafe-browser-provider-browserstack

Browserstack 用の環境変数を設定

BROWSERSTACK_USERNAME=myname
BROWSERSTACK_ACCESS_KEY=mykey
BROWSERSTACK_PROJECT_NAME=myproject

BROWSERSTACK_USERNAME BROWSERSTACK_ACCESS_KEY は TestCafe から Browserstack にアクセスするのに必要な情報なので必須です。

BROWSERSTACK_PROJECT_NAME は任意ですが、を指定すると Browserstack の実行結果をグループ化できます。複数のプロジェクトで共用する場合は設定しておくと良いですね。

ブラウザの指定

TestCafe で、テストを実行するブラウザを指定する際に 'browserstack:Chrome@53.0:Windows 10' のように、先頭に browserstack:と付け、最後に :OS Nameを付けると、BrowserStackで使う環境が指定できます。ブラウザのバージョン、OSは省略可能なので下のように書いてもOKです。

testcafe "browserstack:Chrome@53.0:Windows 10"
testcafe "browserstack:Chrome"

このようにすれば、あとはテストを実行するだけです。アクセス制限がないWebページ以外にも、起動した端末がアクセスできるならば、社内からしかアクセスできないWebページでもテストを実行できます。現在は Jenkins サーバー上で TestCafe を起動して社内の検証環境を対象にしてテストを実行しています。

この Local Testing と呼ばれる仕組みについては Browserstack のサイトに説明があるので、導入を検討される際には読んでおくと良いと思います。

https://www.browserstack.com/local-testing-internals

複数のブラウザでテスト実行

複数のブラウザでの同時実行をしたい場合は、以下のように記載します。（ただし契約しているConcurrently を越えるとコネクションを作れずエラーになってしまうので注意が必要です。上限を越える場合は、シェルスクリプトで1ブラウザごとに TestCafe を起動するようにするなどの対応をしましょう。そうするとキューに積まれて順次実行されます。）

testcafe "browserstack:IE" "browserstack:Edge"

ここまで設定が完了すると、TestCafe に定義したテストケースが Browserstack 上で実行されます。

ハコベルの開発チームではこのようなE2Eテスト環境を構築しました。技術選定と構築を通して、開発において何を優先すべきか、何をやるのがコスパが良いのかを見直す良い機会にもなりました。みなさんも、チームやプロダクトの目的を振り返りつつ、それに合わせてE2Eテスト環境を選び構築してみるときっと楽しいと思います。