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

Pocochaにおけるスクリーンショットテストのレポート活用術【DeNA TechCon 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/

8a84268593355816432ceaf78777d585?s=128

DeNA_Tech
PRO

March 17, 2022
Tweet

More Decks by DeNA_Tech

Other Decks in Technology

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
  3. None
  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/ ご清聴ありがとうございました!