制作現場におけるビジュアルリグレッションテストの導入 - 「LINEのお年玉」4年目の挑戦

はじめに みなさんこんにちは。LINEのフロントエンドエンジニアの藤井です。年末年始に実施した「LINEのお年玉」キャンペーンも今年で４回目の実施となりました。 今年は過去４年で経験した様々な反省点を振り返り、様々な改善を行いました。今回はそのなかの一つである「ビジュアルレグレッションテスト」の実施についてご紹介します。この記事では、ビジュアルレグレッションテストを運用していく上で工夫したことや、得られた知見などを共有したいと思います。 案件の特徴を紹介 まずは「LINEのお年玉」キャンペーンの特徴をご紹介します。 デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーンや「LINEのお年玉」におけるフロントエンドでの UX へのこだわりでも紹介されていますが、毎年年末年始に行われるキャンペーンとして、トラフィックが多いアプリケーションを、短期間

[hiro14aki]

]

[cuttoff19]

画像回帰テストをどこで使っていくかの話

[potato4d]

ビジュアルリグレッション、大きめの案件の運用のためのツールという印象が強いけど、デザイン変更が頻繁に起こりやすい制作の現場でも活きるというのは確かにとなった

[Quramy]

「一方で、アニメーションが使われている画面では、ピクセル単位のテストではうまく解決できず」それこそ環境変数でduration差し替えたりしてもダメだったんだろうか