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
tt
November 21, 2023
0
59
戦略的なフロントエンドテストを実施するために
tt
November 21, 2023
Tweet
Share
More Decks by tt
See All by tt
そろそろGraphQLの話をしよう
tatsushitoji
1
260
Our favorite Dependency updates has been deprived
tatsushitoji
2
420
try Undux but...
tatsushitoji
0
250
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
A better future with KSS
kneath
238
17k
Fireside Chat
paigeccino
34
3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Automating Front-end Workflow
addyosmani
1366
200k
Docker and Python
trallard
40
3.1k
Six Lessons from altMBA
skipperchong
27
3.5k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Transcript
戦略的なフロントエンドテストを実施するために 1
今日お話ししたいこと 書くことが目的のテストをやめる QA チームとのコラボレーション フロントエンドのテストをみんなのものにする 戦略的なフロントエンドテストを実施するために 2
今日お話ししないこと フロントエンドのコンポーネント設計 フロントエンドのテストの具体的な書き方 フロントエンドのテスト手法の区分け フロントエンドのテスト手法の歴史 戦略的なフロントエンドテストを実施するために 3
前提 アジャイル開発を行っている アジャイルのフレームワークであるスクラムを採用している 社内に QA チームが存在する 今後もチームで成果を発揮していきたい 戦略的なフロントエンドテストを実施するために 4
書くことが目的のテストをやめる 戦略的なフロントエンドテストを実施するために 5
書くことが目的になっていませんか? 雰囲気でテストを書いている PR で「テストが欲しい」とコメントがあった テストカバレッジを上げるため(下げないため) 戦略的なフロントエンドテストを実施するために 6
テストの目的 品質の維持・向上 プログラムの仕様の明確化 バグの防止 戦略的なフロントエンドテストを実施するために 7
テストの目的 安心してリリースを迎えられること 戦略的なフロントエンドテストを実施するために 8
安心してリリースを迎えられていますか? 戦略的なフロントエンドテストを実施するために 9
QA チームが見てくれているから安心 (開発者) 戦略的なフロントエンドテストを実施するために 10
QA チームが見てくれているから安心 (QA) 戦略的なフロントエンドテストを実施するために 11
QA チームですべての観点をテストするとコストが高い プロダクトが提供したい価値のコアは必ずカバーするが、コアな部分って…? アプリケーションの特定の状態などによる細かな UI の表示分岐などが多いと… このバージョンでは A となるが、このバージョンでは A'となる
戦略的なフロントエンドテストを実施するために 12
QA チームとのコラボレーション 戦略的なフロントエンドテストを実施するために 13
コラボレーション 機能実装後に初めてテストを考えるのではなく、作業着手前に どういうプログラムコードが 必要で、どういうテスト手法が効果的か についての共通認識をフロントエンドと QA で作り ましょう 戦略的なフロントエンドテストを実施するために 14
多くの場合フロントエンドを介して価値提供する ユーザーが直接触る画面はフロントエンドエンジニアが担当しているが、 プロダクトはみんなのもの です 公開 API などはその限りではないかもしれません 戦略的なフロントエンドテストを実施するために 15
フロントエンドのテストをみんなのものにする 戦略的なフロントエンドテストを実施するために 16
コラボレーション 機能実装後に初めてテストを考えるのではなく、作業着手前に どういうプログラムコードが 必要で、どういうテスト手法が効果的か についての共通認識を関係者全員で作りましょう 戦略的なフロントエンドテストを実施するために 17
なぜ関係者全員か PO は意思決定のため必要 属人性排除 集合知定理で正解に近い推測をする ユーザーストーリーのスキルレベルを高める 参照: https://scrapbox.io/arpla/集合知定理 戦略的なフロントエンドテストを実施するために 18
ユーザーストーリーのスキルレベル Beginner Intermediate Advanced 出典: https://www.agilealliance.org/glossary/user-stories/ 戦略的なフロントエンドテストを実施するために 19
Intermediate を目指して スクラムで開発しているチームとして、ユーザーストーリーのスキルレベル上げていきたい ですよね? able to express the acceptance criteria
for a user story in terms that will be directly usable as an automated acceptance test 自動受け入れテストとして直接使用できる用語でユーザーストーリーの受け入れ基準を 表現できる 戦略的なフロントエンドテストを実施するために 20
正解に近いテストが羅列されると、 この箇所はこのテスト手法でテストしておきましょう この受け入れ基準を満たすにはコンポーネント単位でテストがあるとデバッグしやすい し、そこで担保しよう この箇所は自動テストでは確認が難しく人間の耳目が必要なので、QA チームにお願いし ましょう など、共通認識が作れます 戦略的なフロントエンドテストを実施するために 21
ユーザーストーリーより小さいタスクの場合でも 完成の定義において、同様のコラボレーションを行う 関係者で集まる 完成の定義のテスト項目に自動受け入れテストとして直接使用できる項目を羅列する 戦略的なフロントエンドテストを実施するために 22
完成の定義とは? 完成の定義とは、プロダクトの品質基準を満たすインクリメントの状態を⽰した正式な 記述である。 プロダクトバックログアイテムが完成の定義を満たしたときにインクリメントが誕⽣す る。 インクリメント インクリメントは、プロダクトゴールに向けた具体的な踏み⽯である。インクリメント はこれまでのすべてのインクリメントに追加する。また、すべてのインクリメントが連 携して機能することを保証するために、徹底的に検証する必要がある。価値を提供する には、インクリメントを利⽤可能にしなければならない。
出典: https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf 戦略的なフロントエンドテストを実施するために 23
完成の定義とは? すべて満たしたらリリースができる状態を可視化したもの テストの実行範囲、ドキュメント作成などすべてを含む 戦略的なフロントエンドテストを実施するために 24
まとめ テストをなんとなくで書かない テスト観点には集合知定理を用いる ユーザーストーリーのレベルを上げてより良いスクラム開発をしましょう 戦略的なフロントエンドテストを実施するために 25