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

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部への参画者募集してます！