Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pull request時の画面差分取得の自動化

2,983 views

Published on

Pull Request 時の画面差分チェックを自動化します

Published in: Technology
  • Be the first to comment

Pull request時の画面差分取得の自動化

  1. 1. Copyright © DeNA Co.,Ltd. All Rights Reserved. Pull Request時の 画面差分取得の自動化 iOS Test Night #4 May 262 2017 前田隼輔 SWETグループ DeNA Co., Ltd.
  2. 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. 自己紹介  前田隼輔 (@duck8823) ⁃ 所属 • DeNA SWETグループ テスト基盤チーム ⁃ 経歴 • 2017年3月に DeNA SWETグループ に Join • それまでは SIer でWebアプリ開発 ⁃ 普段の業務 • CI/CD環境整備、ツールの検証 • バージョンアップ自動検証システム(マスティフ)の開発 2
  3. 3. Copyright © DeNA Co.,Ltd. All Rights Reserved. モバイルアプリ開発に画面の変更はつきもの  .storyboardでの変更など 3  位置  色  サイズ
  4. 4. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面に変更があった場合のレビュー・・・  GitHub の diff(.storyboard) 4 画面イメージ が湧かない😓
  5. 5. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面変更時のレビューチェック改善  これまで ⁃ .xib / .storyboard に変更があった場合、 Pull Request の Description に画像が貼ってあるか Dangerでチェック 5
  6. 6. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面変更時のレビューチェック改善  まだある課題点 ⁃ 関係ない画像が貼られていた場合 ⁃ 手動でキャプチャとるのがめんどくさい ⁃ どこが変わったのかわかりにくい • Accessibility Identifier の変更では画面は変わらない • 過去画面はチェックアウトして再ビルドする必要  自動化する ⁃ レビュイーの手間を減らす ⁃ 変更があった画面をわかるようにする ⁃ Pull Request時に確認しやすくする 6
  7. 7. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 7
  8. 8. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 8
  9. 9. Copyright © DeNA Co.,Ltd. All Rights Reserved. スクリーンショットを撮る  fastlane snapshot ⁃ ビルドツール fastlane の snapshot アクション • https://github.com/fastlane/fastlane/tree/master/snapshot ⁃ 各端末 x ローカライズ でスクリーンショットの取得を自動化する ツール ⁃ XCUITest に組み込むことができる 9
  10. 10. Copyright © DeNA Co.,Ltd. All Rights Reserved. fastlane snapshotを使う  snapshotの導入 ⁃ gem install fastlane ⁃ snapshot init ⁃ 生成される SnapshotHelper.swift をテストターゲットに追加  テストコードの設定 ⁃  スクリーンショットの取得 ⁃ (lang)/(device)-name-(md5).png  実行 10 override func setUp() { super.setUp() let app = XCUIApplication() setupSnapshot(app) app.launch() } snapshot("name") gem install fastlane fastlane snapshot init fastlane snapshot
  11. 11. Copyright © DeNA Co.,Ltd. All Rights Reserved. snapshotの結果  snapshotの結果 11 HTML (1枚) コマンドライン
  12. 12. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 12
  13. 13. Copyright © DeNA Co.,Ltd. All Rights Reserved. ImageMagickを使った画像の比較  ImageMagickのインストール ⁃ brew install imagemagick  二つの画像の差分を抽出 ⁃ composite -compose difference 元画像1 元画像2 出力画像 ⁃ identify -format “%[mean]” 出 13 brew install imagemagick composit –compose difference 元画像1 元画像2 比較画像 identify -format “%[mean]” 比較画像 真黒(差なし) の場合 0
  14. 14. Copyright © DeNA Co.,Ltd. All Rights Reserved. PR先との差分をみる  毎回 PR先をチェックアウト & ビルドするのはコストかかる  キャプチャ画像をリポジトリ管理 ⁃ 前回画面を取得する必要がない ⁃ 変更の履歴も管理できる ⁃ GitHubの画像diffが便利 14
  15. 15. Copyright © DeNA Co.,Ltd. All Rights Reserved. 自動化する  fastlane の lane を追加 ⁃ スクリーンショットの取得 • snapshot ⁃ 既存の画像との差分取得 • sh: composit / identify ⁃ 差分があったものはコミット & プッシュ • git_add / git_commit / push_to_git_remote 15
  16. 16. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(2-up) 16
  17. 17. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(Swipe) 17
  18. 18. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(onion skin) 18
  19. 19. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 19
  20. 20. Copyright © DeNA Co.,Ltd. All Rights Reserved. Pull Requestにおける画像差分チェックのフロー  レビュー依頼時、Danger が以下をチェック ⁃ .xib / .storyboard / .strings に変更があった場合 画像差分が commit されているかどうか or PR上で lane が実行されているか確認する  Dangerによる指摘: キャプチャ貼れ lane 実行しろ ⁃ lane の実行は PR上 で phrase をコメントするだけ 20 差分があった場合は自動的に コミットしてくれる
  21. 21. Copyright © DeNA Co.,Ltd. All Rights Reserved. 差分を見る場合に気をつけたいこと  ステータスバー ⁃ 非表示にしておく  ユーザなどの状態 ⁃ テストコードで担保する( スクショ用ユーザ作るなど )  自動スクロールなど ⁃ 目的の要素が表示されるまで wait する  まだある課題 ⁃ アプリのコードと関係なく変わるもの 例. WebView ⁃ アニメーション 21
  22. 22. Copyright © DeNA Co.,Ltd. All Rights Reserved. まとめ  Pull Request時の画面差分確認を楽にする  技術的なこと ⁃ fastlane snapshot ⁃ ImageMagick composite / identify ⁃ Danger  スクリーンショットをリポジトリで管理する ⁃ PR時に差分を確認できる ⁃ 履歴がわかる  今後の課題 ⁃ アニメーションやWebViewの差分チェック ⁃ レビューを手助けするサービスの開発 etc. 22

×