SlideShare a Scribd company logo

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

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

1 of 22
Download to read offline
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Pull Request時の
画面差分取得の自動化
iOS Test Night #4
May 262 2017
前田隼輔
SWETグループ
DeNA Co., Ltd.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
 前田隼輔 (@duck8823)
⁃ 所属
• DeNA SWETグループ テスト基盤チーム
⁃ 経歴
• 2017年3月に DeNA SWETグループ に Join
• それまでは SIer でWebアプリ開発
⁃ 普段の業務
• CI/CD環境整備、ツールの検証
• バージョンアップ自動検証システム(マスティフ)の開発
2
Copyright © DeNA Co.,Ltd. All Rights Reserved.
モバイルアプリ開発に画面の変更はつきもの
 .storyboardでの変更など
3
 位置
 色
 サイズ
Copyright © DeNA Co.,Ltd. All Rights Reserved.
画面に変更があった場合のレビュー・・・
 GitHub の diff(.storyboard)
4
画面イメージ
が湧かない😓
Copyright © DeNA Co.,Ltd. All Rights Reserved.
画面変更時のレビューチェック改善
 これまで
⁃ .xib / .storyboard に変更があった場合、
Pull Request の Description に画像が貼ってあるか
Dangerでチェック
5
Copyright © DeNA Co.,Ltd. All Rights Reserved.
画面変更時のレビューチェック改善
 まだある課題点
⁃ 関係ない画像が貼られていた場合
⁃ 手動でキャプチャとるのがめんどくさい
⁃ どこが変わったのかわかりにくい
• Accessibility Identifier の変更では画面は変わらない
• 過去画面はチェックアウトして再ビルドする必要
 自動化する
⁃ レビュイーの手間を減らす
⁃ 変更があった画面をわかるようにする
⁃ Pull Request時に確認しやすくする
6
Ad

Recommended

やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているKoichi Tanaka
 
今日からできる!簡単 .NET 高速化 Tips
今日からできる!簡単 .NET 高速化 Tips今日からできる!簡単 .NET 高速化 Tips
今日からできる!簡単 .NET 高速化 TipsTakaaki Suzuki
 
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」U-dai Yokoyama
 
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメオブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメYoji Kanno
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!mosa siru
 
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組みさくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組みTakeshi Ogawa
 
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきことこれからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと土岐 孝平
 

More Related Content

What's hot

CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するYoshifumi Kawai
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Shinya Okano
 
UniTask入門
UniTask入門UniTask入門
UniTask入門torisoup
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?Moriharu Ohzu
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪Takuto Wada
 
Cocos2d-xを用いた "LINE タワーライジング" の開発事例
Cocos2d-xを用いた "LINE タワーライジング" の開発事例Cocos2d-xを用いた "LINE タワーライジング" の開発事例
Cocos2d-xを用いた "LINE タワーライジング" の開発事例gree_tech
 
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールdcubeio
 
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~UnityTechnologiesJapan002
 
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策Unity Technologies Japan K.K.
 
継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説する継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説するTaishiYamada1
 
今さら聞けないDiとspring
今さら聞けないDiとspring今さら聞けないDiとspring
今さら聞けないDiとspring土岐 孝平
 
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術Unity Technologies Japan K.K.
 
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミングUnity Technologies Japan K.K.
 
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション土岐 孝平
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門Masahito Zembutsu
 
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意イミュータブルデータモデルの極意
イミュータブルデータモデルの極意Yoshitaka Kawashima
 
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]DeNA
 

What's hot (20)

CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
 
UniTask入門
UniTask入門UniTask入門
UniTask入門
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
 
SpringBootTest入門
SpringBootTest入門SpringBootTest入門
SpringBootTest入門
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
 
Cocos2d-xを用いた "LINE タワーライジング" の開発事例
Cocos2d-xを用いた "LINE タワーライジング" の開発事例Cocos2d-xを用いた "LINE タワーライジング" の開発事例
Cocos2d-xを用いた "LINE タワーライジング" の開発事例
 
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
 
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
【Unite Tokyo 2019】SRPで一から描画フローを作ってみた! ~Unity描画フローからの脱却~
 
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策
【Unity道場スペシャル 2017京都】スマホゲーム開発者なら知っておくべきチートのリスク&対策
 
継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説する継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説する
 
今さら聞けないDiとspring
今さら聞けないDiとspring今さら聞けないDiとspring
今さら聞けないDiとspring
 
【Unity道場】使って覚えるTileMap
【Unity道場】使って覚えるTileMap【Unity道場】使って覚えるTileMap
【Unity道場】使って覚えるTileMap
 
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
【Unite 2017 Tokyo】最適化をする前に覚えておきたい技術
 
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
 
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
 
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
 

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

Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らすDangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らすShunsuke Maeda
 
