Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

© Knowledge Work Inc. 登壇者について 2 2 鳥居陽介 @jinjor フロントエンドエンジニア 2023年7月入社 著書：基礎からわかる Elm ※本日 Elm の話はありません

Slide 3

Slide 3 text

© Knowledge Work Inc. 本セッションについて 3 3 ゴール ● E2E テストの事例の中で参考にできる部分を持ち帰ってもらう ● ナレッジワークの開発に興味を持ってもらう（採用につなげたい） 話すこと ● ナレッジワークの E2E テストに対する取り組み ● その中で直面した課題と解決方法 話さないこと ● E2E テストのテクニック

Slide 4

Slide 4 text

ナレッジワークの開発体制と E2E テスト

Slide 5

Slide 5 text

© Knowledge Work Inc. ナレッジワークってどんなプロダクト？ 5 5 みんなが売れる営業になる セールス職の生産性を爆上げするツール ● B2B SaaS ● マルチプロダクト構成

Slide 6

Slide 6 text

© Knowledge Work Inc. プロダクトも組織も急成長中！ 6 6 2023年11月プレスリリース

Slide 7

Slide 7 text

© Knowledge Work Inc. プロダクトも組織も急成長中！ 7 7 2023年11月プレスリリース

Slide 8

Slide 8 text

© Knowledge Work Inc. プロダクトも組織も急成長中！ 8 8 2023年11月プレスリリース 採用も加速してエンジニアは 1 年でほぼ倍増（！） 2024/9 現在 47 名

Slide 9

Slide 9 text

© Knowledge Work Inc. 開発組織 9 9 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 Middleware Platform ・・・

Slide 10

Slide 10 text

© Knowledge Work Inc. 開発組織 10 10 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 Middleware Platform ・・・ 急激に大規模化・複雑化するプロダクト！ そんな中どんどん増える開発者！ E2E テストが通っているとちょっと安心できる 😊

Slide 11

Slide 11 text

ナレッジワークの E2E テスト事情

Slide 12

Slide 12 text

© Knowledge Work Inc. ナレッジワークの E2E テスト事情 ● Playwright を使用 ● 毎朝 CI で開発環境に対してテストを実行 + Slack 通知 ● Pull Request にコメントすることでマージ前にも実行可能 ● 開発環境だけでなく手元で開発中のビルドに対しても実行可能 12 12

Slide 13

Slide 13 text

© 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 テスト用に作成したテナントでテスト実行

Slide 14

Slide 14 text

© Knowledge Work Inc. QA エンジニアとの共同作業 ● QA エンジニアがテストケースの管理と健康状態の監視を担当 ● 主に Frontend エンジニアと QA エンジニアがテストを実装 ○ QA エンジニアの実装への参加は任意 ○ ペアプロなどを通じてスキル継承 14 14

Slide 15

Slide 15 text

© Knowledge Work Inc. E2E テストの役割 ● 基本的な機能のデグレードがないことを常に保証する ● モジュール単位のテストでは不安なシステム全体のテストをする ● QA 確認作業の自動化による時短 ● 自動チェックによる高頻度なデプロイ 15 15

Slide 16

Slide 16 text

© Knowledge Work Inc. E2E テストの役割 ● 基本的な機能のデグレードがないことを常に保証する ● モジュール単位のテストでは不安なシステム全体のテストをする ● QA 確認作業の自動化による時短 ● 自動チェックによる高頻度なデプロイ 16 16 手動 確認 ２週間 🚀 手動 確認 １日 🚀 手動確認があるとデプロイ頻度を上げられない ﾀｽｹﾃ

Slide 17

Slide 17 text

直面した課題と解決策（テスト基盤の構築）

Slide 18

Slide 18 text

© Knowledge Work Inc. 直面した課題 18 18 1. 複数人が同時にテストできない 2. 本番環境でテストできない

Slide 19

Slide 19 text

© Knowledge Work Inc. 19 19 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 複数人で同時にテストしたい テストを書く人：たくさん テスト用テナント：２つ 課題：同じテナントで同時にテストを実行すると落ちる

Slide 20

Slide 20 text

© Knowledge Work Inc. 20 20 󰳕󰳕 Frontend 󰳕󰳕󰳕 Backend 🕵 QA 󰳒 Design 󰳖 PdM Product 1 󰳕󰳕 󰳕󰳕󰳕 🕵 󰳒 󰳖 Product 2 󰳕 󰳕󰳕 🕵 󰳒 󰳖 Product 3 複数人で同時にテストしたい テストを書く人：たくさん テスト用テナント：２つ 課題：同じテナントで同時にテストを実行すると落ちる 誰か今 E2E テスト流してますか？ すみません、実行中でした！

Slide 21

Slide 21 text

