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
290
なぜ、あすけんiOSでテスト戦略を導入したのか?
takuyaosawa
0
160
技術選定 askenでの取り組み Kotlin Multiplatform編
takuyaosawa
0
110
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
360
Firebaseイベントログの動作確認を効率化する話
takuyaosawa
0
520
iOS18とヘルスケアの睡眠対応
takuyaosawa
0
260
効率アップ! モバイルアプリの開発プロセス における自動化
takuyaosawa
0
190
with_iosで開発をスムーズにするためにやったこと
takuyaosawa
0
83
サーバサイドswift動かして見た
takuyaosawa
0
87
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Raft: Consensus for Rubyists
vanstee
140
7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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