fastlane x iOSアプリのCI
fastlane x iOSアプリのCIfastlane x iOSアプリのCI
fastlane x iOSアプリのCIToshiyuki Hirata
 
iOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進めるiOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進めるShunsuke Maeda
 
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Makoto Haruyama
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方dena_study
 
グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編Mitsuhiro Tanda
 
iOSアプリ開発のCI環境 - Jenkins編 -
iOSアプリ開発のCI環境 - Jenkins編 -iOSアプリ開発のCI環境 - Jenkins編 -
iOSアプリ開発のCI環境 - Jenkins編 -Toshiyuki Hirata
 
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminarVoicepic@FukuiMASeminar
Voicepic@FukuiMASeminarManabu Shimobe
 
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発Satoshi Takano
 
Xcodeの管理を楽に - Jenkins編 -
Xcodeの管理を楽に - Jenkins編 -Xcodeの管理を楽に - Jenkins編 -
Xcodeの管理を楽に - Jenkins編 -Toshiyuki Hirata
 
バージョンアップの対応を軽減するためのサービスの構築
バージョンアップの対応を軽減するためのサービスの構築バージョンアップの対応を軽減するためのサービスの構築
バージョンアップの対応を軽減するためのサービスの構築Toshiyuki Hirata
 
FFRKを支えるWebアプリケーションフレームワークの技術
FFRKを支えるWebアプリケーションフレームワークの技術FFRKを支えるWebアプリケーションフレームワークの技術
FFRKを支えるWebアプリケーションフレームワークの技術dena_study
 
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage PlatformMasaki Nakagawa
 
Developer summit continuous deliveryとjenkins
Developer summit   continuous deliveryとjenkinsDeveloper summit   continuous deliveryとjenkins
Developer summit continuous deliveryとjenkinsKohsuke Kawaguchi
 
iOSアプリにおけるリリースフローとCI環境
iOSアプリにおけるリリースフローとCI環境iOSアプリにおけるリリースフローとCI環境
iOSアプリにおけるリリースフローとCI環境Toshiyuki Hirata
 
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全てOsamu Shimoda
 
Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境Toshiyuki Hirata
 
Effective web performance tuning for smartphone
Effective web performance tuning for smartphoneEffective web performance tuning for smartphone
Effective web performance tuning for smartphonedena_study
 
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)denatech2016
 
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービス
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービスマスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービス
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービスToshiyuki Hirata
 

Similar to Pull request時の画面差分取得の自動化 (20)

Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らすDangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
 
fastlane x iOSアプリのCI
fastlane x iOSアプリのCIfastlane x iOSアプリのCI
fastlane x iOSアプリのCI
 
iOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進めるiOSにおけるコードレビューを一歩先へ進める
iOSにおけるコードレビューを一歩先へ進める
 
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
 
グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編
 
iOSアプリ開発のCI環境 - Jenkins編 -
iOSアプリ開発のCI環境 - Jenkins編 -iOSアプリ開発のCI環境 - Jenkins編 -
iOSアプリ開発のCI環境 - Jenkins編 -
 
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminarVoicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
 
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
 
Xcodeの管理を楽に - Jenkins編 -
Xcodeの管理を楽に - Jenkins編 -Xcodeの管理を楽に - Jenkins編 -
Xcodeの管理を楽に - Jenkins編 -
 
バージョンアップの対応を軽減するためのサービスの構築
バージョンアップの対応を軽減するためのサービスの構築バージョンアップの対応を軽減するためのサービスの構築
バージョンアップの対応を軽減するためのサービスの構築
 
FFRKを支えるWebアプリケーションフレームワークの技術
FFRKを支えるWebアプリケーションフレームワークの技術FFRKを支えるWebアプリケーションフレームワークの技術
FFRKを支えるWebアプリケーションフレームワークの技術
 
2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform2014-04-22 Ques #4 Automation Testing of Mobage Platform
2014-04-22 Ques #4 Automation Testing of Mobage Platform
 
Developer summit continuous deliveryとjenkins
Developer summit   continuous deliveryとjenkinsDeveloper summit   continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
 
iOSアプリにおけるリリースフローとCI環境
iOSアプリにおけるリリースフローとCI環境iOSアプリにおけるリリースフローとCI環境
iOSアプリにおけるリリースフローとCI環境
 
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
 
Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境Androidアプリ開発のテスト環境
Androidアプリ開発のテスト環境
 
