kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Autify を使って「スマホレイアウト」をレコーディングする

先週に続き「E2E テスト自動化プラットフォーム Autify」を試す.今回は「スマホレイアウト」をレコーディングする.Autify の基本的な操作などは以下の記事を読んでもらえればと!

kakakakakku.hatenablog.com

「スマホレイアウト」をレコーディングする

今回も kakakakakku blog を題材とし,スマホを使って画面遷移をするシナリオをレコーディングする.以下のステップを試す.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード「github」で記事を検索する
    • ✅ URL を検証する : https://kakakakakku.hatenablog.com/search?q=github
  3. 「プロフィール」をクリックする
    • ✅ アカウント名を検証する : id:kakku22
  4. 「ブログタイトル」をクリックする

1.「シナリオ」を作る

まず「シナリオ」を作る.現在 Autify に「スマホに特化したレコーディング機能」はなく,前回と同じようにシナリオを作る.シナリオ名は「スマホ : kakakakakku blog 画面遷移 + 検証」とする.ウィンドウサイズは 1280x1024 とする(今回はウィンドウサイズは関係なし).

f:id:kakku22:20200501220707p:plain

レコーディングを開始し,Chrome の「シークレットウィンドウ」を起動したら,まず Chrome DevTools の「Device Mode 機能」を使ってスマホレイアウトに変更する.今回は「iPhone X」とした.あとはステップを進めていく.

f:id:kakku22:20200501220726p:plain

2.「シナリオ」を確認する

レコーディング結果を確認すると,正しくスマホレイアウトになっている.

f:id:kakku22:20200501220741p:plain

3.「テストプラン」を作成する

今回は「Chrome で今すぐ実行」を使わずに「テストプラン」を作成する.今回はテストプラン名を「iPhone 実行」とし,以下の設定をした.

  • 実行環境
    • iPhone 6/7/8 (Emulator)
    • iPhone X (Emulator)
  • シナリオ
    • スマホ : kakakakakku blog 画面遷移 + 検証

f:id:kakku22:20200501220759p:plain

実行環境は,例えば iPhone と iPad なら「計5種類」からエミュレーターを選択できる.エミュレーターではなく実機を希望する場合は Autify の Pro プランなどを検討する.契約次第と言える.

f:id:kakku22:20200501220819p:plain

4.「シナリオ」を実行する

「テストプラン」から「シナリオ」を実行する.「テスト結果」を確認すると,正しく実行されている.

f:id:kakku22:20200501220837p:plain

Autify FAQs

intercom.help

まとめ

E2E テストでは,デバイスのバリエーションを増やすことにより,サービスの品質を高めることができる.Autify では「テストプラン」で実行環境を複数選択することで実現できる.現状だと「スマホに特化したレコーディング機能」がなく,Chrome DevTools の「Device Mode 機能」を使う必要はあるけど,今後に期待かなと!

Autify 紹介記事