LIFULL SETグループの木住野(きしの)です。
※ ちなみにSETとはSoftware Engineer in Testの略称です
１０月から発足された新設部署になります。よろしくお願いします。
主にテストや開発作業の自動化、高速化をメインミッションに活動しています。

話のはじまりはSETグループで開発中のテストツールを社内の開発チームに使ってもらってフィードバックをもらおうという改善活動からでした。
本稿はその活動にご協力いただいた開発チームに使ってもらったときの事例になります。

１. E2EテストツールでUIテストを自動化する

基本的にE2Eテストツール(seleniumなど)はUIテストのために用いられることが多いと思います。

UIテストで担保したいことは
ある操作をした結果、ユーザが期待する通りに動作し、目的を達成できるかです。

(例)

• ログインフォームにID/パスワードを入力して、ログインボタンをクリックする→ログインできること
• 検索条件を選択肢して情報を絞り込む→ちゃんと絞り込めること

つまり ユーザへの価値提供 がきちんとなされているかに重きをおいたテストです。
我々で元々運用しているE2Eテストも同じ目的でした。

しかし、本事例はユーザ目線というよりも、 サービス提供者目線 での利用でした。

２. どんなリリースだったのか

さて具体的にどんな内容のリリースだったかというと、
弊社サービスの様々なページにとあるHTMLタグを埋め込み、属性値をパターン別に出し分ける
というようなものでした。

このタグはユーザデータを収集するためのものです。

ユーザにとってはこのタグの有無で動作の変化はほぼありませんが、サービス提供側からするとこの情報は大事な情報です。

実際に埋めるタグは下記のようなイメージです。

<div class=”class_a” hoge=”value1” fuga=”value2” gafu=”value3”  ..........>　

パターンによっては14個もの属性値を確認する必要があります。
また、対象ページ数はざっと350URL程度でした。

「埋まっているタグの属性値が仕様どおりか」をできるかぎり網羅的に確認することがテストで担保したいことになります。

３. 開発チームが懸念していたこと

• 膨大なページに埋め込まれたタグの属性値をチェックするのは工数がかかる
• 人なので見間違いが発生する危険もある
• テスト実施者はロボットにように単純作業をしなければならない

４. どんなテストを自動化したのか

テスト手順 ~ 手動の場合 ~

問題を解決するために自動化したテストの手順は以下になります。

1. URLを開く
2. ソースコードを開く（DevToolかなにかで）
3. タグを検索（ひっかかりそうな文字列）
4. タグの値を見て確認 (※ 複数ある場合はすべて確認)
5. 結果記入

これを対象ページ数分実施します。
決して難しくはないですが、
ページ数も多いですし、視認して結果も記入するという手間ですし、なによりこの単純作業がとても つらくて退屈 大変そうですよね。
またこのサービスのテストプロセスではこれを数回実施する必要があります。

テスト手順 ~ 自動の場合 ~

以下のようなテストケースにしてテストコードへ落とし込み自動化を行いました。

1. URLを開く
2. xpathでWeb要素を取得
3. 属性値を検証
4. 結果をDBへ登録（テストレポートに使用する）

もちろん実装コストはタダではありませんが、懸念事項はだいぶ改善されました

５. まとめ

• データ収集用のタグ設定確認にもE2Eテストツールが使える
• もちろん今後の回帰テストにも繰り返し利用可能
• ただブラウザを使わなくてもHTMLドキュメントをダウンロードするだけ(curlなど)のほうが速度は向上できるかも
  （ページロード後に非同期で取得されるタグなどはとれないかも）