E2Eテストの“sustainable”運用を目指して- 環境整備、ケース作成、人材育成の観点から -

E2Eテストの“sustainable”運⽤を⽬指して - 環境整備、ケース作成、⼈材育成の観点から - ⽊下 智弘 - Tomohiro Kinoshita ウェルスナビ株式会社 1

⾃⼰紹介 木下 智弘 (Tomohiro Kinoshita) ウェルスナビ株式会社 QAチーム / SET エンジニア 経歴/ウェルスナビでの業務 ● 2D/3Dコンテンツ制作会社で情シス担当 ● WNではQAチームで品質保証や⾃動化に関係する領域を担当 2 @2025 WealthNavi Inc.

資産運⽤ロボアドバイザー 「 WealthNavi 」 3 ※ ⼀般社団法⼈⽇本投資顧問業協会「契約資産状況（最新版）（2025年3⽉末現在） 『ラップ業務』『投資⼀任業』」を基にネット専業業者を⽐較 ウエルスアドバイザー 社調べ（2025年6⽉時点） ※ 画⾯はイメージです。

アジェンダ 1. テスト⾃動化への歩み 2. E2Eテスト定着に向けた取り組み 3. 得られた成果 4 @2025 WealthNavi Inc.

1. テスト⾃動化への歩み 2. E2Eテスト定着に向けた取り組み 3. 得られた成果 5 @2025 WealthNavi Inc.

ウェルスナビでのE2Eテスト⾃動化の歴史 2019/01~2019/06 2021/08~2022/03 2024/03~2024/10 Seleniumを導⼊ 有償テスト⾃動化 ツールを導⼊ Playwrightを導⼊ 成功...? 成功!!! 頓挫 限界 到来 6 @2025 WealthNavi Inc.

Selenium導⼊で頓挫した原因について振り返り 2019/01~2019/06 2021/08~2022/03 2024/03~2024/10 Seleniumを導⼊ 有償テスト⾃動化 ツールを導⼊ Playwrightを導⼊ 成功...? 成功!!! 頓挫 限界 到来 7 @2025 WealthNavi Inc.

Selenium導⼊時の問題点その1 🤥 テストの信頼性がなく、利⽤されない 🔴 偽陽性 ➡ 脆いテスト (fragile test) 画⾯の要素を特定する際には、CSSセレクタやXPathを指定する 結果、画⾯改修でDOM構造に変更が⼊ると、テストケースが壊れテスト実⾏で失敗する ➡ 信頼不能テスト (flaky test) WebDriver APIでブラウザ操作を⾏うので、ブラウザの内部状態を捕捉できない 結果、画⾯要素を操作できない状態を把握できず、ブラウザ操作を⾏いテスト実⾏が失敗する 🟣 偽陰性 ➡ カバレッジ不⾜ 偽陽性の対応に追われることで、未作成や新規案件のテストケース作成の⼯数を確保できない 結果、テストケースが増えず、カバレッジが不⾜する 参照: 信頼不能なテストは「テスト失敗に対する鈍感さ」を生む 信頼性を損なわないために大切な 8 “偽陽性”と“偽陰性”を減らすこと by 和田卓人 on ログミー business @2025 WealthNavi Inc.

• https://logmi.jp/main/technology/329183

Selenium導⼊時の問題点その2 󰳕 テストツールと実⾏環境を利⽤できる⼈が少ない 🔨 開発⼈員の不⾜ ➡ QA領域でのエンジニア不⾜ 開発⾔語とDOMを理解できるエンジニアが必要だが、プロダクト開発に優先される 結果、プログラミング未経験者や初級者の育成を⾏い、⼈員確保を⾏う必要がある 🖥 実⾏環境の⽋如 ➡ ローカル環境のみの実⾏環境 テストケースはgitリポジトリで管理されるが、実⾏環境は開発者のローカル環境のみである 結果、Selenium開発者以外がテスト実⾏を⾏うためには、環境準備の⼿間が必要となる 9 @2025 WealthNavi Inc.

