「LINEのお年玉」での導入事例

• https://engineering.linecorp.com/ja/blog/visual-regression-otoshidama/
• あるページにアクセスしたときのスナップショットを撮影し、期待した内容と異なっていないかを自動的に確認する
• タイトなスケジュールのあいだ目まぐるしく変わる仕様やデザイン修正の中でも、意図しない副作用がないかを確認することができた

「LINE公式アカウント」での利用例

• LINE公式アカウントのCMSで、アイコンを変更したときにどの箇所が変更されたか、レイアウト崩れが起こっていないかを確認したかった
• ページ数は多かったが、ほとんどのページで確認作業を自動化することができた

ビジュアルリグレッションテストを通してわかった課題

• 実行環境・デバイスの問題
  • ブラウザ・解像度の違いでテストが失敗するケース
  • Playwright という選択 https://github.com/microsoft/playwright
• テスト実行時間の問題
  • ある操作を待つために決め打ちで時間を入れていると、テスト数に比例してテスト実行時間が増えてしまう
    • Puppeteer であれば、networkidle0 などでネットワークのコネクション数を監視
  • CI 上でテストを並列に実行して、少しでもテスト実施にかかる時間を短縮
• テストの外形操作の問題
  • ある DOM 要素を CSS Selector のみで指定することの難しさ
  • ページ中の座標を指定する方法も
  • Cypress は data-cy attribute で指定することを推奨 https://docs.cypress.io/guides/references/best-practices.html
• アニメーションなど実行時に毎回UIが変化してしまうケース

E2Eテストの今後

• E2Eテストが普及しないのは、正直環境構築やテストの記述が面倒というのが理由？
  • 一方で、実はユニットテストと比べると手間自体は少ない
• アプリが完成すると自動的にE2Eテストスイートが完成していることが理想
• クロスブラウザで、どのようなテスト環境でも用意できるとうれしい

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic