Autifyを導入してE2E自動テストを最適化した話

Autify SaaS Selenium 自動化 品質管理

OGP

はじめに

こんにちは。SRE部BtoBチームの田村です。BtoBチームにてECサイトの購入テストや会員登録等のテストを行う際には、これまでSeleniumを利用して毎日LinuxのChrome環境にて実行しておりました。しかしながらフロントエンドが変更された場合に、ソースコードの調整をしたりサーバー保守対応も必要で、運用コストを割かれることもしばしばありました。テストにおける自動化やテスト品質の向上及び運用コストの削減を目的として、今回AutifyというE2E自動テストツールを導入しました。

BtoBチームのE2Eテスト

BtoBチームのE2Eテストは、Seleniumを用いて会員登録や購入テストを毎日実行しており、Slackにテスト結果を通知しています。エラー時には、サーバーに入ってログ閲覧し問題ないかを確認していました。そして、新しいテストパターン追加の要望があった場合にはソースコードを追加する必要があり、1パターンあたりに数時間の工数が発生して大きな運用コストが割かれていました。

このように運用コストが割かれておりましたが、Autifyを調査してみるとダッシュボード上でエラー内容を即座に確認可能とのことでした。さらにはSelenium IDEのようなレコーディングをするだけでテストパターンが作成可能でソースコードの調整が不要となり、運用コスト削減を見込めたということもありAutifyを導入しました。

Autify

特徴

  • コードを書かずにテストシナリオを作成・修正可能
  • 複数OSでテスト実行可能
  • 特定シナリオの定期実行が可能
  • クラウドで実行されるため、実行環境として実機を用意する必要はない
  • AIによりUI変化を検知するためソースコード調整が不要
  • BASIC認証設定も可能
  • チャットで気軽に問い合わせ可能

複数OSでテスト実行可能という点が素晴らしく、さらにAIによりUI変化を検知してメンテナンス工数を削減してくれるところも良い点です。困ったことがあればAutifyのダッシュボード上からチャットで気軽に問い合わせすることも可能です。

シナリオ作成手順

シナリオ作成開始

開始URLを指定すると新規ブラウザウィンドウが立ち上がり、シナリオ作成が開始されます。試しに、Seleniumに準備されているテストサイトを用いてシナリオ作成を行ってみます。

シナリオ作成画面

レコーディング

自動でレコーデイングされるので、シナリオパターンに沿って操作します。イメージとしてはSelenium IDEのように、レコーディングされる感じです。

レコーディング画面

検証

検証したいテキスト等があれば、画面右下にあるAutifyツールのチェックボックスアイコンで設定できます。デベロッパーツールのインスペクトモードのように要素を選択可能で、要素によって検証項目が変動しますが、大枠は下記のようなチェックが可能でした。

  • タイトルチェック
  • URLチェック
  • テキストチェック
  • 要素表示チェック
  • オンオフチェック
  • 存在チェック

検証設定画面

シナリオ編集画面

微調整したい箇所は編集可能となってます。入力テキストの内容などを変更することが可能です。また、特定の操作までローカルブラウザで自動実行し、新規操作を追加することも可能です。Selenium IDEの場合は、ファイル共有などする必要があったのですが、Autifyではダッシュボード上にて最新シナリオ状態を確認できる点が便利です。

シナリオ編集画面

シナリオ実行結果

ステップごとに前回との比較ができ、わかりやすくなってます。前回からの見た目の変更点をすぐに確認可能となっています。

シナリオステップ結果画面

マルチデバイスで実行可能

複数OSでテスト実行が可能となっています。

シナリオ実行環境選択画面

SameSiteデフォルト変更の影響確認に利用

Chrome 80のSameSiteデフォルト変更の対応を行う際に役立った実例を紹介します。

iOS 12におけるSafariの場合は、WebKit Bugzilla (Bug 198181)に記載ある通り、SameSite=None指定はStrictと扱われてしまうので、特定条件のみSameSite指定を外す対応が必要でした。

影響を確認するために、AutifyにてiOS 12の端末を指定しテストすることで、修正の確認が即座にできました。通常であれば実機にて手動テストを実行していたところですが、Autify導入していたおかげで自動テストが可能でした。

まとめ

良かった点

  • 複数プラットフォームにて即座にテスト可能
  • シナリオファイルを共有する必要がなく、ウェブで全て完結している
  • 不明点、改善要望があれば、チャットですぐ問い合わせが可能

気になった点

細かい挙動の調整ができない

例えば、お届け予定日をコンボボックスで選択する場合、実行日によって動的にラベル内容が更新されるようなサイトの場合です。Autifyの場合は、ラベル名で選択しているので、レコーディング時に選択した日付が無くなった場合にエラーとなってしまいます。このような場合は、インデックス選択できれば解決できそうなので、現在は改善要望中です。

度々アップデートが行われており、改善されていくかと思います。

さいごに

ZOZOテクノロジーズでは、一緒にサービスを作り上げてくれる方を募集中です。ご興味のある方は、以下のリンクからぜひご応募ください！

tech.zozo.com

カテゴリー