有償テスト⾃動化ツール導⼊で成功した理由について振り返り 2019/01~2019/06 2021/08~2022/03 2024/03~2024/10 Seleniumを導⼊ 有償テスト⾃動化 ツールを導⼊ Playwrightを導⼊ 成功...? 成功!!! 頓挫 限界 到来 10 @2025 WealthNavi Inc.

有償テスト⾃動化ツール導⼊時の優等点その1 🤓 テストの信頼性が⼀定あり、テストとして有効利⽤できた 🔴 偽陽性への解決 ➡ 脆いテスト (fragile test) の減少 画⾯の要素を特定する際には、XPathに加えて、画像認識の⼿段があった 結果、画像認識を利⽤することで、DOMに変更があった場合でもテスト実⾏に成功していた 🟣 偽陰性への解決 ➡ カバレッジの拡充 偽陽性が減少し、未作成のテストケースや新規案件のテストケース作成の対応⼯数が増加した 結果、テストケースが増加し、カバレッジが⼤きく拡充した 11 @2025 WealthNavi Inc.

有償テスト⾃動化ツール導⼊時の優等点その2 󰳕 テストツールを利⽤できる⼈が増えた 🔨 開発⼈員不⾜への解決 ➡ QA領域でのエンジニアが不要 テスト対象のWebサイトをブラウザ操作することによって、テストケースが作成された 結果、開発が未経験でもテストケース作成や修正が⾏えた 🖥 実⾏環境⽋如への解決 ➡ クラウド環境で完結 テストツールがWebサービスとして提供されていたため、ツールの準備や設定が不要となった 結果、Webサービスのアカウントを⽤意すれば、即座に利⽤できた 12 @2025 WealthNavi Inc.

有償テスト⾃動化ツールで限界を迎えた理由について振り返り 2019/01~2019/06 2021/08~2022/03 2024/03~2024/10 Seleniumを導⼊ 有償テスト⾃動化 ツールを導⼊ Playwrightを導⼊ 成功...? 成功!!! 頓挫 限界 到来 13 @2025 WealthNavi Inc.

有償テスト⾃動化ツール利⽤時の問題点その1 🤥 テストの信頼性が完璧でない 🔴 偽陽性 ➡ 信頼不能テスト (flaky test) テストツールが、ブラウザレンダリング完了時間を把握できないため、時間指定で待機が必要 結果、レンダリングに時間がかかり、待機時間を超えると、テスト実⾏が失敗する 🟣 偽陰性 ➡ 空振り 複数並⾛する開発案件に対して、実⾏したいテストケースを振り分け指定する⼿段がない 結果、本来実⾏すべきテストケースの漏れが発⽣する 14 @2025 WealthNavi Inc.

有償テスト⾃動化ツール利⽤時の問題点その2 🔒 ベンダーロックインの影響 🪚 サービス仕様の変更 ➡ 仕様変更への対応 サービスの仕様変更内容によっては、テストケースやインフラ環境に影響が発⽣する 結果、テストケースの修正やインフラ環境の調整が追加で必要となる 💸 予算の調整 ➡ 従量課⾦ サービス利⽤料に応じて、テストケース数やテスト実⾏回数が変動する 結果、プロダクトの数の増加が⾒込まれる場合、契約時に、予算を予め上積みが必要となる ➡ 契約更改 契約更改時に、サービス利⽤料の計算⽅式が変更となる場合がある 結果、前契約時と⼤きく⾦額が変更となった場合に、改めて社内で予算申請が必要となる 15 @2025 WealthNavi Inc.

これまでの経験を通して得られた教訓とは？ 16 @2025 WealthNavi Inc.

永続的に定着できるテスト⾃動化の仕組みを 考える必要がある！ 17 @2025 WealthNavi Inc.

1. テスト⾃動化への歩み 2. E2Eテスト定着に向けた取り組み 3. 得られた成果 18 @2025 WealthNavi Inc.

