iOSでスクリーンショットテストを導入した話

Transcript

1. © asken.inc iOSで スクリーンショットテスト を導入した話 25/05/21 Mobile勉強会 #20 ウォンテッドリー × チームラボ × Sansan Takuya Osawa
2. © asken.inc 2 自己紹介 Takuya Osawa X(@t_osawa_009) 株式会社asken モバイルテックリード 主な仕事 食事管理アプリ「あすけん」のiOS開発を担当 趣味 野球観戦
3. © asken.inc 3 アジェンダ 導入の背景 スクリーンショットテストとは どうやって導入したか? 効果と現状の課題 まとめ
4. © asken.inc 4 導入の背景
5. © asken.inc 5 背景その1 予期せぬ変更により、レイアウト崩れがリリースされてしまう事 例が発生しています ユニットテストは充実してきたものの、レイアウトの崩れなどは ユニットテストだけでは検知しきれない
6. © asken.inc 6 背景その２ 生成AIの活用によりUI開発スピードが加速する 既存改修でも活躍 -> たくさん実装されたものを従来の目視確認頼るのは 限界があり、自動化したい
7. © asken.inc 7 スクリーンショットテストとは
8. © asken.inc 8 スクリーンショットテストとは UI のスクリーンショットを取得し、以前に承認された「参照」ま たは「ゴールデン」と呼ばれる画像と比較します。 差分がなければ合格となります https://developer.android.com/training/testing/ui-tests/screenshot?hl=ja
9. © asken.inc 9 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja Scope = 範囲 Fidelity = 忠実度 Time = 時間 結合 分離
10. © asken.inc 10 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja コンポーネント テストは、システム内の他のコンポーネントとは別に、モ ジュールやコンポーネントの機能または外観を検証します。単体テストとは 異なり、コンポーネント テストの表領域は、個々のメソッドやクラスより上位 の抽象化にまで広がっています。 例: カスタム ボタンのスクリーンショット テスト コンポーネント テストは
11. © asken.inc 11 どうやって導入したか？
12. © asken.inc 12
13. © asken.inc 13 スクリーンショット生成
14. © asken.inc 14 スクリーンショットの取得 OSS(swift-snapshot-testingなど)を使わずに UIWindowのrootViewControllerに画面を配置して、 スクリーンショットを取得する実装
15. © asken.inc 15 スクリーンショットの取得
16. © asken.inc 16 差分比較とレポート
17. © asken.inc 17 reg-cliとは HTML出力を備え たビジュアル回帰 テストツール https://github.com/reg-viz/reg-cli
18. © asken.inc 18 工夫した点
19. © asken.inc 19 工夫した点その 1 スクロールの画面に対応 スクリーンショット取得用のUIWindowのframeに指定のサイ ズを渡すとスクロール全体の画面が取れる
20. © asken.inc 20
21. © asken.inc 21 工夫した点その 2 reg-cilを使ってレポートを出力 Github actionsのアーティファクトにアップし、失敗の原因を絞 りやすくする
22. © asken.inc 22
23. © asken.inc 23 工夫した点その 3 非同期で取得する画像はplaceholder画像で差し替える 色や文字を埋め込んだ画像を生成し、識別可能にする
24. © asken.inc 24 工夫した点その 3
25. © asken.inc 25 効果と現状の課題
26. © asken.inc 26 効果その1 意図しないレイアウト変更の早期発見 -> DevelopマージタイミングでCI/CDでチェックしているので変 更に気が付く
27. © asken.inc 27 効果その2 画面仕様の理解が進む -> 視覚的に理解でき、画面の状態の把握がしやすくなった 設計改善 -> mockの差し替えをするため疎結合な設計になる
28. © asken.inc 28 課題と対策その 1 不安定なテストが一部あり、失敗の通知が過剰 -> UI実装の見直し
29. © asken.inc 29 課題と対策その 2 シングルトンの実装があり、Mockの差し替えが不可な画面が ある -> 疎結合な実装への移行
30. © asken.inc 30 まとめ iOSスクリーンショットテスト導入で、意図しないレイアウト変更 の早期発見や設計改善の効果があった 不安定なテスト、過剰な通知、シングルトン実装に課題がある ため UI実装の見直しと疎結合な実装への移行が必須
31. © asken.inc 31 Thank you