Slide 1

Slide 1 text

© asken.inc iOSで スクリーンショットテスト を導入した話 25/05/21 Mobile勉強会 #20 ウォンテッドリー × チームラボ × Sansan Takuya Osawa

Slide 2

Slide 2 text

© asken.inc 2 自己紹介 Takuya Osawa X(@t_osawa_009) 株式会社asken モバイルテックリード 主な仕事 食事管理アプリ「あすけん」のiOS開発を担当 趣味 野球観戦

Slide 3

Slide 3 text

© asken.inc 3 アジェンダ 導入の背景 スクリーンショットテストとは どうやって導入したか? 効果と現状の課題 まとめ

Slide 4

Slide 4 text

© asken.inc 4 導入の背景

Slide 5

Slide 5 text

© asken.inc 5 背景その1 予期せぬ変更により、レイアウト崩れがリリースされてしまう事 例が発生しています ユニットテストは充実してきたものの、レイアウトの崩れなどは ユニットテストだけでは検知しきれない

Slide 6

Slide 6 text

© asken.inc 6 背景その2 生成AIの活用によりUI開発スピードが加速する 既存改修でも活躍 -> たくさん実装されたものを従来の目視確認頼るのは 限界があり、自動化したい

Slide 7

Slide 7 text

© asken.inc 7 スクリーンショットテストとは

Slide 8

Slide 8 text

© asken.inc 8 スクリーンショットテストとは UI のスクリーンショットを取得し、以前に承認された「参照」ま たは「ゴールデン」と呼ばれる画像と比較します。 差分がなければ合格となります https://developer.android.com/training/testing/ui-tests/screenshot?hl=ja

Slide 9

Slide 9 text

© asken.inc 9 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja Scope = 範囲 Fidelity = 忠実度 Time = 時間 結合 分離

Slide 10

Slide 10 text

© asken.inc 10 https://developer.android.com/training/testing/fundamentals/strategies?hl=ja コンポーネント テストは、システム内の他のコンポーネントとは別に、モ ジュールやコンポーネントの機能または外観を検証します。単体テストとは 異なり、コンポーネント テストの表領域は、個々のメソッドやクラスより上位 の抽象化にまで広がっています。 例: カスタム ボタンのスクリーンショット テスト コンポーネント テストは

Slide 11

Slide 11 text

© asken.inc 11 どうやって導入したか?

Slide 12

Slide 12 text

© asken.inc 12

Slide 13

Slide 13 text

© asken.inc 13 スクリーンショット生成

Slide 14

Slide 14 text

© asken.inc 14 スクリーンショットの取得 OSS(swift-snapshot-testingなど)を使わずに UIWindowのrootViewControllerに画面を配置して、 スクリーンショットを取得する実装

Slide 15

Slide 15 text

© asken.inc 15 スクリーンショットの取得

Slide 16

Slide 16 text

© asken.inc 16 差分比較とレポート

Slide 17

Slide 17 text

© asken.inc 17 reg-cliとは HTML出力を備え たビジュアル回帰 テストツール https://github.com/reg-viz/reg-cli

Slide 18

Slide 18 text

© asken.inc 18 工夫した点

Slide 19

Slide 19 text

© asken.inc 19 工夫した点その 1 スクロールの画面に対応 スクリーンショット取得用のUIWindowのframeに指定のサイ ズを渡すとスクロール全体の画面が取れる

Slide 20

Slide 20 text

© asken.inc 20

Slide 21

Slide 21 text

© asken.inc 21 工夫した点その 2 reg-cilを使ってレポートを出力 Github actionsのアーティファクトにアップし、失敗の原因を絞 りやすくする

Slide 22

Slide 22 text

© asken.inc 22

Slide 23

Slide 23 text

© asken.inc 23 工夫した点その 3 非同期で取得する画像はplaceholder画像で差し替える 色や文字を埋め込んだ画像を生成し、識別可能にする

Slide 24

Slide 24 text

© asken.inc 24 工夫した点その 3

Slide 25

Slide 25 text

© asken.inc 25 効果と現状の課題

Slide 26

Slide 26 text

© asken.inc 26 効果その1 意図しないレイアウト変更の早期発見 -> DevelopマージタイミングでCI/CDでチェックしているので変 更に気が付く

Slide 27

Slide 27 text

© asken.inc 27 効果その2 画面仕様の理解が進む -> 視覚的に理解でき、画面の状態の把握がしやすくなった 設計改善 -> mockの差し替えをするため疎結合な設計になる

Slide 28

Slide 28 text

© asken.inc 28 課題と対策その 1 不安定なテストが一部あり、失敗の通知が過剰 -> UI実装の見直し

Slide 29

Slide 29 text

© asken.inc 29 課題と対策その 2 シングルトンの実装があり、Mockの差し替えが不可な画面が ある -> 疎結合な実装への移行

Slide 30

Slide 30 text

© asken.inc 30 まとめ iOSスクリーンショットテスト導入で、意図しないレイアウト変更 の早期発見や設計改善の効果があった 不安定なテスト、過剰な通知、シングルトン実装に課題がある ため UI実装の見直しと疎結合な実装への移行が必須

Slide 31

Slide 31 text

© asken.inc 31 Thank you