E2Eテストが定着できた理由について紹介 2019/01~2019/06 2021/08~2022/03 2024/03~2024/10 Seleniumを導⼊ 有償テスト⾃動化 ツールを導⼊ Playwrightを導⼊ 成功...? 成功!!! 頓挫 限界 到来 19 @2025 WealthNavi Inc.

定着を⽬指すうえで、重要と考えたこと ❤ テストの信頼性があり、利⽤されること ➡ ケース作成： 偽陽性、偽陰性が発⽣しない 👥 誰もが⾃由にテストケースの編集やテスト実⾏ができること ➡ 環境整備： 仕様が公開されている無償ツールで、クラウド上に実⾏環境を⽤意できる ➡ ⼈材育成： プログラミング未経験者もテストケースを編集できる 20 @2025 WealthNavi Inc.

定着を⽬指すうえで、重要と考えたこと ❤ テストの信頼性があり、利⽤されること ➡ ケース作成： 偽陽性、偽陰性が発⽣しない 👥 誰もが⾃由にテストケースの編集やテスト実⾏ができること ➡ 環境整備： 仕様が公開されている無償ツールで、クラウド上に実⾏環境を⽤意できる ➡ ⼈材育成： プログラミング未経験者もテストケースを編集できる 21 @2025 WealthNavi Inc.

テストの信頼性：偽陽性対策その1
✅ 脆いテスト (fragile test) への解決
📍 Playwrightのロケーター (locators) 機能の利⽤
➡ DOM構造に依存しない要素特定で、テストケースの破損防⽌
Playwrightは、CSSセレクタやXPathだけでなく、WAI-ARIAロールで要素を特定できるため、
Webページの構造変更に影響されず、テストケースが壊れにくい
// 画⾯内のヘッダーを特定
page.getByRole('heading', {name: 'リスク許容度診断', exact: true});
// 画⾯内のボタンを特定
page.getByRole('button', {name: '診断を始める', exact: true});

参照: Locators by Playwright Docs

22

@2025 WealthNavi Inc.

• https://playwright.dev/docs/locators

テストの信頼性：偽陽性対策その2
✅ 信頼不能テスト (flaky test) への解決
⏳ Playwrightの⾃動待機 (auto-waiting) 機能の利⽤
➡ ブラウザの内部状態を考慮した待機で、不安定なテスト実⾏を回避
Playwrightは、CDP(Chrome DevTools Protocol)でブラウザの内部状態を確認できるため、
画⾯要素が活性するまでの待機を最適時間でシームレスに⾏え、テスト失敗頻度が減少する
// ページヘッダーが表⽰されることをアサーションで確認する
await expect(page.getByRole('heading', {name: 'リスク許容度診断', exact: true})).toBeVisible();
// ボタンをクリックする
await page.getByRole('button', {name: '診断を始める', exact: true}).click();

参照: Auto-waiting by Playwright Docs

23

@2025 WealthNavi Inc.

• https://playwright.dev/docs/actionability

テストの信頼性：偽陽性対策その3
✅ 信頼不能テスト (flaky test) への解決
🔁 Playwrightのリトライ (retries) 機能の利⽤
➡ 失敗したテストの繰り返し実⾏で、極稀に発⽣する不安定なテスト実⾏を削減
Playwrightは、リトライをテスト全体またはグループ単位で設定できるため、
テスト実⾏に失敗したテストのみを数回再実⾏することで、テスト成功率が上昇する
例) 成功率 80%のテストケースであった場合
2回繰り返すと、成功率 96%(=1-0.2^2)
3回繰り返すと、成功率 99.2%(=1-0.2^3)

// テスト全体で、リトライ回数を設定する
export default defineConfig({ retries: 3 });
// グループ単位で、リトライ回数を個別に設定する
test.describe(() => { test.describe.configure({retries: 2}); });
参照: Retries by Playwright Docs

24

@2025 WealthNavi Inc.

• https://playwright.dev/docs/test-retries

