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
Yurika Shiba
March 09, 2023
Technology
0
93
テストでデータの確認を自動化した話
Cypressでデータの確認を自動化した際の資料です。
Yurika Shiba
March 09, 2023
Tweet
Share
More Decks by Yurika Shiba
See All by Yurika Shiba
生成AIを活用したSNS運用アシスタント
sbinusan
0
810
Other Decks in Technology
See All in Technology
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
PO初心者が考えた ”POらしさ”
nb_rady
0
210
ビギナーであり続ける/beginning
ikuodanaka
3
750
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
Operating Operator
shhnjk
1
580
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Side Projects
sachag
455
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Unsuck your backbone
ammeep
671
58k
Thoughts on Productivity
jonyablonski
69
4.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Music & Morning Musume
bryan
46
6.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
KATA
mclloyd
30
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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レッスンずつページにアクセスしなくても良くなった - 前よりもデータ更新を行いやすくなった - データについては担保できている状態になった - 不備が見つかった際もテストのみで詳細に追うことができる
テスト最高! やったぜ