Pocochaにおける スクリーンショットのレポート活用術 2022年3月17日 外山 純生 (sumio_tym)

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

No content

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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