表題のとおり、ここではAutifyを使った自動テストを作成方法を、初心者でもわかるように丁寧にまとめていきたいとおもいます。
はじめに
Autifyの概要については「はじめてのAutify – QA自動化プラットフォームを試してみよう」を参考にしていただきたいのですが、ここでは誰でも「ふーん」レベルで理解していただくために簡単にまとめておきます。
Autifyは
- Webアプリの画面のポチポチ操作を記録することで、何回でも同じ手順を実行できるWebサービスです
- SeleniumIDEが似ているツールですが、Autifyではクロスブラウザ、条件分岐といった更に便利にテストできる機能がどんどん実装されています
- テストはシナリオと呼ばれ、シナリオはテストプランに従って実行できます
といったツールです。
この記事ではシナリオを作成してみて、Autifyの使い勝手を理解するのをゴールとしています。
準備
AutifyはChromeで動作します。Chromeを開いて、Chrome拡張をインストールします。以後、この拡張をレコーダーと呼びます。
するとレコーダーがChromeにインストールされます。これを右クリックして拡張の管理画面を開きます。
シークレットウィンドウを許可してください。僕は意識が高いので設定画面が英語ですがお気になさずにどうぞ。
次にAutifyにログインしてください。
ほーら簡単。これで準備ができました。
シナリオを作成する
Autifyにログインし、シナリオをクリックします。
新規シナリオをクリックします。
シナリオに名前をつけます。ここでは「Autifyにログイン＆ログアウト」にしました。
開始URLはテスト対象となるURLです。ここでは「https://autify.com/ja/」にしていますが最初に開いておきたいURLを入力しておき、レコーディングを開始をクリックします。
レコーディングの開始
開始URLで指定したURLがシークレットウィンドウで開き、右下にレコーダーが表示されます。
レコーダーについて
レコーダーについては簡単ですが上記のようになっています。よく使うのは記録＆停止のボタン。画面項目チェック用ボタンです。
前者については、ちょっと画面操作を調べたいときに停止にしましょう。そうしなければ、どんどん操作が記録されてしまいます。
後者については、「画面が表示されていること」を証明するために、その画面特有の要素が表示されているかを確認するために使います。
たとえば、ログイン画面であれば「ログインボタンが表示されているはず」と考え、ログインボタンを確認します。複数していできますが、やりすぎると少しの画面修正で全部なおさなければならないので、その画面で是が非でも確認したい最大3つの要素ぐらいで考えるといいです。
ちなみに、僕がケース作成を手伝う場合は、不安定さを回避するために、画面ごとに1要素しか確認していません。
初期画面の確認
では、ログイン・ログアウトを記録します。
画面右上のログイン画面を開く前に、今開いている画面が正しいことを確認します。さて、「初期画面が正しい」とはなんでしょう？
ここでは、URLは指定しているため、画面右上にログインボタンが表示されていることを「正しい」とします。
レコーダーのチェックマークをクリックすると「対象要素をクリック または・・・」と表示されるので、カーソルをボタンの上に持っていってみましょう。すると、キャプチャだとわかりにくいですが、ボタンの四隅にマークが出て、選択されているのがわかります。
その状態で、ログインボタンをクリックします。
クリックすると、レコーダーがコマンドのプルダウンに切り替わります。いくつか選択肢はありますが、デフォルトが「対象が表示されていることを確認する」なのでそのまま「追加」をクリックします。
追加を押すと画面がもとに戻ります。何も変化はないように思いますが、裏側で先程の動作を記録しています。
ログイン画面の確認ができたので、ログインボタンを押しましょう。もちろん、この操作も記録されています。
ログイン画面の要素確認
ログイン画面が表示されました。ログイン操作をしたいところですが、先程と同じく「ログイン画面が正しい」ことを確認しましょう。面倒ですが、画面が切り替わるたびに確認すれば、テストがぐんと安定します。
ここでは、ログインフォームとしてEメール、パスワード、ログインボタンが存在することを「正しい」とします。
先程と同じくレコーダーのチェックボタンをクリックし、まずはEメール部分を選択してみましょう。フォームを選択しクリックすると先ほどと同じように要素の確認が可能です。
この調子で、「パスワード」、「ログインボタン」も確認しましょう。
ログイン操作の記録
ログイン用のEメールとパスワードを入力します。そしてログインボタンをクリックします。
ログインしました。ログインに成功したことを確認するためにどこを確認したら良いでしょうか？
たとえば画面上の「ログインしました。」メッセージを確認しても良さそうです。画面左下のログインユーザのメールアドレスを確認してもいいでしょう。
ログアウトを記録する
ログインができたのでログアウトまですすめます。ひとつのシナリオでどこまで記録するかは悩ましいところです。
長すぎると途中のステップで失敗した場合、のこりのステップのテストが実行されません。逆に短すぎると、冗長なテストがたくさんできてしまいます。
このあたりは、実際にいくつか実装しながらルールぎめをすると良いと思います。まずは迷わずに一度最後までやってみるが正解だと思います。
ログアウトボタンをクリックするまえに、テストを安定化させるためのTIPSを一つ紹介させてください。
ログイン後の画面確認について、先程、「ログインしましたメッセージの確認」や「ログインユーザのメールアドレスの確認」をしました。
これらの方法でもいいですが、「次にクリック・操作するボタンやフォームの確認」をするのも手です。ここでは、次に操作するのは「ログアウト」のリンクです。
よって、ログイン後に「ログアウトリンクが表示されること」を確認してもいいでしょう。そうすことで、「次に操作するものの確認」もでき、次に操作がうつったときの失敗を未然に防げます。
ログアウトをクリックするとログイン画面に戻りました。さて、どこを確認しましょうか？
確認後、保存ボタンをクリックして保存しましょう。
シナリオが完成しました。実行を試す場合は、画面右上の「Chromeで今すぐ実行」をクリックしてみましょう。
旅と子育てとアジャイルコーチのブログ「世界」 