![構成
Nuxt.js SSRにおけるE2Eテストの実装
1. あらすじ
2. 背景
3. 実装例と運用してみた結果
4. 議論と今後の見通し
5. [image citations]
6. [self introduction]](https://image.slidesharecdn.com/e2e-test-on-webapp-with-ssr-191218075309/85/E2E-test-on-Nuxt-js-with-SSR-2-320.jpg)
E2E test on Nuxt.js with SSR
- 1. Nuxt.js SSRにおけるE2Eテストの実装 Scramble Tech#1 株式会社 ミクシィ 太田 一行
- 2. 構成 Nuxt.js SSRにおけるE2Eテストの実装 1. あらすじ 2. 背景 3. 実装例と運用してみた結果 4. 議論と今後の見通し 5. [image citations] 6. [self introduction]
- 3. あらすじ
- 7. Nuxt.js SSRにおけるE2Eテストの実装 Our Application Nuxt.jsで作成されたフロント & Phoenixで作成されたサーバ
- 9. 背景
- 10. Nuxt.js SSRにおけるE2Eテストの実装 E2Eテスト 実装の目的 ❖ 機械的に確認できる部分を自動化し、 QAの省力化に貢献すること ❖ かつ、単体テストやAPIテストには カバーできない項目が存在する
- 11. E2E テストについて ❖ ソフトウェアテストの一種 1. 自動でブラウザを操作 2. 作成したシナリオを実行 3. スクリーンショット(SS)撮影等 4. 期待した描画結果か調べる
- 13. E2E テストの留意点 ❖ 外部要因に影響を受け得る ❖ ネットワーク遅延等 ❖ 変更コストやや増 ❖ それ自体に保守コストが かかる 単体テストの代わりではなく、 補完として
- 14. 代表的なツール ❖ Puppeteer ❖ Headless Chrome Node.js API ❖ maintenance by Chrome dev team ❖ 要点 ❖ Chromeをスクリプトから 操るライブラリ ❖ 採用理由 ❖ vs puppeteer-core ❖ jest-puppeteerの存在 ❖ jest テスト環境がすでに存在したため
- 15. App要件1:SSR概要 ❖ WebAppはSever-Side- Rendering (SSR)を採用 ❖ HTML&propsを合わせて 事前レンダリングする ❖ JSで書かれたcomponentが propsを参照しながら遅れて 描画される ❖ アルゴリズムは本スライドの スコープ外
- 16. App要件1:SSR概要 ❖ 採用理由 ❖ time-to-contentの改善が ビジネス上クリティカル ❖ E2Eテストからみた制約 ❖ Node.js 実行環境が必要 アクセスして何かが表示 されるまでの時間
- 17. App要件2:SMS認証 ❖ 所与の要件として、SMS認証を 認証に用いる ❖ Puppeteerは正規の方法で SMS認証を突破できない ❖ E2Eテストからみた制約 ❖ SMS認証をモックした 専用のサーバを立てる必要
- 18. 要件の整理 1. CI/CDで定期実行する 2. ビジネス要件への適応 ❖ SSRを実行できる環境 ❖ 専用のサーバ 3. (できれば)テスト失敗時に 対応しやすい ❖ 問題箇所をすぐ特定 ❖ 正しいSSをすぐデプロイ
- 19. 実装例
- 21. アプリケーション部分 ❖ Nuxt.js + Phoenix + Nginx ❖ Nuxt.js - Nginx間はDocker ネットワークで繋がっている ❖ PhoenixにはE2Eテスト用の 環境設定を追加 ❖ SMS認証はモックされている
- 22. アプリケーション部分 ❖ 工夫したポイント ❖ Nuxt.jsはNodeコンテナに ❖ Phoenixのplugとして SMS認証機能をモック 課題１を解決できた！ 課題２を解決できた！
- 23. Docker-Compose on CircleCI ❖ Docker-Compose ❖ Nuxt.js コンテナ ❖ Nginx コンテナ ❖ Puppeteer コンテナ ❖ cronで定期実行 $ docker-compose up
- 24. Docker-Compose on CircleCI ❖ Nuxt.js コンテナ ❖ Node+ App本体 ❖ Nginx コンテナ ❖ 本番ではS3-CloudFrontのメディア サーバ ❖ Puppeteer コンテナ ❖ Node + Puppeteer + Chrome ❖ シナリオスクリプトや正解デー タ、実際に撮影したSSなどのデー タを含むテスト実行主体
- 25. Docker-Compose on CircleCI ❖ ローカルでも同じコマンド でテスト実行できる $ docker-compose up
- 26. テストの実行と通知 ❖ Puppeteerがテストを実行 ❖ S3から正解画像を取得し、 コンテナに含めてビルド ❖ 作成したSSはArtifact化 ❖ ブラウザからすぐ見られる! ❖ 結果はURLつきで Slackに通知 問題の早期特定に役立つ！
- 27. 1. Slackに毎朝実行結果が通知される 2. 失敗していたら、Artifactとして保存したSSを参照。 失敗した理由を特定する。 3. コードを修正する。 4. ローカルから$docker-compose up 5. 正しく生成した画像をS3にプッシュ 運用フロー CIで 定期実行 ! 2step!
- 28. 要件再掲 1. CI/CDで定期実行したい 2. ビジネス要件への適応 ❖ SSRを実行できる環境 ❖ 専用のサーバ 3. (できれば)テスト失敗時に 対応しやすい ❖ 問題箇所をすぐ特定 ❖ 正しいSSをすぐデプロイ 要件を満たせた！
- 29. 2ヶ月ほど運用した結果 ❖ 設定した目標は実現できていそう ❖ デザイン崩れ防止 ❖ デグレーション防止 ❖ ページ遷移の保証 ❖ 副次的なありがたみもいくらかある ❖ 単体テストやAPIテストのヌケが見つかることも
- 30. 議論と今後の見通し
- 31. 議論 ❖ これは正しいend-to-endテストと呼べるのか？ ❖ end-to-endとはいえない なぜならサーバ側を厳密に保証できていないから 1. DB、インフラの性質が本番とは異なる 2. SMS認証部がモックされている ❖ SMS認証を回避しつつサーバコード全体をそのまま残すこと ができればend-to-endと呼べるか？ 1も同様に必須か？ 皆さんの良いアイデアお待ちしていますmm
- 32. 今後の課題 ❖ E2Eテストの保守性向上 ❖ E2Eテストは腐りやすい ❖ 更新ツールを整備して腐りにくく ❖ 単体テスト、APIテストのカバレッジ向上 ❖ E2Eテストに依存せず、バランスの良いテスト体制を
- 33. 余談(実装した感想) ❖ 実装時、CORSがエラーしがちで辛い ❖ Chrome devtool, curlの用法に詳しくなる ❖ フロント、サーバ、インフラを横断するタスク ❖ 全てのエンジニアが全てのコードに責任をもつ @ガイドライン ❖ DockerとCircleCIに親しみを持てるようになった
- 34. ご清聴ありがとうございました
- 35. freepik contributions: https://jp.freepik.com/free-vector/flat-robot-character-with-different-poses-collection_1510587.htm#page=2&query=robot&position=1 https://www.freepik.com/free-vector/businessman-holding-thumb-finger-stopwatch_1311422.htm#page=1&query=quickly&position=1 https://www.freepik.com/free-vector/maintenance-concept-illustration_5421740.htm#page=1&query=maintenance&position=0 https://jp.freepik.com/free-vector/bundle-of-engineering-set-icons_5984951.htm#query=computer%20tools&position=16 https://jp.freepik.com/free-vector/the-browser-window-with-the-donate-button_4015769.htm#page=1&query=browser&position=7 https://jp.freepik.com/free-photo/work-desk-coffee-documents-and-laptop_1189547.htm#page=1&query=%E6%9B%B8%E9%A1%9E&position=13 Google2段階認証プロセス - Google https://www.google.com/landing/2step/?hl=ja phoenix - seeklogo https://seeklogo.com/vector-logo/273793/phoenix image citation
- 36. 太田 一行 ❖ Software Engineer1年目 ❖ フロントエンド ❖ 機械学習 ❖ 略歴 ❖ 2019.4 株式会社ミクシィ ❖ 2019.3 京都大学大学院 情報学研究科 知能情報学専攻 卒 ❖ 連絡先 ❖ @samayotta ❖ samayotta@gmail.com