DMM TVでの自動テスト構築と QA部でのSaaS型の テスト自動化プラットフォームの活用

ソフトウェアテスト自動化カンファレンス2023での登壇資料
https://testautomationresearch.connpass.com/event/299491/

Transcript

1. © DMM © DMM CONFIDENTIAL DMM TVでの自動テスト構築と QA部でのSaaS型の テスト自動化プラットフォームの活用 合同会社 DMM.com テクノロジー本部 QA部
 花上豊幸 福永有真

2. © DMM
3. © DMM
4. © DMM 4 自己紹介 名前：花上 豊幸(はなうえ ひろゆき) 所属：テクノロジー本部 QA部 　　　2020年9月入社 勤務先：六本木本社 (普段は、神奈川自宅でフルリモート ) 【社内】 QA部を横断しての • テスト自動化の推進 • 不具合分析などのデータ分析基盤の構築 を担当しています 約2年程前からDMM TVのSETリーダも担当 【社外】 副業として • QA組織の立ち上げ /改善提案 • テスト自動化の推進 などの業務を請負いをさせて頂いております
5. © DMM 5 自己紹介 名前：福永 有真（ふくなが ゆうしん） 所属：テクノロジー本部 QA部 　　　2016年4月新卒入社（2020年3月〜QA部に参画） 勤務先：金沢事業所（金沢からフルリモート） 2016年4月〜 動画配信開発部 バックエンドエンジニア 2020年3月〜 立ち上げ当初より QA部に参画 　　　　　　→動画配信や電子書籍、オンラインサロンなどの 　　　　　　　サービスに対してテスト自動化を経験 　　　　　　→ 昨年より電子書籍 /オンラインサロンの SETチームのリーダーを担当
6. © DMM DMM TVでの自動テスト構築 （CodeceptJS) 6
7. © DMM 7 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
8. © DMM 8 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
9. © DMM
10. © DMM 10
11. © DMM 11 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
12. © DMM.com 12 DMM TVでのテスト自動化状況(1/2) • 自動テスト環境の構成図
13. © DMM.com 13 DMM TVでのテスト自動化状況(2/2) • 開発環境 (VSCode) ◦ 開発言語：Typescript ◦ eslintなど一般的な拡張機能などを設定
14. © DMM 14 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
15. © DMM.com 15 テスト自動化スコープ(1/4) • 重要機能とリグレッションテストの拡充 ◦ 重要機能 ▪ 購入と再生関連でのテストを自動化 ◦ リグレッションテスト ▪ 自動化可能なリグレッションテスト項目を自動化 ▪ マルチデバイス・ブラウザでのテスト自動化を拡張中 • 下記3つのテストをピックアップしてご紹介 ◦ 作品パターンテスト ◦ 視聴実績 ◦ SPブラウザからのアプリ起動
16. © DMM.com 16 テスト自動化スコープ(2/4) • 作品パターンテスト ◦ 背景 ▪ DMM TVでは17万以上の作品があり, 作品パターンを 網羅した購入・再生のテストのみでも膨大な時間がか かってしまう ◦ 対応内容 ▪ BigQueryの作品データから作品パターンの csvを作成 • 理論値のパターンでは膨大すぎるため, 本番環境に 存在する作品パターンのみを抽出するクエリを作成 ▪ CodeceptJSのData Driven Testsにてcsvのパターン網羅 テストを自動化 • https://codecept.io/advanced/#data-driven-tests BigQuery CSV Data Driven Tests
17. © DMM.com テスト自動化スコープ(3/4) • 視聴実績の検証 ◦ 背景 ▪ DMM TVでは各作品で再生された時間をログとして GoogleCloudに蓄積している ▪ 作品の支払い等にも影響するため , 常に再生時間のロ グが正しく取得できているかを確認する必要がある ◦ 対応内容 ▪ 再生プレイヤーでの様々な操作を自動化 ▪ GoogleCloudのログデータを取得し再生プレイヤーで の操作を含んだ再生時間と比較を行い再生時間が正し く蓄積できているかを確認 倍速 一時停止 スキップ シーク 17
18. © DMM.com 18 テスト自動化スコープ(4/4) • SPブラウザからのアプリ起動 ◦ 背景 ▪ DMM TVのSPブラウザではブラウザ内でのストリーミング 再生の他にアプリを起動して作品を再生する機能がある ▪ そのため, SPブラウザとネイティブアプリを跨いだ確認が必 要となる ◦ 対応内容 ▪ SPブラウザにてアプリ起動までのシナリオを自動化 ▪ アプリの起動後にCodeceptJSのswitchToNative()でネイ ティブアプリの操作を行えるように切り替えを行っている • https://codecept.io/helpers/Appium.html#switchtonative • SPブラウザはSlenium, ネイティブアプリはAppium ベースで動作しているため Selenium Appium
19. © DMM 19 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
20. © DMM.com 20 テスト自動化の改良点(1/3) • ページオブジェクトモデル ◦ https://www.selenium.dev/ja/documentation/test_practices/encouraged/page_object_models/ ◦ openメソッド ページオブジェクト シナリオ 前画面のページオブジェクトの open()を呼ぶ 一行で検証画面までの遷移が記載 できシナリオが読みやすい
21. © DMM.com 21 テスト自動化の改良点(3/3) • Slack通知 • Allureレポート
22. © DMM 22 1. DMMプレミアム/TVの説明 2. DMM TVでのテスト自動化状況 3. テスト自動化スコープ 4. テスト自動化の改良点 5. 今後の展望 目次
23. © DMM.com 23 今後の展望 • テスト自動化の拡張 • 脱オンプレ環境(クラウドモバイル含む) ◦ オンプレのPCをクラウドサーバーに移行 ◦ SP端末はクラウドモバイルへ移行 • 自動テスト以外では負荷試験の領域にチャレンジ ◦ 性能検証の領域へのQA部の活動拡大が目標 ◦ まずはDMM TVでの負荷試験に参画中
24. © DMM QA部でのSaaS型の テスト自動化プラットフォームの活用 24
25. © DMM 25 1. 利用ツールと支援プロダクト 2. SaaS型のテスト自動化プラット フォームの採用理由 3. 導入手順と運用評価 4. 運用結果 5. 向いている・不向きな状況 6. 今後の展望 7. 終わりに 目次
26. © DMM 26 「利用ツール」と 「支援プロダクト」
27. © DMM 27 Autify & Mablを採用/支援している事業 Autify Mabl • ログイン/ログアウト • 新規登録 • ポイント/クーポン など プラットフォーム • 会員制コミュニティサー ビス
28. © DMM 28 テスト実行しているWebブラウザ Autify Mabl • PC Web ◦ Chrome ◦ Safari ◦ Firefox ◦ Edge • SP Web (iOS) ◦ Safari • SP Web (Android) ◦ Chrome • PC Web ◦ Chrome • SP Web (iOS) ◦ Safari • SP Web (Android) ◦ Chrome ※今回のスコープは Webアプリへのテスト自動化のみとなっております
29. © DMM 29 SaaS型のテスト自動化 プラットフォームを 採用した理由
30. © DMM 30 課題 • 自動テストの需要に対して、 自動テストエンジニアが不足していた。 仮説 • SaaS型のプラットフォームを利用することで、コーディングの経験が少な いテストエンジニアが自動テストを構築できるはず！ 採用理由1： 経験が少ないテストエンジニアが自動テストを構築できる
31. © DMM 31 課題 • 頻度は多くないが、 ブラウザを網羅してテストを実施したい。という要望があった。 仮説 • 実機を用意せずにクロスブラウザのテストができる • 環境構築・運用コストを抑えつつスモールスタートできるはず！ 採用理由2：クロスブラウザテストの需要
32. © DMM 32 導入手順と運用評価
33. © DMM QA部の位置付け 各開発部を 横断的に支援
34. © DMM 導入手順 運用評価 運用開始 テスト設計/実装 計画提案 ヒアリング 自動化の目的 導入計画書 成果指標 テストケース 評価報告書 テスト結果 不具合記録 OUTPUT ヒアリング〜運用開始 目安期間：2~3ヶ月程度
35. © DMM 35 運用評価：利益のモニタリング 自動テストが補っている 手動テストのコスト
36. © DMM 36 運用評価：損失のモニタリング 自動テストの保守コスト ＋ 有償ツールのコスト
37. © DMM 37 運用評価：ランニングコストのモニタリング 損失 > 利益に なっていないかを定期的に 確認する
38. © DMM 38 運用結果
39. © DMM 39 【仮説】SaaS型のプラットフォームを利用することで、 　　　　コーディング経験が少ないテストエンジニアが 　　　　自動テストを構築できるはず！ 【結論】経験の少ないテストエンジニアでも 　　　　自動テストの保守ができるようになった 　　　　→構築については、ツールを学習できる環境が必要 仮説に対しての結論
40. © DMM 40 【仮説】環境構築・運用コストを抑えつつスモールスタートできるはず！ 【結論】端末の保守管理にかかるコスト及び労力を軽減できた。 →デバイスファーム連携でのクロスブラウザテスト機能が 　　　　　あるツールは、並列実行はできるが、実行速度が遅い。 仮説に対しての結論
41. © DMM 41 実行回数/ステップ制限 • 自動テストシナリオの選定や設計に時間がかかる • ステップ数や想定実行回数、それらがもたらすコスト価値を計画時に慎重に試算する 必要がある 期待値が詳細なテスト • JSスニペットを書くことになることが多い • テストが複雑化/ステップ数が増加するので、細かすぎるテスト設計をしない ツールの環境によるエラー • クラウド環境/ツール上でのみ失敗するエラーがたまに発生する • 問い合わせを活用しつつ発生条件を模索し、ナレッジ化する 課題と解決策
42. © DMM 42 今後の展望
43. © DMM 43 テスト自動化未経験でも構築できるような学習環境作り • 運用ナレッジを地道に蓄積 • コーディングとSaaS型の適用ガイドラインを提供し、明確な判断を促せる ようにする（チャレンジ中💪） ネイティブアプリへの拡張 • 広範なテストを行えるように、 ネイティブアプリ対応のSaaS型ツールの調査を進める 今後の展望
44. © DMM 44 終わりに
45. © DMM 45 DMMはポリシーとして「DMM Tech Vison」を掲げています まとめ
46. © DMM 46 DMM/QA部として、今後もテクノロジーを使って テスト自動化領域を広げる活動を どんどん継続していきたいと思います！💪 難しいor工夫が必要な領域（専門的スキルを持ったSET） →コーディング 自動化しやすい領域（QAエンジニア） →SaaSのテストプラットフォーム まとめ
47. © DMM 47 SETエンジニア募集中！ 多種多様なサービスを提供するDMMで、 テスト自動化に熱意を持った方を大募集中です！ 宣伝です！！ 採用求人 カジュアル面談
48. © DMM ご静聴ありがとうございました