Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

DeNA_Tech
March 17, 2022

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/

DeNA_Tech

March 17, 2022
Tweet

More Decks by DeNA_Tech

Other Decks in Technology

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