Effective web performance tuning for smartphone
Effective web performance tuning for smartphoneEffective web performance tuning for smartphone
Effective web performance tuning for smartphone
 
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)
 
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービス
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービスマスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービス
マスティフ (for Xcode beta) - バージョンアップ対応を軽減するためのサービス
 

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

  • 1. Copyright © DeNA Co.,Ltd. All Rights Reserved. Pull Request時の 画面差分取得の自動化 iOS Test Night #4 May 262 2017 前田隼輔 SWETグループ DeNA Co., Ltd.
  • 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. 自己紹介  前田隼輔 (@duck8823) ⁃ 所属 • DeNA SWETグループ テスト基盤チーム ⁃ 経歴 • 2017年3月に DeNA SWETグループ に Join • それまでは SIer でWebアプリ開発 ⁃ 普段の業務 • CI/CD環境整備、ツールの検証 • バージョンアップ自動検証システム(マスティフ)の開発 2
  • 3. Copyright © DeNA Co.,Ltd. All Rights Reserved. モバイルアプリ開発に画面の変更はつきもの  .storyboardでの変更など 3  位置  色  サイズ
  • 4. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面に変更があった場合のレビュー・・・  GitHub の diff(.storyboard) 4 画面イメージ が湧かない😓
  • 5. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面変更時のレビューチェック改善  これまで ⁃ .xib / .storyboard に変更があった場合、 Pull Request の Description に画像が貼ってあるか Dangerでチェック 5
  • 6. Copyright © DeNA Co.,Ltd. All Rights Reserved. 画面変更時のレビューチェック改善  まだある課題点 ⁃ 関係ない画像が貼られていた場合 ⁃ 手動でキャプチャとるのがめんどくさい ⁃ どこが変わったのかわかりにくい • Accessibility Identifier の変更では画面は変わらない • 過去画面はチェックアウトして再ビルドする必要  自動化する ⁃ レビュイーの手間を減らす ⁃ 変更があった画面をわかるようにする ⁃ Pull Request時に確認しやすくする 6
  • 7. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 7
  • 8. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 8
  • 9. Copyright © DeNA Co.,Ltd. All Rights Reserved. スクリーンショットを撮る  fastlane snapshot ⁃ ビルドツール fastlane の snapshot アクション • https://github.com/fastlane/fastlane/tree/master/snapshot ⁃ 各端末 x ローカライズ でスクリーンショットの取得を自動化する ツール ⁃ XCUITest に組み込むことができる 9
  • 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. Copyright © DeNA Co.,Ltd. All Rights Reserved. snapshotの結果  snapshotの結果 11 HTML (1枚) コマンドライン
  • 12. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 12
  • 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. Copyright © DeNA Co.,Ltd. All Rights Reserved. PR先との差分をみる  毎回 PR先をチェックアウト & ビルドするのはコストかかる  キャプチャ画像をリポジトリ管理 ⁃ 前回画面を取得する必要がない ⁃ 変更の履歴も管理できる ⁃ GitHubの画像diffが便利 14
  • 15. Copyright © DeNA Co.,Ltd. All Rights Reserved. 自動化する  fastlane の lane を追加 ⁃ スクリーンショットの取得 • snapshot ⁃ 既存の画像との差分取得 • sh: composit / identify ⁃ 差分があったものはコミット & プッシュ • git_add / git_commit / push_to_git_remote 15
  • 16. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(2-up) 16
  • 17. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(Swipe) 17
  • 18. Copyright © DeNA Co.,Ltd. All Rights Reserved. GitHub Pull Request上で確認できる  レビュー時に差分を確認しやすい(onion skin) 18
  • 19. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今回やったこと  スクリーンショットを撮る  スクリーンショットの差分を見る  CIへの導入 19
  • 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. Copyright © DeNA Co.,Ltd. All Rights Reserved. 差分を見る場合に気をつけたいこと  ステータスバー ⁃ 非表示にしておく  ユーザなどの状態 ⁃ テストコードで担保する( スクショ用ユーザ作るなど )  自動スクロールなど ⁃ 目的の要素が表示されるまで wait する  まだある課題 ⁃ アプリのコードと関係なく変わるもの 例. WebView ⁃ アニメーション 21
  • 22. Copyright © DeNA Co.,Ltd. All Rights Reserved. まとめ  Pull Request時の画面差分確認を楽にする  技術的なこと ⁃ fastlane snapshot ⁃ ImageMagick composite / identify ⁃ Danger  スクリーンショットをリポジトリで管理する ⁃ PR時に差分を確認できる ⁃ 履歴がわかる  今後の課題 ⁃ アニメーションやWebViewの差分チェック ⁃ レビューを手助けするサービスの開発 etc. 22

Editor's Notes

  1. SWET: Software Engineer in Test ソフトウェアテストを起点とした 1. 社内サービス全般の品質向上 2. 社内Aエンジニアの開発生産性向上 により、価値あるものを素早く提供できるようにする
  2. Xcodeで編集する
  3. Pull Request時
  4. Danger -> PRをチェックできるようにするツール
  5. 自動化する