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
PO初心者が考えた ”POらしさ”
nb_rady
0
210
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
Connect 100+を支える技術
kanyamaguc
0
200
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
BBQ
matthewcrist
89
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
The Cult of Friendly URLs
andyhume
79
6.5k
The Language of Interfaces
destraynor
158
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Music & Morning Musume
bryan
46
6.6k
Being A Developer After 40
akosma
90
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
329
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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レッスンずつページにアクセスしなくても良くなった - 前よりもデータ更新を行いやすくなった - データについては担保できている状態になった - 不備が見つかった際もテストのみで詳細に追うことができる
テスト最高! やったぜ