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)
   

   View Slide

2. 自己紹介
   氏名: 外山 純生 (TOYAMA Sumio)
   @sumio_tym (Twitter) / @sumio (GitHub)
   所属: DeNA SWET第二グループ (Software Engineer in Test) /
   Pococha事業部 システム部(兼務)
   業務内容: 主にAndroidにおける
   品質のボトルネック解決
   その他: 「Androidテスト全書」執筆
   https://peaks.cc/sumio_tym/android_testing
   

   View Slide

3. View Slide

4. お話しすること
   ライブコミュニケーションアプリPococha
   自動でスクリーンショットを撮るテスト
   開発者がUIの問題を早期発見するために導入
   ❏ 要望を受けて徐々に進化！
   ❏ その他の課題解決にも使われるように！
   活用事例を紹介していきます
   

   View Slide

5. 当初のスクリーンショットレポート①
   スクリーンショット一覧 (OS固定)
   

   View Slide

6. 当初のスクリーンショットレポート②
   ビジュアルリグレッション
   

   View Slide

7. 当初のスクリーンショットレポート③
   iOS・Androidの比較レポート
   

   View Slide

8. ここから活用事例を紹介していきます
   

   View Slide

9. 活用事例① 仕様との比較
   最近「Figma(*)と実際の画面が違う」という
   バグチケットが多いなあ
   iOS・Androidの比較レポートに
   Figmaの画像も並べて表示しましょう。
   そうすれば、開発フェーズで発見できるはず！
   *Figma: Pocochaで採用しているデザインツール。 https://www.figma.com/
   

   View Slide

10. 活用事例① 仕様との比較
    レポート Figma
    

    View Slide

11. 活用事例① 仕様との比較
    画面ID (ファイル名)
    レポート Figma
    画面ID
    

    View Slide

12. 活用事例① 仕様との比較
    画面IDを手掛りに
    Figma API経由で
    取得
    画面ID (ファイル名)
    レポート Figma
    画面ID
    

    View Slide

13. 活用事例② デザイン更新漏れ総点検
    QAフェーズでテキストのミスが見つかったときに、
    画面デザインの修正が漏れてしまうことが多い・・・。
    デザインの最新化漏れを総点検しよう！
    スクリーンショットが無いものは人力で確認したいので、
    画面名とfigma URLの対応表が欲しい！
    スクリーンショットレポート作成ツールに
    画面名からfigma URLを取得するロジックが
    あるので、対応表をCSVにしてお渡ししましょう！
    

    View Slide

14. 活用事例② デザイン更新漏れ総点検
    画面ID 対応するFigmaのURL
    

    View Slide

15. 活用事例③ 翻訳チェック(作成中)
    翻訳チェックするときに
    目的の画面を表示させる操作が大変！
    翻訳チェックに必要な情報を追加した
    翻訳チェック用スクリーンショットレポート
    を作りましょう！
    

    View Slide

16. 活用事例③ 翻訳チェック(作成中)
    

    View Slide

17. 活用事例③ 翻訳チェック(作成中)
    画面遷移を確認するための
    Figmaへのリンク
    (日英それぞれ)
    

    View Slide

18. 活用事例③ 翻訳チェック(作成中)
    その画面で使われている
    StringリソースID
    画面遷移を確認するための
    Figmaへのリンク
    (日英それぞれ)
    

    View Slide

19. まとめ
    

    View Slide

20. プロダクト開発の過程で遭遇する課題で
    スクリーンショットテストの仕組みを活用した事例を紹介しました。
    ❏ 開発者だけでなく、
    QAやデザイナーの課題解決に使えることも！
    ❏ スクリーンショットテストの運用によって
    課題解決に使える武器が1つ増えた！
    

    View Slide

21. プロダクト開発の過程で遭遇する課題で
    スクリーンショットテストの仕組みを活用した事例を紹介しました。
    ❏ 開発者だけでなく、
    QAやデザイナーの課題解決に使えることも！
    ❏ スクリーンショットテストの運用によって
    課題解決に使える武器が1つ増えた！
    スクリーンショットレポートを活用する際の
    ヒントとして役立てて下されば幸いです
    

    View Slide

22. 参考URL
    ● 田熊希羽「Android スクリーンショットテスト 3つのプロダクトに
    導入する中で倒してきた課題」(DeNA TechCon 2021)
    https://techcon.dena.com/2021/session/16/
    

    View Slide

23. 参考URL
    ● 田熊希羽「Android スクリーンショットテスト 3つのプロダクトに
    導入する中で倒してきた課題」(DeNA TechCon 2021)
    https://techcon.dena.com/2021/session/16/
    ご清聴ありがとうございました！
    

    View Slide