Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テストでデータの確認を自動化した話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yurika Shiba
March 09, 2023
Technology
0
100
テストでデータの確認を自動化した話
Cypressでデータの確認を自動化した際の資料です。
Yurika Shiba
March 09, 2023
Tweet
Share
More Decks by Yurika Shiba
See All by Yurika Shiba
生成AIを活用したSNS運用アシスタント
sbinusan
0
890
Other Decks in Technology
See All in Technology
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
520
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
340
Context Engineeringの取り組み
nutslove
0
380
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
780
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
kawaguti
PRO
1
220
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
AWS Network Firewall Proxyを触ってみた
nagisa53
1
250
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
mikimatsumoto
0
270
~Everything as Codeを諦めない~ 後からCDK
mu7889yoon
3
530
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
410
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
360
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
200
Featured
See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
340
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
80
Embracing the Ebb and Flow
colly
88
5k
A Soul's Torment
seathinner
5
2.3k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
330
Measuring & Analyzing Core Web Vitals
bluesmoon
9
760
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
Transcript
テストでデータ の確認を自動化 した話 志葉 友梨香
きっかけ 2022年に行ったQUREO英語化
全てのページ、レッスンを英語化
全てを手動で確認... 他にもメニューやエディタ、各種ポップアップなど...
チャレンジコースも絶賛英語化中 チャレンジコースは主にアルバイトさんに翻訳チェックを依頼しています。 キャラクター名は間違っていない? コースタイトルはおかしくない? 自然なセリフになっている?
英語版データの運用方法 翻訳されたデータはスプレッドシート上で管理 ↓ アルバイトさんが直接編集 ↓ そのまま開発環境に反映
英語版データの運用方法 翻訳されたデータはスプレッドシート上で管理 ↓ アルバイトさんが直接編集 ↓ そのまま開発環境に反映 ↓ もう一度手動でチェック...?(全161レッスンある)
手動チェックはあまりにも大変 例えばデータに不備があるとペー ジが真っ白に。 どのデータがおかしいのか? 日本語版は問題ないのか?
この確認をもう少し楽にできないか?
テストを導入しよう!
フロントエンドのテスト 静的テスト 単体テスト 結合テスト E2Eテスト
フロントエンドのテスト 静的テスト 単体テスト 結合テスト E2Eテスト←今回導入したのはこれ
E2Eテストとは E2E (エンドツーエンド) テストは、アプリケーションが期待どおりに動作し、ユーザーのタ スクやプロセスの種類を問わずデータフローが適切に機能することを確認する手法で す。 具体的には、エンドユーザーの観点に立って現実世界で想定されるシナリオをシ ミュレートします。 (https://circleci.com/ja/blog/what-is-end-to-end-testing から引用)
つまり... ブラウザなどの環境で、実際のAPI、データを使い、ユーザーがサービスを利用するのと 同じようにサービス全体をテストします。
E2Eテストを導入するメリット ユーザーが使うのと同じようにシステム全体をテスト ↓ レッスン画面をテストすることでデータと動作チェックを行える ↓ さらにスクリーンショットを活用することで文法チェックも可能になる わざわざ1レッスンずつアクセスしなくてもよくなるはず
Cypressを導入 - 高速な実行速度 - 簡単なセットアップ - ユーザビリティの高さ - ブラウザ操作のシミュレーション -
豊富な機能 - ドキュメントの充実
いざ導入 導入はとても簡単 npm install cypress --save-dev 実行 npx cypress open
テストを書いてみる
テストを追加していく レッスン画面の操作のテストを追加します 1. レッスンページへアクセス → データに不備があればこの時点で失敗する 2. レッスンを進める → 操作できなければ失敗する
3. 正解画面のエディタをスクショする → 実際にアクセスしなくてもブロック内の英文をチェックできる
ここで問題が... キュレオはレッスンごとに不定期に説明スライドなどの要素があり、cypressではそのよ うな操作に対応するのが難しい ↓ 対応する方法もあるがサービスの性質上コストが高いと判断 想定していた「レッスン画面の操作のテスト」ができないことに...
データのチェックのみを行うことに
テストできるデータを選別 下記3点のテストを行うことにしました。 - viewinfo - アルゴのセリフ - 設計図の選択肢
viewinfoのテスト viewinfoとは左のような画面を 構成するjson形式のデータ。 レッスンごとに「project_id」が 割り振られ管理されている。 テスト内容 - 空でないこと - JSON形式であること
アルゴのセリフのテスト レッスン中に登場するアルゴの セリフ。 テスト内容 - マルチバイト文字が含まれてい ないこと
設計図の選択肢
設計図の選択肢 プルダウン部分。 テスト内容 - 選択肢が1つも しくは3つであ ること
実際のコードの紹介と テストの実行をしてみます
データの不備に気付けるようになった!
確認と修正が簡単になった! - 1レッスンずつページにアクセスしなくても良くなった - 前よりもデータ更新を行いやすくなった - データについては担保できている状態になった - 不備が見つかった際もテストのみで詳細に追うことができる
テスト最高! やったぜ