Autify for Webを理解するためのコンセプトマップ（2021年版）

この記事は Autifyアドベントカレンダー2021 の24日目のエントリです。当記事ではAutify for Webの機能が俯瞰して見える「コンセプトマップ」（2021年版）を作ったのでご紹介します。作り方としては、当該サービスをポチポチ触っていきながら、URLの構造などを「たぶんこうなってるんだろうな」と外様から分析した結果を図にしました。

Autifyのサービスは日々進化しており、かつ料金プランによってアクセスできる機能とそうではない機能もあります。よって、今回分析した結果は、2021年12月24日時点のAutify for Webであり、すべてのコンセプトを完全に網羅したものではないことにご留意ください。また、自身の設定「表示言語」が英語になっている都合上、図の中で現れる言葉も英語になっていますが、本文内で「Organization（組織）」といった形式で補足していきます。

(English version is available on Medium).

概観

Autify for Webの中で目に見える概念の関係図をまとめました。

Autifyをすでに使ってる方であれば、デモリクエストを送ってからトライアルを始めたときの記憶を思い出していただけるとわかりやすいと思いますが、「Organization（組織）」という概念がまずあります。会社名だったりすることがおそらく多いでしょうか。

「Organization（組織）」からは招待を送ることで複数人の「Member（メンバー）」を増やすことができますね。招待された側の視点に立つと「User（個人）」という概念で認識していることでしょう。

「Organization（組織）」は「Workspace（ワークスペース）」の中でテストを作成していきます。この「Workspace（ワークスペース）」は料金プランによっては複数用意することができます。

「Workspace（ワークスペース）」の中ではホーム画面横サイドバーのメニューに現れていますが大きく4つの概念があります。

定期実行やデプロイメントをトリガーに実行するといった際に作成されるのが「Test plan（テストプラン）」です。「Test plan（テストプラン）」は複数の「Scenario（シナリオ）」を取りまとめます。

「Scenario（シナリオ）」は複数の「Step（ステップ）」によって構成されます。いろいろな「Scenario（シナリオ）」で何度も使う「Step（ステップ）」をグループにまとめて使えるようにするのが「Step group（ステップグループ）」です。

「Test plan（テストプラン）」および「Scenario（シナリオ）」を実行すると「Result（テスト結果）」が作成されます。

概観としては以上です。ここから詳細度を上げて一つ一つの概念を見てみましょう。

Organization（組織） / Member（メンバー）

「Organization（組織）」と「Member（メンバー）」を更に詳細にするとこのようになります。

「Organization（組織）」単位で、契約更新日や月間のテスト実行回数があり、月間のテスト実行回数の追加のリクエストもこの概念の単位で行われます。

「Member（メンバー）」は、個人設定から複数の「Personal Access Token（パーソナルアクセストークン）」を発行することができます。そして発行された「Personal Access Token（パーソナルアクセストークン）」はRevoke（無効にする）ことができます。

Workspace（ワークスペース）

「Workspace（ワークスペース）」単位ではテスト作成・実行・通知に関連したいくつかの概念が設定可能です。

「Webhook」ではテスト完了時に通知を受けるエンドポイントが設定できます。Webhookの仕様はAutify for Web Help Center >> Webhookを作成するにて確認することができます。Webhookを用いた事例としては、Autify → Mackerel 連携 - 継続的なE2Eテストを監視するが挙げられます。

テスト完了通知を受けたいSlackチャンネルに対する通知を「Slack notification（Slack通知）」で設定します。

テスト対象システムにBasic認証を設定している場合に、「Basic auth credentials（Basic認証情報）」を「Workspace（ワークスペース）」に設定します。

「Custom hostname（カスタムホスト名）」は現在の料金プランではAdvance以降で設定可能なものです。

Autifyでは、新規会員登録や、購入後のトランザクションメールなど、遷移テスト・メール内容の確認に使えるメールテスト受信環境が用意されています。「Permanent test email address（テストのためのメールアドレス）」にて、メールテストで利用するメールアドレスを複数作成できます。ここで作成したメールアドレスは「Scenario（シナリオ）」の作成・編集時に利用します。

Test plan（テストプラン）

「Test plan（テストプラン）」にはいつ実行するかを表す「Trigger（定期実行）」、どこで実行するかを表す「Execution environment（実行環境）」、複数環境に対応するために設定される「URL replacement（シナリオ内のURL置換）」、そして実行対象の「Scenario（シナリオ）」と続きます。

