開発が大規模化しても破綻しないナレッジワークの E2E テスト基盤

株式会社ナレッジワーク 鳥居 陽介 @jinjor
※2025/3/13 ファインディ主催「E2Eテスト自動化の事例4選 ~Playwright活用編~」での登壇資料です
https://findy.connpass.com/event/346097/

1. 2025/03/13 #テスト自動化 _findy Yosuke Torii @jinjor 開発が大規模化しても破綻しない ナレッジワークの E2E テスト基盤
2. © Knowledge Work Inc. 登壇者について 2 2 鳥居陽介 @jinjor フロントエンドエンジニア 著書：基礎からわかる Elm 2023年7月〜株式会社ナレッジワーク
3. © Knowledge Work Inc. 会社とプロダクトについて 3 3 株式会社ナレッジワーク 創業：2020 年 4 月 社員数：約 170 名（エンジニア約 60 名） ナレッジワーク（プロダクト） 「みんなが売れる営業になる」 セールス職の生産性を爆上げする SaaS
4. © Knowledge Work Inc. 本セッションのゴール 4 4 • ナレッジワークの事例の中で参考にできる部分を持ち帰ってもらう • E2E テストやっていきの気持ちを高めてもらう
5. © Knowledge Work Inc. 目次 5 5 1. ナレッジワークの E2E テスト事情 2. 大規模化に伴う 課題と解決方法
6. ナレッジワークの E2E テスト事情
7. © Knowledge Work Inc. Playwright による E2E テストの運用 • 主にフロントエンド開発者と QA エンジニアの一部がコーディング • 機能のカバレッジをスプレッドシートで管理 • 開発環境（dev）に対して毎朝 CI で定期実行、テスト結果を Slack に通知 ◦ アップロードされたレポートを閲覧可能（ gcsproxy 使用） • デプロイフローの一部に組み込み中（ WIP） 7 7
8. © Knowledge Work Inc. ブラウザ • Chrome • Edge • Webkit (for mobile) テスト内容のバリエーション 環境 • dev • qa • (stg) • (prd) フィーチャーフラグ • ON • OFF 8 8
9. © Knowledge Work Inc. • GitHub Actions で定期実行 • GitHub Actions の workflow_dispatch で実行 • Pull Request にコメントして実行 • ローカルマシンで dev, qa 環境に対して実行 • ローカルマシンでローカルサーバーを使って実行 ◦ API は dev 環境にプロキシ テスト実行方式のバリエーション 9 9
10. © Knowledge Work Inc. • テスト専用の API や限定された管理 API にアクセス可能 • 認証により社内の開発者に実行を制限 • セキュアに本番環境でテストが可能 テスト用のインフラ (testing-gateway) 10 10
11. 大規模化に伴う課題と解決方法
12. © Knowledge Work Inc. • プロダクトが増えた（モノリス → 6 プロダクト） • 人が増えた（エンジニア約 60 名） 背景 12 12
13. © Knowledge Work Inc. • プロダクトが増えた（モノリス → 6 プロダクト） • 人が増えた（エンジニア約 60 名） 背景 Product A Product B Product C Product D 13 13
14. © Knowledge Work Inc. • プロダクトが増えた（モノリス → 6 プロダクト） • 人が増えた（エンジニア約 60 名） 背景 Product A Product B Product C Product D 󰳖󰳒🕵󰳕󰳕 󰳕 󰳖󰳒🕵󰳕󰳕 󰳕 󰳖󰳒🕵󰳕󰳕 󰳖󰳒🕵󰳕󰳕 14 14
15. © Knowledge Work Inc. 複数人で同時にテストしたい 󰠁 󰳕 実行 ※テナント 　ユーザー契約ごとに用意される環境 　サブドメインが割り当てられる 実行 テスト用のテナント https://e2e-test.xxx.xxx 課題：複数人で同時にテストを実行できない 15 15
16. © Knowledge Work Inc. 複数人で同時にテストしたい ※テナント 　ユーザー契約ごとに用意される環境 　サブドメインが割り当てられる 課題：複数人で同時にテストを実行できない 󰠁 󰳕 実行 実行 テスト用のテナント https://e2e-test.xxx.xxx 競合して テストが落 ちる 16 16
17. © Knowledge Work Inc. 複数人で同時にテストしたい 解決策：テナントプール 排他制御によって、空いているテナントを自動選択する 󰠁 󰳕 実行 実行 テナント 3 テナント 4 テナント 1 テナント 2 17 17
18. © Knowledge Work Inc. 複数人で同時にテストしたい 同じ状態のテナントを作るための工夫 既存のテスト用テナントから リバースエンジニアリング 作成手順をドキュメント化 自動 手動 半自動 18 18
19. © Knowledge Work Inc. 複数人で同時にテストしたい セットアップの半自動化 自動化の難しい認証部分だけ人間の手で突破 19 19
20. © Knowledge Work Inc. 複数人で同時にテストしたい こちらの Zenn 記事も併せてどうぞ！ E2E テストの同時実行が可能な環境を構築した話 20 20
21. © Knowledge Work Inc. モノリス E2E テストの分割 課題：プロダクトは分割されたが E2E テストはモノリスのまま Product A Product B Product C Product D 󰳖󰳒🕵󰳕󰳕 󰳕 󰳖󰳒🕵󰳕󰳕 󰳕 󰳖󰳒🕵󰳕󰳕 󰳖󰳒🕵󰳕󰳕 21 21 e2e/ ├── spec/ │ ├── foo.spec.ts │ ├── bar.spec.ts │ ├── baz.spec.ts │ ├── hoge.spec.ts │ ├── fuga.spec.ts │ ├── ... │ └── ... ├── api/ ├── util/ ├── setup.ts └── teardown.ts
22. © Knowledge Work Inc. モノリス E2E テストの分割 22 22 問題 • 実行時間が長い（全て実行すると１時間以上） • 認知負荷が高い（全プロダクトのコードがごった煮） 解決策 • ディレクトリの分割 • 通知の分割 • Playwright project の分割 • オーナーシップの分割（ WIP）
23. © Knowledge Work Inc. モノリス E2E テストの分割 23 23 e2e/ ├─ productA/ │ ├─ spec/ │ │ └── *.spec.ts │ ├── api/ │ ├── util/ │ ├── setup.ts │ └── teardown.ts └─ productB/ ├─ spec/ │ └── *.spec.ts ├── api/ ├── util/ ├── setup.ts └── teardown.ts 解決策 • ディレクトリの分割 • 通知の分割 • Playwright project の分割 • オーナーシップの分割（ WIP） 問題 • 実行時間が長い（全て実行すると１時間以上） • 認知負荷が高い（全プロダクトのコードがごった煮）
24. © Knowledge Work Inc. モノリス E2E テストの分割 24 24 setup global-setup *.spec.ts setup *.spec.ts teardown teardown global-teardown 解決策 • ディレクトリの分割 • 通知の分割 • Playwright project の分割 • オーナーシップの分割（ WIP） 問題 • 実行時間が長い（全て実行すると１時間以上） • 認知負荷が高い（全プロダクトのコードがごった煮）
25. © Knowledge Work Inc. • 人が増えた → 同時実行できるようにテスト環境を増やした • プロダクトが増えた → 各チームで独立してメンテナンスできるようにコードベースを分割した 大規模化対応まとめ 25 25
26. さいごに
27. © Knowledge Work Inc. さいごに 27 27 かなり多くの方の協力によって 実現しています（感謝） • 毎日テスト結果を監視している QA ・フロントエンドエンジニア • テストカバレッジ向上を推進している QA エンジニア • テストインフラを構築してくれたプラットフォームエンジニア • テスト基盤を継続的に改善しているフロントエンドエンジニア • テストが失敗した時の原因調査に協力してくれるバックエンドエンジニア • 組織の施策として後押ししてくれるマネージャー 協力してくれる仲間を増やすのが大事！
28. © Knowledge Work Inc. さいごに 28 28 Playwright で E2E テスト、盛り上げていきましょう！