テストでデータの確認を自動化した話

Cypressでデータの確認を自動化した際の資料です。

Transcript

1. テストでデータ の確認を自動化 した話 志葉 友梨香
2. きっかけ 2022年に行ったQUREO英語化
3. 全てのページ、レッスンを英語化
4. 全てを手動で確認... 他にもメニューやエディタ、各種ポップアップなど...
5. チャレンジコースも絶賛英語化中 チャレンジコースは主にアルバイトさんに翻訳チェックを依頼しています。 キャラクター名は間違っていない？ コースタイトルはおかしくない？ 自然なセリフになっている？
6. 英語版データの運用方法 翻訳されたデータはスプレッドシート上で管理 ↓ アルバイトさんが直接編集 ↓ そのまま開発環境に反映
7. 英語版データの運用方法 翻訳されたデータはスプレッドシート上で管理 ↓ アルバイトさんが直接編集 ↓ そのまま開発環境に反映 ↓ もう一度手動でチェック...？（全161レッスンある）
8. 手動チェックはあまりにも大変 例えばデータに不備があるとペー ジが真っ白に。 どのデータがおかしいのか？ 日本語版は問題ないのか？
9. この確認をもう少し楽にできないか？
10. テストを導入しよう！
11. フロントエンドのテスト 静的テスト 単体テスト 結合テスト E2Eテスト
12. フロントエンドのテスト 静的テスト 単体テスト 結合テスト E2Eテスト←今回導入したのはこれ
13. E2Eテストとは E2E (エンドツーエンド) テストは、アプリケーションが期待どおりに動作し、ユーザーのタ スクやプロセスの種類を問わずデータフローが適切に機能することを確認する手法で す。 具体的には、エンドユーザーの観点に立って現実世界で想定されるシナリオをシ ミュレートします。 （https://circleci.com/ja/blog/what-is-end-to-end-testing から引用） つまり... ブラウザなどの環境で、実際のAPI、データを使い、ユーザーがサービスを利用するのと 同じようにサービス全体をテストします。
14. E2Eテストを導入するメリット ユーザーが使うのと同じようにシステム全体をテスト ↓ レッスン画面をテストすることでデータと動作チェックを行える ↓ さらにスクリーンショットを活用することで文法チェックも可能になる わざわざ1レッスンずつアクセスしなくてもよくなるはず
15. Cypressを導入 - 高速な実行速度 - 簡単なセットアップ - ユーザビリティの高さ - ブラウザ操作のシミュレーション - 豊富な機能 - ドキュメントの充実
16. いざ導入 導入はとても簡単 npm install cypress --save-dev 実行 npx cypress open
17. テストを書いてみる
18. テストを追加していく レッスン画面の操作のテストを追加します 1. レッスンページへアクセス → データに不備があればこの時点で失敗する 2. レッスンを進める → 操作できなければ失敗する 3. 正解画面のエディタをスクショする → 実際にアクセスしなくてもブロック内の英文をチェックできる
19. ここで問題が... キュレオはレッスンごとに不定期に説明スライドなどの要素があり、cypressではそのよ うな操作に対応するのが難しい ↓ 対応する方法もあるがサービスの性質上コストが高いと判断 想定していた「レッスン画面の操作のテスト」ができないことに...
20. データのチェックのみを行うことに
21. テストできるデータを選別 下記3点のテストを行うことにしました。 - viewinfo - アルゴのセリフ - 設計図の選択肢
22. viewinfoのテスト viewinfoとは左のような画面を 構成するjson形式のデータ。 レッスンごとに「project_id」が 割り振られ管理されている。 テスト内容 - 空でないこと - JSON形式であること
23. アルゴのセリフのテスト レッスン中に登場するアルゴの セリフ。 テスト内容 - マルチバイト文字が含まれてい ないこと
24. 設計図の選択肢
25. 設計図の選択肢 プルダウン部分。 テスト内容 - 選択肢が1つも しくは3つであ ること
26. 実際のコードの紹介と テストの実行をしてみます
27. データの不備に気付けるようになった！
28. 確認と修正が簡単になった！ - 1レッスンずつページにアクセスしなくても良くなった - 前よりもデータ更新を行いやすくなった - データについては担保できている状態になった - 不備が見つかった際もテストのみで詳細に追うことができる
29. テスト最高！ やったぜ