テストプランを編集する管理画面は次のようなイメージになります。

「Test plan（テストプラン）」を実行すると「Result（テスト結果）」が作成されます。たとえば、2つの「Scenario（シナリオ）」をまとめた「Test plan（テストプラン）」を実行すると次のように「Execution environment（実行環境）」ごとのテスト結果を確認することができます。

そして、Edge / Windows Serverでの実行結果へ進むとその先に「Scenario（シナリオ）」の実行結果一覧が出てきます。

そこから、確認したい「Scenario（シナリオ）」の実行結果の詳細を確認すると「Step（ステップ）」ごとの結果を見ることができます。

これらの機能の関係性から「Result（テスト結果）」の構造は次のようになっていることがわかります。

Scenario（シナリオ）

さて、次は「Scenario（シナリオ）」です。作成する一つ一つのテストを指す概念です。この概念の中にWindow size（例: 1280x1024、375x812 (iPhoneX) Beta）が含まれています。

「Scenario（シナリオ）」からDuplicate（複製）することで新しい「Scenario（シナリオ）」が既存のものをコピーして作ることができます。また、Duplicate as step group（ステップグループとして複製）することで「Step group（ステップグループ）」が作られます。

「Scenario（シナリオ）」は一連の「Step（ステップ）」を管理していますがInsert（挿入）することで「Step（ステップ）」間に新たに追加することができます。

「Data（データ）」を用いることで、一つの「シナリオ」で様々な文字列のパターンのテストを行うことができます。

たとえば、次のようなCSVを作成してアップロードすることで当該「Scenario（シナリオ）」内で使用することができます。

"first name","last name","company name"
"Smith","Christopher","A"
"John","Lee","B"
"Mark","Williams","C"
"David","Clark","D"

Run now on Chrome（Chromeで今すぐ実行）するとシナリオの実行が始まり、同時に「Result（テスト結果）」が作成されます。「Result（テスト結果）」の構造は「Test plan（テストプラン）」とそこまで違いはありません。

Step（ステップ）

次に、「Scenario（シナリオ）」や「Step group（ステップグループ）」を構成する「Step（ステップ）」に焦点を当ててみましょう。

「Step（ステップ）」には、まず何をするのかを表すAction（アクション）があります（例：クリックする、入力する、ページ遷移する、JavaScriptのコードを実行する）。

確認するような「Step（ステップ）」を作った際にはWhen this step fails（このステップが失敗した時）の振る舞いを設定します。

さらに、なんらかのテキスト表示を期待する場合にはText to assign（期待値）を設定します。ここではこれまで触れてきた様々な概念を参照することができます。

• Given valueはこの「Step（ステップ）」の確認専用に入力する値です。
• Test email addressは「Workspace（ワークスペース）」で作成した「Permanent test email address（テストのためのメールアドレス）」を利用することができます。
• Dummy email addressを選択すると実行ごとにランダムな配信不能なメールアドレスを生成します。
• Dataを用いることで「Scenario（シナリオ）」にアップロードしたデータを参照することができます。
• Other step's resultはJSステップで作成した値を使うことができます。たとえば、実行のたびに重複しない文字列を生成する、といったシーンで活用できます。

Result（テスト結果）

最後に、「Test plan（テストプラン）」 ・「Scenario（シナリオ）」にて軽く言及していましたが、「Result（テスト結果）」を見てみましょう。

「Scenario（シナリオ）」ごとにWaiting・Passed・Failedといった実行状態があります。

「Scenario（シナリオ）」からすべての「Step（ステップ）」のスクリーンショット画像をDownload images（ダウンロード）することができます。

AutifyのAIがUI上での怪しい変更を検知した場合Review needed（要確認）という状態になります。Autifyでは、作成後のテストシナリオはAIがメンテナンスをサポートし、リリースの際にUIの変化があったかどうかを監視・検出します。Review needed（要確認）の状態のものに対してOK/NGを教えてあげる作業がSave as Failed / Passed（失敗とする / 成功とする）になります。

UIの変化があったかどうかを監視・検出、および最終的な判断のために、Base image（過去）と見比べます。

最後に

Autify for Webを俯瞰してみる材料になりそうでしょうか。Autifyのプロダクトは誰でも簡単にテストが作れるよう設計されているため、迷子になることは少ないかもしれませんが、もし「この機能ってどこにあるんだっけ？」とか「この概念ってどこにあるんだっけ？」と迷ってしまった際にはぜひご活用ください。