Pocochaにおけるスクリーンショットテストのレポート活用術【DeNA TechCon 2022】

Lightning Talks vol.2

資料内でのリンク集：
p2, https://peaks.cc/books/android_testing
p10, https://www.figma.com/
p23,p24, https://techcon.dena.com/2021/session/16/

◆ You Tube
https://youtu.be/9heaFqbWP94

◆ You Tube チャンネル登録はこちら↓
https://youtube.com/c/denatech?sub_confirmation=1

◆ Twitter
https://twitter.com/DeNAxTech

◆ DeNA Engineering
https://engineering.dena.com/

◆ DeNA Engineer Blog
https://engineering.dena.com/blog/

◆ DeNA TechCon 2022 公式サイト
https://techcon2022.dena.dev/spring/

Transcript

1. Pocochaにおける スクリーンショットのレポート活用術 2022年3月17日 外山 純生 (sumio_tym)
2. 自己紹介 氏名: 外山 純生 (TOYAMA Sumio) @sumio_tym (Twitter) / @sumio (GitHub) 所属: DeNA SWET第二グループ (Software Engineer in Test) / Pococha事業部 システム部(兼務) 業務内容: 主にAndroidにおける 品質のボトルネック解決 その他: 「Androidテスト全書」執筆 https://peaks.cc/sumio_tym/android_testing
4. お話しすること ライブコミュニケーションアプリPococha 自動でスクリーンショットを撮るテスト 開発者がUIの問題を早期発見するために導入 ❏ 要望を受けて徐々に進化！ ❏ その他の課題解決にも使われるように！ 活用事例を紹介していきます
5. 当初のスクリーンショットレポート① スクリーンショット一覧 (OS固定)
6. 当初のスクリーンショットレポート② ビジュアルリグレッション
7. 当初のスクリーンショットレポート③ iOS・Androidの比較レポート
8. ここから活用事例を紹介していきます
9. 活用事例① 仕様との比較 最近「Figma(*)と実際の画面が違う」という バグチケットが多いなあ iOS・Androidの比較レポートに Figmaの画像も並べて表示しましょう。 そうすれば、開発フェーズで発見できるはず！ *Figma: Pocochaで採用しているデザインツール。 https://www.figma.com/
10. 活用事例① 仕様との比較 レポート Figma
11. 活用事例① 仕様との比較 画面ID (ファイル名) レポート Figma 画面ID
12. 活用事例① 仕様との比較 画面IDを手掛りに Figma API経由で 取得 画面ID (ファイル名) レポート Figma 画面ID
13. 活用事例② デザイン更新漏れ総点検 QAフェーズでテキストのミスが見つかったときに、 画面デザインの修正が漏れてしまうことが多い・・・。 デザインの最新化漏れを総点検しよう！ スクリーンショットが無いものは人力で確認したいので、 画面名とfigma URLの対応表が欲しい！ スクリーンショットレポート作成ツールに 画面名からfigma URLを取得するロジックが あるので、対応表をCSVにしてお渡ししましょう！
14. 活用事例② デザイン更新漏れ総点検 画面ID 対応するFigmaのURL
15. 活用事例③ 翻訳チェック(作成中) 翻訳チェックするときに 目的の画面を表示させる操作が大変！ 翻訳チェックに必要な情報を追加した 翻訳チェック用スクリーンショットレポート を作りましょう！
16. 活用事例③ 翻訳チェック(作成中)
17. 活用事例③ 翻訳チェック(作成中) 画面遷移を確認するための Figmaへのリンク (日英それぞれ)
18. 活用事例③ 翻訳チェック(作成中) その画面で使われている StringリソースID 画面遷移を確認するための Figmaへのリンク (日英それぞれ)
19. まとめ
20. プロダクト開発の過程で遭遇する課題で スクリーンショットテストの仕組みを活用した事例を紹介しました。 ❏ 開発者だけでなく、 QAやデザイナーの課題解決に使えることも！ ❏ スクリーンショットテストの運用によって 課題解決に使える武器が1つ増えた！
21. プロダクト開発の過程で遭遇する課題で スクリーンショットテストの仕組みを活用した事例を紹介しました。 ❏ 開発者だけでなく、 QAやデザイナーの課題解決に使えることも！ ❏ スクリーンショットテストの運用によって 課題解決に使える武器が1つ増えた！ スクリーンショットレポートを活用する際の ヒントとして役立てて下されば幸いです
22. 参考URL • 田熊希羽「Android スクリーンショットテスト 3つのプロダクトに 導入する中で倒してきた課題」(DeNA TechCon 2021) https://techcon.dena.com/2021/session/16/
23. 参考URL • 田熊希羽「Android スクリーンショットテスト 3つのプロダクトに 導入する中で倒してきた課題」(DeNA TechCon 2021) https://techcon.dena.com/2021/session/16/ ご清聴ありがとうございました！