2020/05/01 に公開1698 views
@spring_raining と @harumitsu.fujii が、ビジュアルレグレッションテストを導入した時の話や困りごと、今後のE2Eテストへの期待について話しました。
「LINEのお年玉」での導入事例
- https://engineering.linecorp.com/ja/blog/visual-regression-otoshidama/
- あるページにアクセスしたときのスナップショットを撮影し、期待した内容と異なっていないかを自動的に確認する
- タイトなスケジュールのあいだ目まぐるしく変わる仕様やデザイン修正の中でも、意図しない副作用がないかを確認することができた
「LINE公式アカウント」での利用例
- LINE公式アカウントのCMSで、アイコンを変更したときにどの箇所が変更されたか、レイアウト崩れが起こっていないかを確認したかった
- ページ数は多かったが、ほとんどのページで確認作業を自動化することができた
ビジュアルリグレッションテストを通してわかった課題
- 実行環境・デバイスの問題
- ブラウザ・解像度の違いでテストが失敗するケース
- Playwright という選択 https://github.com/microsoft/playwright
- テスト実行時間の問題
- ある操作を待つために決め打ちで時間を入れていると、テスト数に比例してテスト実行時間が増えてしまう
- Puppeteer であれば、
networkidle0などでネットワークのコネクション数を監視
- Puppeteer であれば、
- CI 上でテストを並列に実行して、少しでもテスト実施にかかる時間を短縮
- ある操作を待つために決め打ちで時間を入れていると、テスト数に比例してテスト実行時間が増えてしまう
- テストの外形操作の問題
- ある DOM 要素を CSS Selector のみで指定することの難しさ
- ページ中の座標を指定する方法も
- Cypress は
data-cyattribute で指定することを推奨 https://docs.cypress.io/guides/references/best-practices.html
- アニメーションなど実行時に毎回UIが変化してしまうケース
E2Eテストの今後
- E2Eテストが普及しないのは、正直環境構築やテストの記述が面倒というのが理由？
- 一方で、実はユニットテストと比べると手間自体は少ない
- アプリが完成すると自動的にE2Eテストスイートが完成していることが理想
- クロスブラウザで、どのようなテスト環境でも用意できるとうれしい