UIT INSIDE UIT INSIDE
2020/05/01 に公開 996 views

このエピソードについて

@spring_raining と @harumitsu.fujii が、ビジュアルレグレッションテストを導入した時の話や困りごと、今後のE2Eテストへの期待について話しました。

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

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

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

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

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

  • 実行環境・デバイスの問題
  • テスト実行時間の問題
    • ある操作を待つために決め打ちで時間を入れていると、テスト数に比例してテスト実行時間が増えてしまう
      • Puppeteer であれば、networkidle0 などでネットワークのコネクション数を監視
    • CI 上でテストを並列に実行して、少しでもテスト実施にかかる時間を短縮
  • テストの外形操作の問題
  • アニメーションなど実行時に毎回UIが変化してしまうケース

E2Eテストの今後

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

Refs