https://scramble.connpass.com/event/157710/

1. Nuxt.js SSRにおけるE2Eテストの実装
Scramble Tech#1
株式会社 ミクシィ
太田 一行

2. 構成
Nuxt.js SSRにおけるE2Eテストの実装
1. あらすじ
2. 背景
3. 実装例と運用してみた結果
4. 議論と今後の見通し
5. [image citations]
6. [self introduction]

3. あらすじ

4. Nuxt.js SSRにおけるE2Eテストの実装
E2Eテストの実装 安定したQAに自動化で貢献

5. Nuxt.js SSRにおけるE2Eテストの実装
使用する道具 いくつかの道具を組み合わせ

7. Nuxt.js SSRにおけるE2Eテストの実装
Our Application
Nuxt.jsで作成されたフロント
& Phoenixで作成されたサーバ

8. Nuxt.js SSRにおけるE2Eテストの実装
…with SSR
time-to-contentの改善が見込
める。ビジネス要件によって
は考えたい選択肢。

9. 背景

10. Nuxt.js SSRにおけるE2Eテストの実装
E2Eテスト
実装の目的
❖ 機械的に確認できる部分を自動化し、
QAの省力化に貢献すること
❖ かつ、単体テストやAPIテストには
カバーできない項目が存在する

11. E2E テストについて
❖ ソフトウェアテストの一種
1. 自動でブラウザを操作
2. 作成したシナリオを実行
3. スクリーンショット(SS)撮影等
4. 期待した描画結果か調べる

12. E2E テストの役割
❖ チームでは3つを定義した
1.デザイン崩れの検出
2.デグレーションの検出
3.ページ遷移を保証

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