自動テストツールTestCafeを動かしてみる

posted in: テスト | 0

どうも、くまーです。

テストの作業を効率よく行えるツールが何か無いか調べていた際に、
ブラウザの操作を自動で行うツールを見つけたので備忘と共有を併せて
記事にさせてもらいます。

ツール名:TestCafe

ざっくりと機能を説明すると、ブラウザを起動して指定したURLのサイトを表示、
テキストやボタンなどの要素に対して指定した動作を自動で行ってもらう、です。
また、動作ごとにスクリーンショットを画像ファイルで保存、
動作にエラーが生じた場合はエラーの原因を表示、
複数種類のブラウザで実行可能といった機能も備わっております。

そんなTestCafeを、実行させる環境の作り方から説明していきます。

実行環境

  1. Node.jsをインストール(インストール済みであれば不要)
  2. コマンドプロンプトから’npm install -g testcafe’を実行

これだけです。(’testcafe -v’を実行してバージョンが表示されればインストール正常完了)

↑こんな感じ

たった数分で環境が作れるのもTestCafeの強みと言われております。

動かしてみる

扱う言語はJavaScriptです(拡張子は.jsにするように)。

  1. Google Chromeを起動
  2. 「デーコムラボ」と検索
  3. サイト表示

上記3つの動作を行うサンプルと、実行コマンド。

ファイル名は「googlesearch.js」とする。

testcafe ブラウザ 実行するファイル名 最後はスクリーンショットを行う際の命令

実行結果のスクリーンショットが下記になります。
※実際にはブラウザが起動して動作している様子が表示されます

文字入力後.png

testcafe_文字入力後

検索後.png

testcafe_検索後

サイト表示後.png

testcafe_サイト表示後

クラス名に関しては、開発者ツールを起動して要素を選択するとわかります。

testcafe_要素

エラーが起きた場合

命令内容に不備がある場合、該当する場所を表示してくれます。
例として、検索文字入力欄のクラス名を意図的に間違ったものにして実行した結果が下記になります。

testcafe_エラーログ

32行目の動作でエラーが起きいることと、原因を上に表示してくれます。
※指定したクラス名が無いですよと教えてくれている

さすがテスト用のツールですね。

何に使えるか

正直なところ実際に業務で試したわけではないので予測になってしまうのですが、
リグレッションテストが頻繁に行われるシステム、
ブラウザごとにテストを行う必要があるシステムなどで
効果を発揮するのではないかなと思います。

あとは、動作ごとにスクリーンショットを保存できるので、
エビデンスを取る作業時間の短縮に繋げられそうなところが
個人的に一番便利そうだなと思っております。
 ※エビデンスを取るためだけに使用するのもありかも!?

細かい使い方

自分もまだまだ勉強途中なので、ここでは簡単な使い方しか説明出来ておりません。
公式のドキュメントもあるので、興味を持って頂いた方はそちらもご参照ください。

https://devexpress.github.io/testcafe/documentation/using-testcafe/

それでは、良い自動化ライフを!

LINEで送る
Pocket