DMMアカウントサービス フロントエンド改善支援のためのTestcafeを用いた自動e2eテストの刷新

DMMアカウントサービス フロントエンド改善支援のためのTestcafeを用いた自動e2eテストの刷新

Transcript

1. © DMM.comc DMMアカウントサービス フロントエンド改善支援のための TestCafeを用いた自動E2Eテストの刷新 テクノロジー本部 QA部 大段智広 2021/10/28
2. © DMM.comc 名前：大段 智広(おおだん ともひろ) 所属：テクノロジー本部 QA部 2021年4月入社 場所：六本木(普段は、神奈川自宅でフルリモート) 会社以外では、こんなところで活動しています。 NPO法人 ソフトウェアテスト技術振興協会 ASTER • JSTQB（Japan Software Testing Qualifications Board）技術委員 • 試験問題を作る人 • テスト設計コンテスト実行委員&U-30クラス審査委員 2 自己紹介
3. © DMM.comc QA部内での役割 • プラットフォーム事業本部(PF)を対象とし たQA支援チームのリーダー • 自動E2Eテスト開発、運用 • 要望があれば、スポットのテスト支援 など 3 自己紹介 QA部 動画チーム 電書チーム PFチーム ・・・ PF事業本部の皆さんと一緒に取り組んだ内容を発表させていただいています。 いつもありがとうございます！！ もちろん、QA部チームメンバの皆さんもいつもありがとうございます！！ PFの方と毎日夕会に参加して、 自動E2Eテストの開発、運用をメ インに業務を行っています。 チーム体制:2名～3名
4. © DMM.comc 目次 1. 背景・課題 2. 取り組み概要 3. 開発した自動E2Eテスト 4. 支援結果 5. 今後の取り組み 4
5. © DMM.comc 1. 背景・課題 • DMMアカウントサービス • DMMアカウントサービスのフロントエンド改善 • 刷新前の自動E2Eテスト 5
6. © DMM.comc DMMアカウントサービス 認証認可を担当するアプリケーション 会員登録&退会、アカウント情報管理 6 モバイルブラウザ PCブラウザ 認証メールを送信する 新規登録 メールアドレスで登録 メールアドレス パスワード 他のアカウントで登録 Googleで登録 Twitterで登録 Facebookで登録 × 認証メールを送信する 新規登録 メールアドレスで登録 メールアドレス パスワード 他のアカウントで登録 Googleで登録 Twitterで登録 Facebookで登録
7. © DMM.comc DMMアカウントサービスのフロントエンド改善 目的 • 既存の機能を担保しながら、高速＆安心なＵＩ開発に変えてゆく 課題 • 自動E2Eテストが壊れやすく、メンテナンスもされていない 施策：自動E2Eテスト刷新 • メンテナンスされていないE2Eを保守しやすくするwith QA部 7 参考: 2021/06/18(金) DMM meetup #29 〜DMMのプラットフォーム基盤における認証認可に関する改善〜 DMMアカウントサービスのフロントエンド改善 https://speakerdeck.com/okmttdhr/dmmakauntosabisufalsehurontoendogai-shan
8. © DMM.comc 刷新前の自動E2Eテスト 8 開発メンバ 課題① 壊れやすい & メンテナンス されていないテスト 課題② PCブラウザ環境として Chromeも想定していたが、 Firefoxでの動作確認のみ 日次定期実行 テスト環境 構築 テスト実行環境 Github 開発リポジトリ 開発リポジトリ 成果物利用 (on stg) テスト対象の アプリケーション環境 テスト実行 CircleCI Selenium Slack テスト結果通知
9. © DMM.comc 2. 取り組み概要 • 刷新した自動E2Eテスト • 活動スケジュール • 開発体制 9
10. © DMM.comc 刷新した自動E2Eテスト 10 日次定期実行、onPushトリガー テスト実行環境 Github 開発リポジトリ 成果物利用 テスト実行 CircleCI Github Actions (on stg) テスト対象の アプリケーション環境 Slack OR 開発&QA部メンバ Test Cafe テスト環境 構築 Edge 改善② ・PCブラウザ、モバイルのテストを実行 ・クロスブラウザのテストを実行 改善① ・メンテナンスを考慮したテスト実装方針 ・運用ルール・体制 テスト結果通知
11. © DMM.comc 活動スケジュール 11 2020年 2021年 12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 導入検討 ツール 選定 サンプル 開発 自動E2Eテスト 開発 計画策定 自動E2Eテスト開発 自動E2Eテスト 実装方針・ 運用ルール決め CI連携、クロスブラウザ対応 テストシナリオ 洗い出し 自動E2Eテスト 開発完了 対応期間:2020年12月～2021年9月(約10ケ月) 現在は運用中…
12. © DMM.comc 開発体制 • 2週間スプリントで自動E2Eテストを開発。 • QA部メンバが開発し、開発メンバも含めてレビューを実施。 • 開発完了した自動E2Eテストは、ステージング環境で日次定期実行を実施。 12 テストシナリオA Firefoxをテスト モバイルをテスト テストシナリオB テストシナリオC ・・・ テストシナリオA テストシナリオB CIツールによる 日次定期実行 を確認 2週間スプリント 日次夕会 QA部メンバ 開発メンバ ※開発イメージ スプリントバックログ 自動E2Eテストバックログ 2名～ 3名
13. © DMM.comc 3. 開発した自動E2Eテスト • テスト内容 • 自動E2EテストCIパイプライン • 採用したテストフレームワーク • テストコードの実装方針 13
14. © DMM.comc テスト内容 ユーザーが利用できないと困る、基本的なユーザーシナリオが対象 テストケース構成 下記のテスト環境/テスト対象の組み合わせでテストを実施する。 ブラウザ種別 :Chrome、Firefox、Safari、Edge サイト種別 :DMM、FANZA デバイス種別 :PC、モバイル 14 基本はChromeテストの構成と同じ。 Firefox、Safari、Edgeで実行。 ただし、 より重要なユーザーシナリオのみ実施。
15. © DMM.comc 自動E2EテストCIパイプライン リポジトリへのonPush、日次でCIパイプラインを実行。 15 Chrome SNS Firefox SNS Edge SNS Chrome SNS以外 Firefox SNS以外 Edge SNS以外 Safari SNS以外 Safar SNS CircleCI Github Actions 約60分～70分 1ジョブあたり 約6分～約20分 凡例） PCブラウザのテスト モバイルのテスト
16. © DMM.comc 採用したテストフレームワーク TestCafe ブラウザテストを自動化するためのテストフレームワーク 選定理由：メンテナンスしやすい Webドライバが要らないため、Seleniumなどに比べて環境構築がしやすい。 プロダクトと同じ開発言語(TypeScript)で開発できる。 QA部メンバにプログラミングスキルが求められるが、開発メンバもレビューや開発が しやすい。 コード品質を保つためのツールもテストコードに適用できる。 16 参考：TestCafe https://testcafe.io/
17. © DMM.comc テストコードの実装方針 UI変更時にメンテナンスしやすいテストコードするために、大きく下記の 実装方針を3つ立てました。 17 参考①：ページオブジェクトモデル https://www.selenium.dev/ja/documentation/guidelines/page_object_models/ 参考②：なぜE2Eテストでidを使うべきではないのか https://blog.autify.com/ja/why-id-should-not-be-used ① ページオブジェクトデザインパターンを利用する。 刷新前はテスト手順とロケータがテストケース内で区別されていな かったため、UI変更時のメンテナンスコストが高い状態になってい たことへの対処する。 ② ロケータにはIDなどではなく、「文言」(ログインなど)を利 用する。 UI変更時にすぐにどのUI要素が変わったかわかりやすくする。 ③ 「文言」が利用しにくい場合は、プロダクトにdata属性を 埋め込む。 フロントエンド改善の取り組みで、ページ毎にバラバラになってい る「文言」がいきなり統一されることもある。 そのため、開発メンバと相談しながら検討する。 「文言」がないものもある（表示されるメールアドレス、テキスト、ラベル) テストシナリオ ページオブジェクト Test(‘ログインする’) { ログインページ() .open() .login(loginId,password); isLoggedIn=～ expect(isLoggedIn).ok; } ログインページクラス { loginId: Selector = Selector(‘a’).withText(‘ログイン’); xxxlabel: Selector = Selector(`[data-e2e=«tags»]`); ・・・ public async login(loginId: string, password: string): Promise<void> { await t .typeText(this.loginId, loginId) .typeText(this.password, password) .click(this.loginButton); } } ※イメージ ① ② ③
18. © DMM.comc 4. 取り組み結果 • 得られたこと • 課題として見えてきたこと 18
19. © DMM.comc 得られたこと 自動E2Eテストの開発 開発メンバにUIを仕様確認しながらテストを開発することで、プロダクト 修正のインプットへ。 継続的なテストの実践 自動E2Eテストを回し続けることで、想定外のUI、機能変更を検知し、欠陥 も少しずつ発見している。 同じテストを異なるデバイス、ブラウザ、サイトで実行するだけで も、UI上の外部仕様の違いに気付いたり、埋め込まれた欠陥を見つ けることができる。 19
20. © DMM.comc 課題として見えてきたこと 時間が掛かる/不安定なテストを無くす。 時間が掛かる不安定な原因に一つずつ対処する。 自動E2Eテストシステム(CI,テスト環境)を統一する。 社内で用意できるシステム、環境だけでなく、SaaSを積極的に利用する。 システム全体として保守しやすくする。 テストが失敗したらすぐに調査→修正→テスト合格できる体制 プラットフォーム事業本部の「高速＆安心なＵＩ開発」に貢献する。 これからが本番！！ 20
21. © DMM.comc 5. 今後の取り組み • もっと広範囲にテストして、もっと早く欠陥を見つける 21
22. © DMM.comc もっと広範囲にテストして、もっと早く欠陥を見つける スピード 日次定期ではなく、環境に反映された直後にテストする 1回のテストの高速化(不安定なテストへの対処含む) スコープ デバイス拡張 PC、モバイル→テレビ、ゲーム機なども… 他サービスへの適用 アカウントサービス後のサービスへ(決済サービスなど) 設備 SaaS、デバイス、外部連携(SNS)アカウント テスト結果を見やすく、分析しやすい仕組み 22
23. © DMM.comc ご清聴ありがとうございました。 QA部への参画者募集してます！