はじめに
こんにちは！ACS事業部の田中です。
前回のブログでは、Autifyの機能概要をざっくりとご紹介しました。
techblog.ap-com.co.jp
連載３回目となる本ブログでは、前回ご紹介した内容のうちシナリオの作成に焦点をあててAutifyの使い方をご紹介させていただきます。
なおこのブログで紹介する内容を実行するためには、Autifyのアカウント並びにChrome拡張機能「Autify Recorder」がインストールされている必要があります。
また、シークレットモードで拡張機能が動作可能である必要もあります。
詳細な手順については、公式ドキュメント Autify University の「ユーザー登録と環境セットアップ」をご参照ください。
シナリオの作成
Autifyにおいてシナリオとは、従来のテストにおけるユーザーストーリーに相当するもので、ユーザーが行いたいと思っている一連の操作を表しています。
またAutifyにおいてシナリオは「ステップ」と呼ばれる単位で構成されています。
リンクをクリックする、プルダウンメニューから値を選択するなど各ステップはシナリオにおける単一のアクションを表しています。
本ブログでは、ユーザーがAPCのホームページにアクセスし、言語切り替えを行いページが英語で表示されることを確認するシナリオを作成していきたいと思います。
新しいシナリオの作成
Autifyにログインした状態で、サイドバーのシナリオメニューをクリックします。
シナリオ画面が表示され、作成したシナリオの一覧を確認することができます。
新しいシナリオを作成するには、画面右上の「新規シナリオ」ボタンをクリックします。
新しいシナリオを作成するページでは、シナリオの初期条件を変更することができます。
まず、自動生成されたシナリオ名の横にある「変更」をクリックし、シナリオに付与するメタデータを編集します。
メタデータには、シナリオ名、ラベル、説明、を付与することができます。
「開始URL」にはテスト対象となるサイトのアドレスを入力します。
「レコーディングを開始」をクリックすると新しいブラウザウィンドウがシークレットモードで開き、画面右下に「Autifyレコーダー」のツールバーが表示されます。
ツールバーの詳しい説明は公式ドキュメント「Autifyレコーダー」(https://help.autify.com/docs/ja/autify-recorder)をご参照ください。
ツールバーの赤い記録ライトが点滅している場合、それ以降のWebページ上で実行するすべてのアクションが記録されていきます。
ここでは、ユーザーがAPCのホームページにアクセスし、言語切り替えを行いページが英語で表示されることを確認するシナリオを作成します。
英語で表示されていることの確認は、「アサーション」と呼ばれる機能を用いて行います。
アサーションはページ上の特定の要素を検証する機能です。（表示されている文字列がXXと完全一致であること、など）
では、実際にシナリオを作成していきたいと思います。
まず、1. 画面左上の「EN」をクリックして英語表示に切り替えます。2. その後、「Autifyレコーダー」のツールバーのチェックマークをクリックし、アサーションを有効にします。
アサーションモードになると、ブラウザの要素を選択できるようになります。
今回は WHAT WE DO に表示されている標語が英語になっていることを確認してみましょう。
「Creating the future of infrastructure engineers」というテキストにマウスを動かしてみるとテキストがハイライトされるので、クリックして確認の対象として選択します。
選択したテキストに対して、「Autifyレコーダー」のツールバーからアサーションの種類を選択します。
ここでは「対象のテキストが〇〇であることを確認する」を選択し、「値」に入力した文字列と完全一致であることを確認します。
「追加」をクリックしてアサーションを保存したのち、「保存」をクリックすることでここまでのすべてのステップを保存し録画ウィンドウを閉じることができます。
このように、ユーザーが行いたいと思っている一連の操作を実際に行いながらその操作を記録していくことで、直感的にシナリオを作成することができます。
シナリオの実行と結果確認
シナリオの作成が完了したら、実際にテストを実行してみましょう。
シナリオが保存されると自動的に編集画面にもどります。
レコーディング中に行った操作が一連のステップとして記録されており、各ステップの編集や削除が可能です。
シナリオの編集や削除については今後の連載にてご紹介予定です。
まずは、右上の「今すぐ実行」ボタンをクリックしてテストを実行してみましょう。
「今すぐ実行」をクリックすると、Autifyサーバーと仮想ブラウザ上でテストが実行されます。
テスト実行の記録は、「テスト結果」タブから確認することができます。
テスト結果には実行されたテストが一覧表示されており、各テストをクリックすることでその詳細を確認することができます。
テスト結果ページには、実⾏された各環境の⼀覧が表⽰されます。
テーブルの「実⾏環境」列のエントリをクリックすることで、その環境におけるテスト実行の詳細を確認することができます。
テスト結果の詳細ページでは、テスト実行結果のサマリと各シナリオの内容と成否、所要時間が表示されます。
シナリオ名をクリックすると、そのシナリオの各ステップのテスト結果を確認することができます。
左側にはテスト実行中のアクションのビデオプレビューが表示され、右側には各ステップの詳細情報が表示されます。
さらに、レコーディング時とテスト実行時の結果の比較もこの画面から確認可能です。
各ステップのサムネイル画像をクリックすると、レコーディング時とテスト実行時のスクリーンショットを比較することができます。
まとめ・次回予告
本ブログではごく簡単なテストシナリオの作成を通じて、Autifyにおけるシンプルなシナリオの作成方法ならびに一時的なテストの実行方法、テスト結果の確認方法をご紹介しました。
Autifyでのテスト作成は敷居が低そう！テスト結果も細かく色々確認できるんだなぁ！と少しでも感じていただけたら幸いです。
さて、ここまでの内容でログイン/ログアウトなど何度も繰り返す手順を毎度登録するのは面倒だな…、共通する手順に変更が入った際に個別に修正するのは大変だな…と感じた方もいらっしゃるのではないでしょうか。
そこで次回の連載記事では、異なるシナリオ間で再利用可能なステップ群「ステップグループ」についてご紹介する予定です。
それではまた次回の連載でお会いしましょう！
ここまでお読みいただきありがとうございました。
ACS事業部のご紹介
私達ACS事業部はAzure・AKSなどのクラウドネイティブ技術を活用した内製化やGitHub Enterpriseの導入のご支援をしております。
www.ap-com.co.jp
www.ap-com.co.jp
また、一緒に働いていただける仲間も募集中です！
今年もまだまだ組織規模拡大中なので、ご興味持っていただけましたらぜひお声がけください。
www.ap-com.co.jp
