Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOSでスクリーンショットテストを導入した話
Search
Takuya Ohsawa
May 21, 2025
0
150
iOSでスクリーンショットテストを導入した話
Takuya Ohsawa
May 21, 2025
Tweet
Share
More Decks by Takuya Ohsawa
See All by Takuya Ohsawa
Kotlin補完計画 〜KMP(Kotlin Multiplatform)とAIが導く越境と補完の未来〜
takuyaosawa
0
70
なぜ、あすけんiOSでテスト戦略を導入したのか?
takuyaosawa
0
140
技術選定 askenでの取り組み Kotlin Multiplatform編
takuyaosawa
0
100
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
330
Firebaseイベントログの動作確認を効率化する話
takuyaosawa
0
500
iOS18とヘルスケアの睡眠対応
takuyaosawa
0
240
効率アップ! モバイルアプリの開発プロセス における自動化
takuyaosawa
0
180
with_iosで開発をスムーズにするためにやったこと
takuyaosawa
0
80
サーバサイドswift動かして見た
takuyaosawa
0
85
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GitHub's CSS Performance
jonrohan
1031
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Music & Morning Musume
bryan
46
6.6k
Building Adaptive Systems
keathley
43
2.6k
Making Projects Easy
brettharned
116
6.3k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
© asken.inc iOSで スクリーンショットテスト を導入した話 25/05/21 Mobile勉強会 #20 ウォンテッドリー ×
チームラボ × Sansan Takuya Osawa
© asken.inc 2 自己紹介 Takuya Osawa X(@t_osawa_009) 株式会社asken モバイルテックリード 主な仕事
食事管理アプリ「あすけん」のiOS開発を担当 趣味 野球観戦
© asken.inc 3 アジェンダ 導入の背景 スクリーンショットテストとは どうやって導入したか? 効果と現状の課題 まとめ
© asken.inc 4 導入の背景
© asken.inc 5 背景その1 予期せぬ変更により、レイアウト崩れがリリースされてしまう事 例が発生しています ユニットテストは充実してきたものの、レイアウトの崩れなどは ユニットテストだけでは検知しきれない
© asken.inc 6 背景その2 生成AIの活用によりUI開発スピードが加速する 既存改修でも活躍 -> たくさん実装されたものを従来の目視確認頼るのは 限界があり、自動化したい
© asken.inc 7 スクリーンショットテストとは
© asken.inc 8 スクリーンショットテストとは UI のスクリーンショットを取得し、以前に承認された「参照」ま たは「ゴールデン」と呼ばれる画像と比較します。 差分がなければ合格となります https://developer.android.com/training/testing/ui-tests/screenshot?hl=ja
© asken.inc 9 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja Scope = 範囲 Fidelity = 忠実度
Time = 時間 結合 分離
© asken.inc 10 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja コンポーネント テストは、システム内の他のコンポーネントとは別に、モ ジュールやコンポーネントの機能または外観を検証します。単体テストとは 異なり、コンポーネント テストの表領域は、個々のメソッドやクラスより上位 の抽象化にまで広がっています。
例: カスタム ボタンのスクリーンショット テスト コンポーネント テストは
© asken.inc 11 どうやって導入したか?
© asken.inc 12
© asken.inc 13 スクリーンショット生成
© asken.inc 14 スクリーンショットの取得 OSS(swift-snapshot-testingなど)を使わずに UIWindowのrootViewControllerに画面を配置して、 スクリーンショットを取得する実装
© asken.inc 15 スクリーンショットの取得
© asken.inc 16 差分比較とレポート
© asken.inc 17 reg-cliとは HTML出力を備え たビジュアル回帰 テストツール https://github.com/reg-viz/reg-cli
© asken.inc 18 工夫した点
© asken.inc 19 工夫した点その 1 スクロールの画面に対応 スクリーンショット取得用のUIWindowのframeに指定のサイ ズを渡すとスクロール全体の画面が取れる
© asken.inc 20
© asken.inc 21 工夫した点その 2 reg-cilを使ってレポートを出力 Github actionsのアーティファクトにアップし、失敗の原因を絞 りやすくする
© asken.inc 22
© asken.inc 23 工夫した点その 3 非同期で取得する画像はplaceholder画像で差し替える 色や文字を埋め込んだ画像を生成し、識別可能にする
© asken.inc 24 工夫した点その 3
© asken.inc 25 効果と現状の課題
© asken.inc 26 効果その1 意図しないレイアウト変更の早期発見 -> DevelopマージタイミングでCI/CDでチェックしているので変 更に気が付く
© asken.inc 27 効果その2 画面仕様の理解が進む -> 視覚的に理解でき、画面の状態の把握がしやすくなった 設計改善 -> mockの差し替えをするため疎結合な設計になる
© asken.inc 28 課題と対策その 1 不安定なテストが一部あり、失敗の通知が過剰 -> UI実装の見直し
© asken.inc 29 課題と対策その 2 シングルトンの実装があり、Mockの差し替えが不可な画面が ある -> 疎結合な実装への移行
© asken.inc 30 まとめ iOSスクリーンショットテスト導入で、意図しないレイアウト変更 の早期発見や設計改善の効果があった 不安定なテスト、過剰な通知、シングルトン実装に課題がある ため UI実装の見直しと疎結合な実装への移行が必須
© asken.inc 31 Thank you