普段は鳥取からフルリモートで勤務しています。年に数回全員でオフィスに集まる日がありまして、先日久々に鳥取から名古屋オフィスに行き楽しんで来ました。その時にメンバーに「あれ、髪染めました?」と聞いたのですが、「いや、染めたの結構前ですよ...」と返されてしまいました。性能が低い人間には細かな差を認識するのは難しいですね。違いの分かる男になりたいです。目視でデザインの変化を確認・検知するのがつらい...日々のライブラリのアップデートや新機能をリリースする際に意図しない箇所のデザインに影響が出ていないか心配になりますよね。整理やコンポーネントのリファクタリング等を行う際にも、影響が出る懸念やその確認作業の大変さから中々踏み出せない事もあると思います。自動テストにより機能面での振る舞いやコンポーネントの有無の検証はしていますが、関心の無い領域も含め視覚的な面での振る舞いまで記述し検証・保守する事は難しいです。テスト環境と本番環境とでどうしても差異が存在するため振る舞いが変わってくる可能性があります。よる検出を続けるのは時間的にも精度的にも厳しいです。導入を行ったのですが、その際に一部のモーダルウィンドウの表示位置がおかしくなってしまい、一部のユーザの方にご迷惑をおかけすることになってしまいました。その時も目視による確認作業は行っていたのですが、ファーストビューに存在しないモーダルなのもあって見落としてしまったのが原因でした。開発生産性向上の一環としてビジュアルリグレッションテストの導入を始めました!ビジュアルリグレッションテスト視覚的な回帰テストの名の通り、スクリーンショット等を撮影しておき前後で差分が出ていないか検証するテストです。設定し、以下の2つを行える様にしました。いい感じに通知してくれます。慣れ親しんだエンジニアが多いです。capybara-screenshotにより各画面への移動や画面操作を行い適宜スクリーンショットを撮影する様にしました。詰まった時に力技で回避できるのも良いですね。苦労した所スクリーンショットベースでの比較になるため、描画してから撮影されるまでの時間で表示が変わるアニメーションする要素が天敵です。テキストボックスのキャレットも点滅するため差分が生じてしまいます。ピクセル数や画面内の面積比率で閾値を設定する事もできるのですが、これらを解消して閾値をより低めに設定しておきたい所です。以下の処理を行う様にしました。検出結果のサンプルこの様な形式でレポートが作成され、差分があった画像は前後の画像と差分画像が出力されます。差分をオーバーレイした画像とは別に、差分のあった領域を囲って表示してくれるので確認しやすくなっています。この様に目視での判別が難しい細かな差分も検出されます目視では判別の難しい差分まとめ以上の方針でビジュアルテストが平日に実行される様にできました。プロジェクトの期間もあったのでスコープから外したのですが、以下にも対応してもっと安心して開発していける様にしたいですね。クラウド見...2021-06-11Androidアプリのテストを自動化こんにちはmisocaアプリの評価が3.5になって嬉しいtijinsです。...2019-08-02木曜の夜はもくテク!こんにちは、k0matatsuです。皆さんは「もくテク」...2017-06-16MisocaのCI構成まとめこんにちは。4月からMisocaにjoinしました、tkykです。弥生は第23回Quesに協賛します。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。