Katalon StudioでWEB操作をサクッと自動化してみた

Adways Advent Calendar 2018 7日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2018

はじめまして！2018年1月入社の半田です。
早いものでもう入社してからもうすぐ1年経ってしまいます。。
初のAdwaysエンジニアブログなので至らないところもあるかと思いますが、
最後まで読んでいただけたら幸いです。
今回はタイトルにもある通り、今回はKatalon Studioを使ってサクッとWEB操作を自動化していこうと思います。

Katalon Studioとは？

https://www.katalon.com/
Katalon Studioとはテスト用の様々な機能が簡単に無料で利用できるツールです。
テストIDEみたいなものですね。
具体的には

ブラウザ操作をレコーディングしてテスト
- ブラウザ操作をテストコードとして出力
- テストコードを書いて自動テスト
パラメータを変更した繰り返しテスト
テストコードのGit管理
テスト結果のレポート出力

などを行うことができます。

Katalon Studioの使用準備

公式サイトからダウンロードしましょう。
ダウンロードが完了したら以下の画面になります。

メニューのFile > New > Projectから新規プロジェクトを作成します。
プロジェクト名を入力し、OKを押下します。今回は「SampleProject」とします。

使用準備はたったこれだけで終わりです。
WEB操作を自動化する場合、これまでの代表的なものはSeleniumが使われてきました。
Seleniumを利用するには、Seleniumのインストール、Javaのインストール、Selenium WebDriverをインストールする…など、何かと事前準備が必要ですが、Katalonは特に他に用意するものはありません。

WEB操作を記録してみる

では、WEB操作を記録してみましょう。
今回は今担当しているプロジェクトで使用しているRuby on Railsのscaffoldで作成した環境でユーザーを新規作成、更新、削除を記録してみたいと思います。

メニューのAction > Record > Record Webを開きます。
以下のようにセットアップ画面となるので、URLの部分に操作を行いたいWEBサイトのトップのURLを入力します。

今回はローカル環境なので、「http://192.168.33.11:3000/users」と入力します。
その後、URL入力欄の隣のブラウザマークをクリックすると指定したブラウザが立ち上がり、記録が始まります。
記録中は、実際に記録したい操作をポチポチと行っていくだけです。簡単ですね。

記録が完了したらOKを押下し、テスト名を入力します。
入力後、先程操作した内容の一覧がずらっと並びます。

あとから入力内容を変更したい場合もInput列をクリックすることにより変更可能です。

記録したWEB操作を実行してみる。

記録した内容を実際に自動操作してみましょう。
トップ画面のツールバーからRunマークを押すと実行できます。
ブラウザの起動までに時間がかかりますが、操作した内容で勝手に動くかと思います。

すべて問題なく実行できました！

alertやmodalを記録したい場合

さきほどの実行結果を確認すると、DestroyのあとのalertのOKのクリックが記録されていないので、該当のuserが削除されていません。
alertやmodalのメインとは別のレイヤーになる場合は特別な処理が必要になります。
今回のalertの場合、新規行を追加し、Itemに「Accept Alert」を追加します。
今回は消えたことをちゃんと確認したいので「Refresh」も追加しました。
以下のようになります。

では実際に実行してみましょう！

alertのOKが押され、userが削除されました！

テスト結果のレポートを出力する

記録したWEB操作のテスト結果をレポートとして保存できます。
サイドメニューの Test Suites > 右クリック > New > Test Suitesから新しくTest Suitesを作成します。
メニューのAddからさきほど記録したテストケースを選択します。

追加後、Runマークを実行し同じテストを実行すると、サイドメニューのReports欄に新しくファイルが生成されます。
実行時刻、実行環境（Host名、Katalonのバージョン、OSのバージョンなど）、何件成功し何件失敗したか…かなり詳細なレポートを取得することができます。

また、
https://docs.katalon.com/katalon-studio/docs/video-capturing.html
の通り設定すれば実行結果を動画として保存することができるので、テスターの方がエンジニアにここバグってます！とわかりやすく的確に簡単に伝えられますね。

WEB操作をGit管理する

Git操作もKatalonから行うことが可能です。
メニュー > Window > Katalon Studio Preferences > Katalon > Git
から、Git操作を有効にします。
ツールバーのGitアイコンが有効になっていると思うので、あとはcloneやcommitなどのいつものGit操作を行うことができます。