テストの信頼性：偽陰性対策その1
✅ 空振りへの解決
⏳ Playwrightのタグ (tags) 機能の利⽤
➡ タグの割り振りで、テスト実⾏の漏れを回避
Playwrightは、テストケースに割り振られたタグを指定してテスト実⾏できるため、
複数並⾛する開発案件に対して、漏れなく同時にテスト実⾏できる
// 「@epic_addition」タグ指定で、機能追加エピックに対する無料診断のテストを⾏える

.test.ts

test('無料診断', {tag: ['@epic_addition', '@originator']}, async ({page}) => { /* テストケース */ });
// 「@epic_removal」タグ指定で、機能削除エピックに対する無料診断のテストを⾏える
test('無料診断', {tag: ['@epic_removal', '@originator']}, async ({page}) => { /* テストケース */ });

# 「@epic_addition」タグを指定して、テストを実⾏する

shell

npx playwright test -g “@epic_addition”
参照: Playwright test by Playwright Docs

25

@2025 WealthNavi Inc.

• https://playwright.dev/docs/api/class-test#test-describe

テストの信頼性：偽陰性対策その2 ✅ カバレッジ不⾜への解決 🔌 テストに必要なAPIを独⾃に⽤意 ➡ アカウント状態やメール本⽂を取得できるAPIで、テストケースを補完 APIは、Playwright単体では得られないアカウント状態やメール本⽂を得る⼿段となるため、 テストケースにAPIへのリクエストを⼊れることで、網羅したテストケースを作成できる 26 @2025 WealthNavi Inc.

定着を⽬指すうえで、重要と考えたこと ❤ テストの信頼性があり、利⽤されること ➡ ケース作成： 偽陽性、偽陰性が発⽣しない 👥 誰もが⾃由にテストケースの編集やテスト実⾏ができること ➡ 環境整備： 仕様が公開されている無償ツールで、クラウド上に実⾏環境を⽤意できる ➡ ⼈材育成： プログラミング未経験者もテストケースを編集できる 27 @2025 WealthNavi Inc.

誰もが⾃由に編集や実⾏可能：OSSツールとクラウドサービス ✅ ベンダーロックインへの解決 🗝 PlaywrightとAWSを組み合わせ ➡ OSSツールと3⼤クラウドサービスで、有償サービスを置換え、レジリエンスを強化 テスト環境として、仕様が公開されているOSSツールとクラウドサービスを利⽤することで、 有償テストツールで発⽣しうるサービス仕様改定や利⽤料改定への対応を事前に回避できる 28 @2025 WealthNavi Inc.

PlaywrightとAWSを組み合わせた、クラウド構成図 クラウド環境に、テスト実⾏基盤を構築 Bitbucket pipelines イメージをプッシュ AWS Cloud Private Subnet テストに 必要な 情報を抽出 Amazon ECR AWS Secrets Manager Amazon Aurora Netskope Amazon WAF Users イメージを参照 DB認証情報を参照 ① 実施したいテスト シナリオを選択 Amazon App Runner ② ECSのRun TaskでTaskを複数⽣成し、 Playwrightを並列実⾏ イメージを参照 Playwright Amazon ECS Task ⑤ テスト結果を通知 ③ Webサイトを テスト Slack ④ テスト結果 (html, webm, jpg) を保存 ⑥ テスト結果を確認 Amazon ECS Amazon S3 29 @2025 WealthNavi Inc.

Playwrightが、テストに必要な情報を追加で取得する流れ テスト実⾏中のTaskから、App RunnerへAPIリクエストを実施 AWS Cloud Private Subnet アカウント 状態を取得 AWS Secrets Manager Amazon Aurora DB認証情報を参照 Playwright Amazon ECS Amazon App Runner Task Postfix, Dovcot メールを 取得 テスト実⾏中にテストアカウントの状態やメール本⽂を取得し、 テストケースの⼊⼒値や期待値として活⽤ Amazon Elastic Compute Cloud (Amazon EC2) 30 @2025 WealthNavi Inc.