© Knowledge Work Inc. 21 21 複数人で同時にテストしたい 解決策：テナントプール（ WIP） 󰠁 󰳕 実行中 空きテナントを 自動選択 ● 排他制御によって、空いているテナントを自動選択する ● テスト対象によって、実行可能なテナントを自動選択する

Slide 22

Slide 22 text

© Knowledge Work Inc. 22 22 複数人で同時にテストしたい 解決策：テナントプール（ WIP） 󰠁 󰳕 実行中 空きテナントを 自動選択 ● 排他制御によって、空いているテナントを自動選択する ● テスト対象によって、実行可能なテナントを自動選択する プロダクト A のテスト プロダクト A 用の 手動セットアップが 完了しているテナント

Slide 23

Slide 23 text

© Knowledge Work Inc. 直面した課題 23 23 1. 複数人が同時にテストできない 2. 本番環境でテストできない

Slide 24

Slide 24 text

© Knowledge Work Inc. 本番環境でテストしたい 24 24 背景：Vercel から Cloud Run への移行 複数プロダクトが独立してデプロイできるようにモノリスを分割（通称 : シンデプロイ）

Slide 25

Slide 25 text

© Knowledge Work Inc. 本番環境でテストしたい 25 25 課題：開発環境限定のテスト用 API 認証を簡単に突破するため、開発環境でのみ使えるテスト用 API を利用していた 本番環境で有効にするとセキュリティホールになるので使えない！

Slide 26

Slide 26 text

© Knowledge Work Inc. 本番環境でテストしたい 26 26 解決策：Testing Gateway ● IAM 認証により実行者を社内の限 られた principal に制限 ● 実行対象をテスト用のテナントに制 限 ● 本番環境は internal アクセスのみ 許可 テスト実行専用のゲートウェイ

Slide 27

Slide 27 text

© Knowledge Work Inc. 本番環境でテストしたい 27 27 解決策：Testing Gateway ● IAM 認証により実行者を社内の限 られた principal に制限 ● 実行対象をテスト用のテナントに制 限 ● 本番環境は internal アクセスのみ 許可 Platform グループの スーパーエンジニア shogo が 提案・設計・実装してくれました！ テスト実行専用のゲートウェイ ＼イヌゥゥ／

Slide 28

Slide 28 text

© Knowledge Work Inc. 28 28 認証以外にもテストに必要な機能を搭載、 テナント管理がシンプルに！ 今までテナント管理機能はセキュリティ懸念のため 自動化できなかったが、Testing Gateway 越しに API を叩くことで自動化可能になった → ユーザーとしてテナントにログインしなくても 色々出来るようになった 本番環境でテストしたい

Slide 29

Slide 29 text

© Knowledge Work Inc. 何も分からない...何も... 本番環境でテストしたい 29 29 課題：テナントのセットアップ方法が分からない ● 本番環境にはテスト用テナントがないため新規作成する必要があった ● が、どうすればテスト可能な状態を作れるのか誰も知らなかった 初期データが足りないっぽい... 外部サービスとの連携に失敗する ... 全然テスト通らない... ユーザーがいない... 開発環境のデータに依存している ...

Slide 30

Slide 30 text

© Knowledge Work Inc. 本番環境でテストしたい 30 30 解決策：みんなで地道に調査して手順をドキュメント化 事前に外部サービス連携 しておく必要がありそう わ い わ い
 この名前のリソースを 作っておかないと落ちます データに依存しないように テスト書き直そ？ 各プロダクトのテスト担当 いぬ〜〜〜


Slide 31

Slide 31 text

© Knowledge Work Inc. 本番環境でテストしたい 31 31 ついにテストが動いた！ Cloud Run への移行も無事完了！

Slide 32

Slide 32 text

今後の展望

Slide 33

Slide 33 text

© Knowledge Work Inc. 33 33 まだまだやること盛りだくさん ...！ Testing Gateway テナント プール デプロイ フローへの 組み込み テナント 作成手順 の文書化 プロダクト 毎の テスト管理 テナント 作成の 自動化 手動テスト の自動化 メール認証 OAuth SCIM

Slide 34

Slide 34 text

まとめ

Slide 35

Slide 35 text

© Knowledge Work Inc. まとめ 35 35 Before ● フロントエンドエンジニアができる範囲の改善を片手間にやっていた ● イケてない部分に目を瞑り、騙し騙しなんとかしていた After ● 品質・開発効率を左右する重要プロジェクトとして E2E テストを位置付けた ● 部署の垣根を超えてみんなを巻き込んで改善していく動きが増えた ● テスト基盤の構築により、根本的な改善やプロセスの最適化ができるようになった

Slide 36

Slide 36 text

© Knowledge Work Inc. まとめ 36 36 みんなで E2E テストを盛り上げていきましょう！！！

Slide 37

Slide 37 text

No content