はじめに
WebアプリケーションのE2Eテストフレームワーク、TestCafeに専用のGUIツールTestCafe Studioが登場したので試してみました。本記事を執筆している2018/08/14時点ではPreview版としての公開です。
TestCafe (https://github.com/DevExpress/testcafe) についてざっくり説明しておくと、Cypressなどと同様WebDriverを使わないタイプのフレームワークです。クロスブラウザやリモートブラウザでの実行など、他のフレームワークであまりカバーしない機能が多いことが特徴です。それらの特徴の他、ES6やTypescriptにも対応しており、モダンな開発スタイルにもマッチしやすい点が気に入っています。
現在、コアとなるテストランナー部分はOSSとなっており、今回公開されたのはテストシナリオを自動記録するためのGUIツールのようです。現在はPublic Previewですので無償で利用できます。
なお、本記事を執筆している2018/08/14時点で、公式ドキュメントはビルドに失敗したのか真っ白になっています。Githubでドキュメントのソースが公開されているので、こちらを参照しましょう。
ダウンロード〜インストール
https://testcafe-studio.devexpress.com/ からダウンロードします。Download TestCafe Studio から各OS向けにダウンロードできます。2018/08時点で以下OSに対応しています。
- Windows
- Mac OS
- Linux x86 / x64
各OSごとのインストール方法は https://github.com/DevExpress/testcafe-studio-docs/blob/master/documentation/guides/installation.md に書いてありますが、Windows/Macはインストーラが用意されているようです。
Linuxの場合はダウンロードしたZipファイルを任意の場所に展開し、実行します。
ちなみに、TestCafe本体を別途インストールする必要はなく、TestCafe Studio単体で動作するようです。
実行
初回起動時にはウェルカムページが出てきます。
ウェルカムページにURLを入力すると、そのURLに対してのテストの自動記録を開始してくれます。上記の例では、TestCafeが用意してくれているExampleページ(http://devexpress.github.io/testcafe/example/) のURLを入力しています。
FireFoxが起動し……
入力したURLが開きます
適当に入力していきましょう
入力が終わったら 、左下のStop Recordingを押します
操作が記録されていますね
そして右上の再生ボタンをクリックすると、記録したテストケースを再生してくれるのですが……
なんと再生する項目の中に All があるではありませんか！これがTestCafeのすごいところで、インストールされているブラウザそれぞれで同時にテストを実行することができます。
なお、残念ながら、現時点ではネイティブダイアログ記録が上手く行っていないようなので、例えばalert()などが自動記録できず、テストケースを再生した際にエラーになることがあるようです。TestCafe自体はネイティブダイアログの操作に対応しているので、 http://devexpress.github.io/testcafe/documentation/test-api/handling-native-dialogs.html などを参考に自前で書き足す必要がありそうです。
おわりに
今回はGUIツール部分の説明でしたが、コアとなるTestCafe (https://github.com/DevExpress/testcafe) 自体、単独で利用しても非常に便利なツールです。特に、WebDriver非依存でクロスブラウザテストが出来るフレームワークは非常に珍しいので(Cypressも今後FireFox対応を進めるようですが）、Selenium以外のクロスブラウザテスト自動化の選択肢として今後も発展していってほしいですね。
TestCafe Studioの登場で、土台となるテストシナリオをGUIツールでササッと作成し、必要に応じてPageObject Patternを用いた形にリファクタリングするなどの方法でE2Eテスト開発を効率化できそうです。