kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする

2019年10月に正式リリースとなった「E2E テスト自動化プラットフォーム Autify」を試す.今回は Autify の CTO 松浦さん (@dblmkt) に期間限定の検証アカウントを作っていただいた.ありがとうございます!

autify.com

今まで SeleniumCapybara (Poltergeist) を使った E2E (End to End) テストの導入経験はあるし,最近だと CypressPuppeteer を使う機会もある.とは言え,技術選択よりも「E2E テストを継続的にメンテナンスすること」に対して課題を感じる.仮説検証を繰り返すためにリリース頻度を上げていくと,あっという間に E2E テストも落ちてしまう.適当に XPath を修正したり,修正を諦めた経験もある.

今回紹介する「Autify」を使うと AI にシナリオのメンテナンスを任せられる.Alchemist Accelerator Demo Day のピッチを観ると「Autify の価値と熱狂」を感じられる.Autify を試す前に見ておくと良いかと!

vimeo.com

準備

まず,Chrome 拡張「Autify Recorder」をインストールしておく.さらに設定から「シークレットモードでの実行」を許可しておく.

chrome.google.com

1. Autify : レコーディング

Autify の雰囲気を把握するために,kakakakakku blog の画面遷移をするシナリオをレコーディングする.以下のステップを試す.

  1. 「kakakakakku blog」にアクセスする
  2. 「最新記事(1記事目)」をクリックする
  3. 「Envoy」カテゴリをクリックする
  4. アーカイブから「2019年」をクリックする
  5. 「GraphQL Pokémon」の記事をクリックする
  6. キーワード「github」で記事を検索する
  7. ページネーションから「次のページ」をクリックする
  8. 「ブログタイトル」をクリックする

Autify の UI は定期的に変わる可能性もあるからリリースノートを見ておくと良さそう.今回は 4/22 リリースを前提にスクリーンショットを取得した.

docs.autify.com

1-1.「シナリオ」を作る

最初に「シナリオ」を作る.サイドメニューから「シナリオ」をクリックして,右上にある「新規シナリオ」をクリックする.

f:id:kakku22:20200429115123p:plain

次に「シナリオタイトル」「ウィンドウサイズ」「開始 URL」を入力する.今回は以下の値とする.

  • シナリオタイトル : kakakakakku blog 画面遷移
  • ウィンドウサイズ : 1280x1024
  • 開始 URL : https://kakakakakku.hatenablog.com/

f:id:kakku22:20200429115138p:plain

「レコーディングを開始」をクリックすると,自動的に Chrome の「シークレットウィンドウ」が起動する.右下に Chrome 拡張「Autify Recorder」が起動していることも確認できる.あとはステップを進めていく.完了したら「保存」をクリックする.

  • 赤丸 🔴 : 点滅中はレコーディング中を意味する
  • チェック ✅ : 検証を追加する
  • 矢印 ↪️ : ページ遷移を追加する

f:id:kakku22:20200429115153p:plain

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

レコーディング結果は Autify で確認できる.修正もできるため,誤クリックをしても消せる安心感がある.事前に考えたステップをレコーディングできていた.

f:id:kakku22:20200429115223p:plain

1-3.「シナリオ」を実行する

シナリオ画面の右上にある「Chrome で今すぐ実行」をクリックする.実行が終わり,サイドメニューから「テスト結果」をクリックすると,正常実行されたシナリオを確認できる.

f:id:kakku22:20200429115241p:plain

フェーズごとに画面比較もできる.これは便利!

f:id:kakku22:20200429115256p:plain

2. Autify : 画面遷移 + 検証

E2E テストでは,画面を検証するコードを実装する.今度は先ほどと同じシナリオに検証を追加していく.Aufity ではシナリオを「複製」する機能もあるけど,今回はもう1度レコーディングした.

  1. 「kakakakakku blog」にアクセスする
  2. 「最新記事(1記事目)」をクリックする
  3. 「Envoy」カテゴリをクリックする
    • ✅ URL を検証する : https://kakakakakku.hatenablog.com/archive/category/Envoy
    • ✅ カテゴリ名を検証する : Envoy
  4. アーカイブから「2019年」をクリックする
    • ✅ タイトルを検証する : 2019-01-01から1年間の記事一覧 - kakakakakku blog
  5. 「GraphQL Pokémon」の記事をクリックする
  6. キーワード「github」で記事を検索する
    • ✅ 要素を検証する : 次のページ
  7. ページネーションから「次のページ」をクリックする
  8. 「ブログタイトル」をクリックする

2-1.「ページ情報」を検証する

レコーディングをしながら検証を追加していく.まず「ページ情報」に関する検証は以下の「計5種類」から選択できる.今回は 「Envoy」 カテゴリをクリックした直後の URL を検証するため「URL が ○○ であることを確認する」を使う.

  • ページに指定の要素が存在することを確認する
  • ページが ○○ を含まないことを確認する
  • タイトルが ○○ であることを確認する
  • URL が ○○ であることを確認する
  • URL が ○○ を含むことを確認する

f:id:kakku22:20200429115317p:plain

2-2.「要素」を検証する

次に「要素」に関する検証は以下の「計4種類」から選択できる.今回はカテゴリ名を検証するため「対象のテキストが ○○ であることを確認する」を使う.なお,要素を選択する体験は Chrome DevTools と同じくマウスホバーを使う.

  • 対象が表示されていることを確認する
  • 対象のテキストが ○○ であることを確認する
  • 対象のテキストが ○○ を含むことを確認する
  • 対象のテキストが ○○ を含まないことを確認する

f:id:kakku22:20200429115336p:plain

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

レコーディング結果は検証も含めて Autify で確認できる.

f:id:kakku22:20200429115353p:plain

3. Autify : 画面遷移 + 検証(エラー)

最後は「検証時にエラーが発生する場合」を確認する.

3-1.「シナリオ」を修正する

2個目に作ったシナリオ「kakakakakku blog 画面遷移 + 検証」を複製して,URL 検証の期待値を /category/Envoy ではなく /category/Envoyy とした.意図的にエラーを発生させる.

f:id:kakku22:20200429115410p:plain

3-2.「シナリオ」を実行する

同じように「Chrome で今すぐ実行」をクリックする.実行が終わり,サイドメニューから「テスト結果」をクリックすると,エラーを確認できる.ちゃんと「期待値」「結果」を確認できるため,問題判別も素早くできそう.

f:id:kakku22:20200429115427p:plain

まとめ

今回は Autify の雰囲気を把握するために,kakakakakku blog の画面遷移をするシナリオをレコーディングしてみた.レコーディングは簡単だし,シナリオを修正することもできた.XPath をゴニョゴニョする必要もなく,非エンジニアもシナリオが作れる点もメリットに感じた.まだまだ Autify の機能はあるため,引き続き試していく!