急拡大する開発組織を支えるナレッジワークの E2E テスト基盤

torii / 株式会社ナレッジワーク（https://x.com/jinjor）

2024/9/20開催「Frontendのテスト全部知る 〜Unit TestからE2Eまで〜 - Encraft #18」での登壇資料です。
https://knowledgework.connpass.com/event/327800/

Transcript

1. Encraft #18 急拡大する開発組織を支える ナレッジワークの E2E テスト基盤
2. © Knowledge Work Inc. 登壇者について 2 2 鳥居陽介 @jinjor フロントエンドエンジニア 2023年7月入社 著書：基礎からわかる Elm ※本日 Elm の話はありません
3. © Knowledge Work Inc. 本セッションについて 3 3 ゴール • E2E テストの事例の中で参考にできる部分を持ち帰ってもらう • ナレッジワークの開発に興味を持ってもらう（採用につなげたい） 話すこと • ナレッジワークの E2E テストに対する取り組み • その中で直面した課題と解決方法 話さないこと • E2E テストのテクニック
4. ナレッジワークの開発体制と E2E テスト
5. © Knowledge Work Inc. ナレッジワークってどんなプロダクト？ 5 5 みんなが売れる営業になる セールス職の生産性を爆上げするツール • B2B SaaS • マルチプロダクト構成
6. © Knowledge Work Inc. プロダクトも組織も急成長中！ 6 6 2023年11月プレスリリース
7. © Knowledge Work Inc. プロダクトも組織も急成長中！ 7 7 2023年11月プレスリリース
8. © Knowledge Work Inc. プロダクトも組織も急成長中！ 8 8 2023年11月プレスリリース 採用も加速してエンジニアは 1 年でほぼ倍増（！） 2024/9 現在 47 名
9. © Knowledge Work Inc. 開発組織 9 9 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 Middleware Platform ・・・
10. © Knowledge Work Inc. 開発組織 10 10 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 Middleware Platform ・・・ 急激に大規模化・複雑化するプロダクト！ そんな中どんどん増える開発者！ E2E テストが通っているとちょっと安心できる 😊
11. ナレッジワークの E2E テスト事情
12. © Knowledge Work Inc. ナレッジワークの E2E テスト事情 • Playwright を使用 • 毎朝 CI で開発環境に対してテストを実行 + Slack 通知 • Pull Request にコメントすることでマージ前にも実行可能 • 開発環境だけでなく手元で開発中のビルドに対しても実行可能 12 12
13. © Knowledge Work Inc. E2E テスト用のテナント 13 13 feature flag が OFF のテナント feature flag が ON のテナント https://e2e-test.dev.xxxxxxxx https://e2e-test-flag-on.dev.xxxxxxxx マルチテナントのサービスであることを利用して E2E テスト用に作成したテナントでテスト実行
14. © Knowledge Work Inc. QA エンジニアとの共同作業 • QA エンジニアがテストケースの管理と健康状態の監視を担当 • 主に Frontend エンジニアと QA エンジニアがテストを実装 ◦ QA エンジニアの実装への参加は任意 ◦ ペアプロなどを通じてスキル継承 14 14
15. © Knowledge Work Inc. E2E テストの役割 • 基本的な機能のデグレードがないことを常に保証する • モジュール単位のテストでは不安なシステム全体のテストをする • QA 確認作業の自動化による時短 • 自動チェックによる高頻度なデプロイ 15 15
16. © Knowledge Work Inc. E2E テストの役割 • 基本的な機能のデグレードがないことを常に保証する • モジュール単位のテストでは不安なシステム全体のテストをする • QA 確認作業の自動化による時短 • 自動チェックによる高頻度なデプロイ 16 16 手動 確認 ２週間 🚀 手動 確認 １日 🚀 手動確認があるとデプロイ頻度を上げられない ﾀｽｹﾃ
17. 直面した課題と解決策（テスト基盤の構築）
18. © Knowledge Work Inc. 直面した課題 18 18 1. 複数人が同時にテストできない 2. 本番環境でテストできない
19. © Knowledge Work Inc. 19 19 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 複数人で同時にテストしたい テストを書く人：たくさん テスト用テナント：２つ 課題：同じテナントで同時にテストを実行すると落ちる
20. © Knowledge Work Inc. 20 20 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 複数人で同時にテストしたい テストを書く人：たくさん テスト用テナント：２つ 課題：同じテナントで同時にテストを実行すると落ちる 誰か今 E2E テスト流してますか？ すみません、実行中でした！
21. © Knowledge Work Inc. 21 21 複数人で同時にテストしたい 解決策：テナントプール（ WIP） 󰠁 󰳕 実行中 空きテナントを 自動選択 • 排他制御によって、空いているテナントを自動選択する • テスト対象によって、実行可能なテナントを自動選択する
22. © Knowledge Work Inc. 22 22 複数人で同時にテストしたい 解決策：テナントプール（ WIP） 󰠁 󰳕 実行中 空きテナントを 自動選択 • 排他制御によって、空いているテナントを自動選択する • テスト対象によって、実行可能なテナントを自動選択する プロダクト A のテスト プロダクト A 用の 手動セットアップが 完了しているテナント
23. © Knowledge Work Inc. 直面した課題 23 23 1. 複数人が同時にテストできない 2. 本番環境でテストできない
24. © Knowledge Work Inc. 本番環境でテストしたい 24 24 背景：Vercel から Cloud Run への移行 複数プロダクトが独立してデプロイできるようにモノリスを分割（通称 : シンデプロイ）
25. © Knowledge Work Inc. 本番環境でテストしたい 25 25 課題：開発環境限定のテスト用 API 認証を簡単に突破するため、開発環境でのみ使えるテスト用 API を利用していた 本番環境で有効にするとセキュリティホールになるので使えない！
26. © Knowledge Work Inc. 本番環境でテストしたい 26 26 解決策：Testing Gateway • IAM 認証により実行者を社内の限 られた principal に制限 • 実行対象をテスト用のテナントに制 限 • 本番環境は internal アクセスのみ 許可 テスト実行専用のゲートウェイ
27. © Knowledge Work Inc. 本番環境でテストしたい 27 27 解決策：Testing Gateway • IAM 認証により実行者を社内の限 られた principal に制限 • 実行対象をテスト用のテナントに制 限 • 本番環境は internal アクセスのみ 許可 Platform グループの スーパーエンジニア shogo が 提案・設計・実装してくれました！ テスト実行専用のゲートウェイ ＼イヌゥゥ／
28. © Knowledge Work Inc. 28 28 認証以外にもテストに必要な機能を搭載、 テナント管理がシンプルに！ 今までテナント管理機能はセキュリティ懸念のため 自動化できなかったが、Testing Gateway 越しに API を叩くことで自動化可能になった → ユーザーとしてテナントにログインしなくても 色々出来るようになった 本番環境でテストしたい
29. © Knowledge Work Inc. 何も分からない...何も... 本番環境でテストしたい 29 29 課題：テナントのセットアップ方法が分からない • 本番環境にはテスト用テナントがないため新規作成する必要があった • が、どうすればテスト可能な状態を作れるのか誰も知らなかった 初期データが足りないっぽい... 外部サービスとの連携に失敗する ... 全然テスト通らない... ユーザーがいない... 開発環境のデータに依存している ...
30. © Knowledge Work Inc. 本番環境でテストしたい 30 30 解決策：みんなで地道に調査して手順をドキュメント化 事前に外部サービス連携 しておく必要がありそう わ い わ い
 この名前のリソースを 作っておかないと落ちます データに依存しないように テスト書き直そ？ 各プロダクトのテスト担当 いぬ〜〜〜

31. © Knowledge Work Inc. 本番環境でテストしたい 31 31 ついにテストが動いた！ Cloud Run への移行も無事完了！
32. 今後の展望
33. © Knowledge Work Inc. 33 33 まだまだやること盛りだくさん ...！ Testing Gateway テナント プール デプロイ フローへの 組み込み テナント 作成手順 の文書化 プロダクト 毎の テスト管理 テナント 作成の 自動化 手動テスト の自動化 メール認証 OAuth SCIM
34. まとめ
35. © Knowledge Work Inc. まとめ 35 35 Before • フロントエンドエンジニアができる範囲の改善を片手間にやっていた • イケてない部分に目を瞑り、騙し騙しなんとかしていた After • 品質・開発効率を左右する重要プロジェクトとして E2E テストを位置付けた • 部署の垣根を超えてみんなを巻き込んで改善していく動きが増えた • テスト基盤の構築により、根本的な改善やプロセスの最適化ができるようになった
36. © Knowledge Work Inc. まとめ 36 36 みんなで E2E テストを盛り上げていきましょう！！！