定着を⽬指すうえで、重要と考えたこと ❤ テストの信頼性があり、利⽤されること ➡ ケース作成： 偽陽性、偽陰性が発⽣しない 👥 誰もが⾃由にテストケースの編集やテスト実⾏ができること ➡ 環境整備： 仕様が公開されている無償ツールで、クラウド上に実⾏環境を⽤意できる ➡ ⼈材育成： プログラミング未経験者もテストケースを編集できる 31 @2025 WealthNavi Inc.

誰もが⾃由に編集や実⾏可能：開発⼈員の育成 ✅ 開発⼈員不⾜への解決 📚 Playwrightによる開発を体系化 ➡ ナレッジ管理ツールを活⽤ 知識習得の場として、notionやgitリポジトリにPlaywrightでの実装⽅法を整理することで、 新規加⼊した開発候補者に対して、学習効果が⾼い資料を⽤意できる 🏗 Playwrightによる開発を実践 ➡ OJTで知識を実践知へと昇華 経験蓄積の場として、OJTを通してテストケースとして成果物を⽣み出すことで、 Playwrightでの実装⽅法について理論から実践知へと昇華し経験を積むことができる 32 @2025 WealthNavi Inc.

Playwrightによる開発を体系化：教育資料の整理 開発環境構築からテストケース編集、テスト環境への反映まで資料を整理 33 @2025 WealthNavi Inc.

Playwrightによる開発を体系化：開発環境の整理 開発環境やテスト実⾏環境における、gitリポジトリやCI/CDを整理 . ├── test-case # Playwrightのテストケースがあるディレクトリ │ ├── insurance #「保険」プロダクト │ └── roboad #「ロボアド」プロダクト └── test-scenario # Playwrightのテストケースをまとめたシナリオがあるディレクトリ ├── insurance #「保険」プロダクト └── roboad #「ロボアド」プロダクト 34 @2025 WealthNavi Inc.

Playwrightによる開発を体系化：テストケース様式の統⼀ ⽣成AIのカスタム指⽰を錬成し、未経験者もケースを⽣成できるよう整備 35 @2025 WealthNavi Inc.

Playwrightによる開発を実践：育成指針の策定 過去のプログラミング経験から、技術⽔準に応じた習得指針を決定 プログラミング経験 ⽬指すべきゴール 育成担当 教育内容 未経験 ‧gitの理解と簡単な操作 ‧⼿続き型テストケースの読解 ‧補助ありでテストケースの⼀部修正 初級者 (SET) ‧git、リポジトリの概念理解と操作⽅法 ‧VS Code拡張機能を使った、レコーディング⽅法 ‧⼿続き型テストケースの⾒⽅や実装実例 ‧画⾯要素の⽂⾔や⼊⼒値の修正⽅法 初級者 ‧補助なしでテストケースの修正 ‧補助ありでテストケースの追加‧削除 ‧TypeScriptの読解 中級者 (SET) ‧アクセシビリティの探索⽅法 ‧分岐処理の編集⽅法 ‧テストケースの追加‧削除⽅法 ‧TypeScriptの⽂法 SET ‧⼿続き型テストケースの編集⽅法 ‧POM型テストケースの構造 ‧Playwrightの設定ファイルの構造 SET ‧すべてのテストケースの構造と編集⽅法 ‧テストタイプに応じたテストフレームワーク ‧クラウド環境の全体構成と編集⽅法 中級者以上 ‧⼿続き型テストケースの編集 ‧POM(Page object Models)型 テストケースの編集 ‧Playwrightの設定ファイルの編集 SETエンジニア ‧すべてのテストケースの編集 ‧テストテンプレートの編集 ‧クラウド環境の構築‧運⽤保守 36 @2025 WealthNavi Inc.

Playwrightによる開発を実践：技術の習得と権限委譲 OJTで編集⽅法を習得させ、最終的に設計からデプロイまですべてを委譲 37 @2025 WealthNavi Inc.

1. テスト⾃動化への歩み 2. E2Eテスト定着に向けた取り組み 3. 得られた成果 38 @2025 WealthNavi Inc.

