UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. 自己紹介
    00:54
  • 2. 「LINEのお年玉」での導入事例
    01:25
  • 3. 「LINE公式アカウント」での利用例
    05:41
  • 4. ビジュアルレグレッションテストを通してわかった課題
    09:37
  • 5. E2Eテストの今後
    25:27
  • 6. クロージング
    33:14

ep.41 「見かけ」倒しではない Visual Regression Testing の魅力と難しさ

2020/05/01
583 views
緑豆はるさめ Fujii Harumitsu

@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テストスイートが完成していることが理想
  • クロスブラウザで、どのようなテスト環境でも用意できるとうれしい
10秒前へ 10秒次へ