Playwrightで実現する品質保証の好循環な仕組み
13.2K Views
March 13, 25
スライド概要
2025年3月13日(木)に実施された、ファインディ株式会社主催の「E2Eテスト自動化の事例4選 ~Playwright活用編~」で発表したLT資料です。
関連スライド
各ページのテキスト
Playwrightで実現する 品質保証の好循環な仕組み 木下 智弘 - Tomohiro Kinoshita ウェルスナビ株式会社 1
自己紹介 木下 智弘 (Tomohiro Kinoshita) ウェルスナビ株式会社 QAチーム / SETエンジニア 経歴/ウェルスナビでの業務 ● 2D/3Dコンテンツ制作会社で情シス担当 ● WNではQAチームで品質保証に関係する領域を担当 2 @2025 WealthNavi Inc.
資産運用ロボアドバイザー 「 WealthNavi 」 3 ※ ⼀般社団法⼈⽇本投資顧問業協会「契約資産状況（最新版）（2024年9⽉末現在） 『ラップ業務』『投資⼀任業』」を基にネット専業業者を⽐較 ウエルスアドバイザー 社調べ（2024年12⽉時点） ※ 画⾯はイメージです。
アジェンダ 1. QAチームが考える品質保証と課題 2. テストの自動化に求めるもの 3. Playwright採用による成果と今後 4 @2025 WealthNavi Inc.
1. QAチームが考える品質保証と課題 2. テストの自動化に求めるもの 3. Playwright採用による成果と今後 5 @2025 WealthNavi Inc.
開発段階に応じた、テストレベルとE2Eの対象を確認 ● E2Eテストは、システムテストが対象と定義されている 受け入れ テスト 要求定義 システム テスト ** 要件定義 基本設計 統合テスト* コンポーネ ントテスト 詳細設計 プロダクト全体の振る舞いや能力に焦点 - end-to-endのタスクに対する機能テスト - 品質特性に対する非機能テスト * ISTQBにおける、コンポーネント統合テストを指す ** ISTQBにおける、システム統合テストを含む 実装 引用：ISTQBテスト技術者資格制度 Foundation Level シラバス v4 by JSTQB ユーザのための要件定義ガイド 第2版 by IPA 6 @2025 WealthNavi Inc.
テストレベルに応じた、ソフトウェアテストの有用な配置 ● ソフトウェアテストは、テストピラミッド型からトロフィー型へ テストケース数：少ない 工数：多い 速度：遅い 再現度：高い 安定性：低い End to end testing End to end testing Integration testing Integration testing 工数：少ない 速度：速い 再現度：低い 安定性：高い Component testing Static testing Component testing テストケース数：多い 引用：ISTQBテスト技術者資格制度 Foundation Level シラバス v4 by JSTQB Succeeding with Agile by Mike Cohn Testing Torophy by Kent C. Dodds 7 @2025 WealthNavi Inc.
トロフィー型テストモデルをもとに、QAチームが注力するテスト ● 統合テストでは、案件毎にケースを作成し、すべてのテストを確認 ● システムテストでは、機能テストと案件に応じて非機能テストを確認 テストタイプ 機能テスト End to end testing Integration testing Component testing Static testing テ ス ト レ ベ ル 静的テスト/ コンポーネン トテスト 非機能テスト ホワイトボックス テスト ブラックボックス テスト (開発者に依拠) 統合テスト ✅常に実施 ⚠案件に応じて実 施 システム テスト ✅常に実施 ⚠案件に応じて実 施 受け入れ テスト ⚠案件に応じて実 施 8 ⚠案件に応じて実 施 ✅常に実施 @2025 WealthNavi Inc.
テスト自動化を目指した背景 ● 会社が成長し組織が大きくなることで、品質保証に割く体力に限界が発生 ● QAチームが品質保証できる体制・仕組み作りが求められる状況に差し迫る 案件数 が増加 品質保証が 難しい局面に QAチーム：5名 QAチーム以外のエンジニア：62名 公開 周期が 短縮 人員が 不足 9 ※ E2Eテストツール検討開始 2024年3月1日時点 @2025 WealthNavi Inc.
1. QAチームが考える品質保証と課題 2. テストの自動化に求めるもの 3. Playwright採用による成果と今後 10 @2025 WealthNavi Inc.
テストの自動化を考えるにあたり、最も重要な要素とは？ 11 @2025 WealthNavi Inc.
継続して使い続けられること 12 @2025 WealthNavi Inc.
継続利用のためには ● テストツールの導入や保守運用にかかるコストを超える利益を受けられる 仕組みであること ✏ テストケースを 作る・修正する ツールの有用性を 認識する 😊 テストを 実行する 不具合を 発見できる 13 @2025 WealthNavi Inc.
自動化したテストを継続して使い続けるための条件 ❤ テスト結果に信頼性がある ➡ 偽陽性、偽陰性が発生しない仕組み 💨 迅速にテストを実行できる ➡ 繰り返し何度も実行できる、また並行して実行できる仕組み 📱 テスト結果を誰もが分かりやすく閲覧できる ➡ テスト結果を集計して視認性高く表示できる仕組み ✏ ケースの改修を誰もが容易に行える ➡ GUIでケースを編集できる、または平易な言語で記述できる仕組み 💥 テストツールの仕様改定に対して、臨機応変に対応できる ➡ 仕様が公開されているツール 14 @2025 WealthNavi Inc.
条件に見合った、テストツールに必要な機能や要素 ❤ テスト結果に信頼性がある ➡ 自動待機機能 (flakyさを防ぐ) 💨 迅速にテストを実行できる ➡ ヘッドレス機能 (実行速度に影響) 📱 テスト結果を誰もが分かりやすく閲覧できる ➡ レポーティング機能 ✏ ケースの改修を誰もが容易に行える ➡ よく利用されるプログラミング言語 (1. Python, 2. Java, 3. JavaScript, 4. C++, 5. TypeScript) 💥 テストツールの仕様改定に対して、臨機応変に対応できる ➡ OSS 引用：The Top Programming Languages 2024 by IEEE Spectrum 15 @2025 WealthNavi Inc.
E2Eのテストツールを比較検証する ● Playwrightが、私たちの要求にあったテストツールでした ツール 開発言語 OSS ⭕ Python, Java, JavaScript, TypeScript etc. ⭕ ⭕ ❌ JavaScript ⭕ ❌ ⭕ ❌ Python, Java, JavaScript, TypeScript etc. ⭕ Cypress ❌ ⭕ ❌ JavaScript ⭕ Magic Pod ❌ ❌ ⭕ - ❌ Autify for Web ❌ ❌ ⭕ - ❌ Playwright Puppeteer Selenium 自動待機機能 ヘッドレス機能 レポーティング機能 ⭕ ⭕ ❌ 注) 機能として、標準で付属するかで判断しています 16 @2025 WealthNavi Inc.
しかし、QAチームだけが利用できる仕組みでは、不十分 ● 他チームが、テストシナリオの作成・運用・保守ができる環境が望ましい 17 @2025 WealthNavi Inc.
他チームがE2Eテスト環境を利用するために、Playwrightに足りないもの 💨 迅速にテストを実行できる ➡ シナリオ単位ではなく、プロダクト単位での並列実行の仕組み 📱 テスト結果を誰もが分かりやすく閲覧できる ➡ ローカル環境ではなく、クラウド環境で結果を閲覧できる環境 ✏ ケースの改修を誰もが容易に行える ➡ ケース修正後に、CIでテスト環境にデプロイできる仕組み 18 @2025 WealthNavi Inc.
Playwrightに足りないものを補うために 💨 迅速にテストを実行できる ➡ AWSのECSに、Playwrightを内包するイメージをタスク定義に用意 📱 テスト結果を誰もが分かりやすく閲覧できる ➡ AWSのS3に、レポートファイルをアップロードできるバケットを用意 ✏ ケースの改修を誰もが容易に行える ➡ gitリポジトリに、テスト環境へデプロイできるパイプラインを用意 19 @2025 WealthNavi Inc.
AWS構成図 ● AWS上に、Playwrightの実行基盤を構築した Bitbucket pipelines AWS Cloud Private Subnet イメージをプッシュ テストに 必要な情 報を抽出 AWS Secrets Manager Amazon Aurora Netskope Users Amazon ECR イメージを参照 DB認証情報を参照 ① 実施したいテスト シナリオを選択 Amazon WAF Amazon App Runner ② ECSのRun TaskでTaskを複数 生成し、Playwrightを並列実行 イメージを参照 Playwright Amazon ECS Task ③ Webサイ トをテスト ⑤ テスト結果を通知 ④ テスト結果 (html, webm, jpg) を保存 ⑥ テスト結果を確認 Amazon ECS Amazon S3 20 @2025 WealthNavi Inc.
1. QAチームが考える品質保証と課題 2. テストの自動化に求めるもの 3. Playwright採用による成果と今後 21 @2025 WealthNavi Inc.
テストの自動化を実現した「テストレベル」✕「テストタイプ」 ● 「システムテスト」✕「機能テスト」の「ユースケーステスト」で、 リグレッションテストのE2Eテスト自動化を達成 テストタイプ 機能テスト テ ス ト レ ベ ル 非機能テスト 静的テスト/ コンポーネントテスト ホワイトボックステスト ブラックボックステスト (開発者に依拠) 統合テスト 手動 手動 システムテスト 🎉自動化を達成 手動 受け入れテスト 手動 手動 22 手動 @2025 WealthNavi Inc.
2025年2月時点でのPlaywrightによる実績 ● QAチームが主管しているプロダクト以外においても、 テストシナリオの作成が行われ、品質保証の一環として運用されている チーム プロダクト スプリント実績数 シナリオ総数 テスト成功率 QAチーム ロボアド 12 842 99.17% αチーム 保険 2 5 100% βチーム 金融教育 9 44 97.72% γチーム CRM 1 1 100% 23 @2025 WealthNavi Inc.
Playwright導入によって得られたもの ● QAチームで、安定して品質保証が行える仕組みを構築できた ● 他チームでも、継続的にPlaywrightを活用できている ✏ テストケースを 作る・修正する 案件増 に対応 ツールの有用性を 認識する 課題を解決 公開の 短周期 に対応 人員 不足に 対応 😊 テストを 実行する 不具合を 発見できる 24 @2025 WealthNavi Inc.
Playwrightによるテスト自動化における、今後の展開 ● 同じテストレベルで数を増やし、またE2Eテストに限定されない、 異なるテストタイプへと幅を広げ、より上の水準で品質保証を担保していく テストタイプ 機能テスト テ ス ト レ ベ ル 非機能テスト ホワイトボックステスト ブラックボックステスト 静的テスト/ コンポーネントテスト ⌛同値分割法 💫境界値分析 ⌛デシジョンテーブル テスト 統合テスト 💫状態遷移テスト 組み合わせテスト システムテスト ✅リグレッションテスト 追加予定の テスト ⌛ビジュアルテスト 受け入れテスト 25 [凡例] ✅：対応完了 ：対応中 ⌛：検討中 💫：要検討 @2025 WealthNavi Inc.
ご清聴ありがとうございました 26 @2025 WealthNavi Inc.
【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを目的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様自身で判断するものと し、当社はこれに一切関与せず、また、一切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を一切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は一切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新又は訂正する義務を負いません。 ● 本資料を利用することによりお客様に生じた直接的損害、間接的損害、派生的損害その他いかなる 損害についても、当社は一切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 27 @2025 WealthNavi Inc.
Appendix 1 定期的にWealthNaviの開発（技術・組織）に関する情報を発信しています。 開発者ブログ ● 技術広報に関する お問い合わせ先 ● https://zenn.dev/p/wn_engineering ブックマーク追加や記事への「いいね」していただけると嬉しいです ウェルスナビ 技術広報チーム（dev_pr@wealthnavi.com） 28 @2025 WealthNavi Inc.
Appendix 2 ウェルスナビでは複数の開発系ポジションで採用を強化しています。 主な採用中職種 ● ● ● ● ● QAエンジニア SETエンジニア モバイル開発エンジニア エンジニアリングマネージャー バックエンド開発エンジニア 採用情報詳細 ● 下記URL（QRコード）よりご確認ください。 https://recruit.wealthnavi.com/ ● ● 「カジュアルに話を聞いてみたい」という温度感でも構いません。 ウェルスナビ採用チーム（recruiting@wealthnavi.com）までご連 絡お待ちしております。 採用に関する お問い合わせ先 29 @2025 WealthNavi Inc.