2025年5⽉時点でのE2Eテストの実績 テストケースの改修と実⾏が継続的に稼働し、安定的なテスト結果を維持 チーム プロダクト スプリント実績数 シナリオ総数 テスト成功率 QAチーム ロボアド 30 821 98.9% αチーム 保険 2 5 100% βチーム ⾦融教育 11 46 95.65% γチーム CRM 1 1 100% 39 @2025 WealthNavi Inc.

2025年5⽉時点でのテスト開発⼈員の構成 SETエンジニア以外が、テストケースの改修やテスト実⾏を⾏い、運⽤中 プログラミング経験 契約形態 Playwright経験 現在の役割 未経験 労働者派遣契約：1名 (テスト設計者) なし ‧QAチームが管掌するプロダクトの軽微なテストケース修正 ‧修正内容をテスト環境にデプロイ ‧テスト実⾏ 初級者 労働者派遣契約：1名 (テスター) なし ‧QAチームが管掌するプロダクトのテストケース編集 ‧編集内容をテスト環境にデプロイ ‧テスト実⾏ 正社員：2名 (QAチーム以外の所属) なし ‧⾃チームが管掌するプロダクトのテストケース編集 ‧編集内容をテスト環境にデプロイ ‧テスト実⾏ 正社員：2名 (QAチーム所属) あり ‧全プロダクトのテストケース編集の⽀援 ‧テストフレームワークの構築 ‧クラウド環境の運⽤保守 中級者以上 SETエンジニア 40 @2025 WealthNavi Inc.

E2Eテスト⾃動化ツール採⽤のPros&Consと、導⼊総括 ● ツールの採⽤だけでは、E2Eテストの運⽤は困難 ● 定着に重要な点は、テストが使い続けられる仕組み化と継続的な改善 ● ウェルスナビでは、E2Eテストの仕組み化で定着に成功 ‧反復かつ⼿動でのテスト実施で発⽣する、⼯数を削減できる Pros ‧テスト実施⼿順の間違いを防⽌できる ‧複数のテストケースを並列実⾏することで、テスト実施を⾼速化し、不具合の早期発⾒ができる ‧テスト担当者が、本来注⼒すべき、深⻑かつ網羅、効果的なテストケース設計の⼯数確保ができる ‧テストツール習得のために、学習コストがかかる Cons ‧E2Eテストを実⾏するために、テスト環境の準備が必要である ‧テストケースの運⽤保守に⼯数がかかる ‧テストツールの提供中⽌や更新中⽌による可⽤性リスクがある 参照: テスト自動化の利点とリスク by ISTQBテスト技術者資格制度 Foundation Level シラバス 日本語版 Version 2023V4.0.J02 41 @2025 WealthNavi Inc.

• https://jstqb.jp/dl/JSTQB-SyllabusFoundation_VersionV40.J02.pdf

【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものと し、当社はこれに⼀切関与せず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は⼀切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる 損害についても、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 42 @2025 WealthNavi Inc.

ご清聴ありがとうございました 43 @2025 WealthNavi Inc.

Appendix 1 定期的にWealthNaviの開発（技術‧組織）に関する情報を発信しています。 開発者ブログ 技術広報に関する お問い合わせ先 https://zenn.dev/p/wn_engineering ブックマーク追加や記事への「いいね」していただけると嬉しいです ウェルスナビ 技術広報チーム（[email protected]） 44 @2025 WealthNavi Inc.

• https://zenn.dev/p/wn_engineering

Appendix 2 ウェルスナビでは複数の開発系ポジションで採⽤を強化しています。 QAエンジニア SETエンジニア モバイル開発エンジニア エンジニアリングマネージャー バックエンド開発エンジニア 主な採⽤中職種 ● ● ● ● ● 採⽤情報詳細 下記URL（QRコード）よりご確認ください。 https://recruit.wealthnavi.com/ 採⽤に関する お問い合わせ先 ● ● 「カジュアルに話を聞いてみたい」という温度感でも構いません。 ウェルスナビ採⽤チーム（[email protected]）までご連 絡お待ちしております。 45 @2025 WealthNavi Inc.

• https://recruit.wealthnavi.com/