Autify連載Day5：クロスブラウザテスト

はじめに

こんにちは、ACS事業部の瀧澤です。

Autify連載企画、前回のブログではテスト工程を再利用可能な部品として利用できる機能「ステップグループ」を紹介しました。

techblog.ap-com.co.jp

Day5では、Autifyでクロスブラウザテストを実行する方法についてご紹介します。異なるOSやブラウザの挙動を手動で確認するのは骨が折れますが、Autifyでは簡単な設定で複数ブラウザでの動作をテストできます。

テストプランの作成

クロスブラウザテストを実行するには、まずテストプランというものを作成する必要があります。テストプランを作成すると、複数のシナリオをまとめて実行したり、テストの定期実行やSlack通知を設定したりできるようになります。

サイドバーから「テストプラン」を選択し、画面右上の「新規テストプラン」をクリックします。

テストプラン名を入力し、「作成」をクリックしてテストプランを作成します。（プラン名は作成後も変更可能です）作成すると以下の画面に遷移します。

シナリオを選択する

テストプランを作成したら、まずは「シナリオを選択する」からシナリオ選択画面に遷移し、実行したい既存のシナリオを選択します。
今回は事前に用意した「Blog Day5」という名前のシナリオを選択し、画面右上の「保存」をクリックします。
（シナリオ「Blog Day5」は弊社HPのABOUTページへのリンクをクリックしたのち、特定の文字列「私たちについて」がページに存在することを確認するだけのシンプルなテスト内容です。）
※シナリオの作成についてはDay3ブログ参照実行方法で「並列」「直列」を選択できますが、今回はデフォルトのまま「並列」としています。

テスト実行時間が短くなるため基本的には並列実行で良いと思いますが、あるシナリオを実行した後でないと特定シナリオが成功しない、等の依存関係がある場合は直列実行を選択しましょう。

実行環境を選択する

続いてテストプランの「実行環境を選択する」からテストしたいOSやブラウザを選択します。 OS/ブラウザの組み合わせを選択し、「保存」をクリックします。テストプラン画面に戻るので、さらに追加したい場合は画面右上「追加」ボタンから追加していきましょう。 ※選択できるOS/ブラウザはご契約プランによって異なります。今回は試しに、「Chrome / Linux」「Chrome / iPad Pro」「Edge / Windows Server」を追加してみました。実行環境の追加が終わったら、作成したテストプランを実行してみましょう。画面右上の「実行」をクリックします。

結果の確認

テストの実行が完了したら、サイドバーの「テスト結果」をクリックします。実行したテストプラン名をクリックします。並列実行した環境ごとのテスト結果をそれぞれ確認できます。
今回は結果としては全て成功（緑チェックマーク）となっているので、どの環境でもABOUTページの特定文字列の発見はできているようです。 Edge/Windows ServerとChrome/iPad Proの結果に「要確認」ラベルがついているので、中身を確認してみます。

・Edge/Windows Serverの結果「要確認」ラベルがついているステップを確認してみます。画面比較を見ると、画面幅が小さくなった影響でABOUTリンクのボタンがハンバーガーメニューに移動してしまい想定のアクション（ABOUTリンクをクリック）が実行できなくなっていることがわかりました。（Windows Serverでの実行ですがChrome/Linuxで実行した際よりもブラウザ画面幅が小さい状態で実行されるようです）最終的なテストの結果は成功と判定されますが、そこに至るまでの個別のステップの挙動がシナリオの内容と異なるため「要確認」ラベルがついていたということですね。（リンクをクリックできなくてもテスト実行自体が失敗とならないのは、Autifyが画面遷移後のURLも記録しているので、最終ステップでURLへ直接遷移して該当要素を発見できているためと思われます）

内容を確認し、特に問題がないと判断できれば画面右下のボタンで「成功とする」をクリックしておきます。 Chrome/iPad Proの方も同様な理由で「要確認」となっていたため「成功とする」をクリックしておきました。全ての「要確認」ラベルがついているステップで確認を終えると、結果一覧からもラベルが消えます。