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
Autify
September 18, 2024
Technology
0
21
読みやすいテストコードの書き方
Developers Summit Kansai 2024
Autify
September 18, 2024
Tweet
Share
More Decks by Autify
See All by Autify
AIが変革するシステム開発
autifyhq
0
21
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
110k
Autify Company Deck
autifyhq
1
37k
テスト自動化プラットフォームAutifyはどのようにAutify自身を自動テストしているか
autifyhq
0
2.2k
テスト自動化から、 開発を支える継続的テストへ
autifyhq
27
12k
テスト自動化プラットフォーム「Autify」におけるAI
autifyhq
0
2k
AWSコスト削減事例祭り
autifyhq
1
3.2k
Autifyの海外進出で得た世界のQA事情
autifyhq
0
760
JaSST'22 Tokyo 未来の開発組織でQAが担う役割とは
autifyhq
0
570
Other Decks in Technology
See All in Technology
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
190
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.5k
GC24 Recap: Interface Internals
task4233
0
280
Technical Writing Meetup vol.35
soracom
PRO
2
130
公共交通データとアプリ制作 - Mini Tokyo 3D の初期制作過程を振り返る
nagix
1
120
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
自作Cコンパイラ 8時間の奮闘
soukouki
0
860
再考 アクターモデル/ reconsider actor model
ytake
0
380
株式会社EventHub・エンジニア採用資料
eventhub
0
3k
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
8
1.5k
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
160
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
260
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
How STYLIGHT went responsive
nonsquared
93
5.1k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
140
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Rails Girls Zürich Keynote
gr2m
93
13k
Transcript
AI powered Quality Engineering Platform 2024.06.20 「テスト⾃動化実践ガイド」著者直伝! 読みやすいE2Eテストコードの書き⽅ 末村 拓也
Developer Summit 2024 KANSAI 2024.9.18 AI powered Quality Engineering Platform #devsumi #devsumiB
末村 拓也 - Quality Evangelist at Autify - 倉庫内軽作業→Web開発者→QAエンジニ ア→テクニカルサポート→マーケター
- 品質・テスト周りの議論が好き 自己紹介 #devsumi #devsumiB
テスト自動化実践ガイド - テストって何なん - どうやるん というような話を350ページで長々と説明 本が出ました #devsumi #devsumiB
書籍の中でも特に反響の大きかった 第2部第9章「テストコードに意図を込める」 を解説 今日話すこと #devsumi #devsumiB
コメントに頼らず、テストコード自身が十分 説明的 である • コンテキスト(文脈)を明示する • 状態を表す • セマンティクスを明示する 「意図を込める」とは
#devsumi #devsumiB
コンテキストを明示する #devsumi #devsumiB
コンテキストを明示する 管理者 - 「商品追加」をクリック 一般 - 「Tシャツ」をカートに入れる - 「カートを見る」をクリック 商品追加画面
- 商品名「Tシャツ」を入力 - 「追加」をクリック カート画面 - 「2,200円」と表示されていることを確認 - 「購入」をクリック #devsumi #devsumiB
// 店舗スタッフとしてログインする I.amOnPage("/"); I.click("ログインする"); I.fillField("ユーザー名", "admin"); I.fillField("パスワード", "amin"); I.click("ログイン") //
この後の処理は、暗黙に「店舗スタッフとしてログイン後」を期待されている I.click("スタッフ用マイページ") コンテキストを明示する (1) ログイン状態 #devsumi #devsumiB
I.amStoreStaff( (I) => { // ... ここに店舗スタッフとして実行したい処理を書く I.click("スタッフ用マイページ") }) コンテキストを明示する
(1) ログイン状態 #devsumi #devsumiB
// ここから商品一覧ページ I.amOnPage("/items"); const itemContainer = locate("tr").withText("トマト") I.click("商品を編集", itemContainer); //
ここから商品編集ページ I.fillField("商品名", "プチトマト"); I.click("変更"); // ここまで商品編集ページ // ここから商品一覧ページ コンテキストを明示する (2) ページ遷移 #devsumi #devsumiB
I.shouldBeOnItemListPage(I => { const itemContainer = locate('tr').withText("トマト") I.click("商品を編集", itemContainer(itemName)); I.shouldBeOnItemDetailPage(I
=> { I.fillField("商品名", "プチトマト"); I.click("変更"); }) }) コンテキストを明示する (2) ページ遷移 #devsumi #devsumiB
状態を表す #devsumi #devsumiB
E2Eテストはあらゆるものを手続き的に書けて「しまう」 • テストデータの準備 • 前提条件 • 事後条件 • 実行後処理 これらは手続きではなく、満たすべき状態
状態を表す #devsumi #devsumiB
// テスト用の商品を追加する I.click("商品を追加する"); const itemName = `牛ハラミ弁当-テス ト-${utils.now.format("YYYYMMDDHHmmss")}`; I.fillField("商品名", itemName);
I.fillField("商品説明", "テスト用の商品です"); I.fillField("価格", "500"); I.click("追加"); 状態を表す - 手続き的に書かれたデータ準備の例 #devsumi #devsumiB
// テスト用の商品があるという前提条件が重要であり、手順はどうでもいい const itemName = await I.haveItem() 状態を表す - 「〜を持っている」という状態を表現する
#devsumi #devsumiB
内部的には冪等性(何度実行しても同じ状態になる性質)に気をつける • 冪等なAPIを叩いてデータを作成する • 毎回ユニークな名前のデータを作る 状態を表す - 実装 #devsumi #devsumiB
セマンティクスを明示する #devsumi #devsumiB
セマンティクス = 要素が持つ 意味 テスト対象の内部属性ではなく、文言などのアクセシブルな属性を用いる ❌ 内部属性 • id •
class セマンティクスを意識する #devsumi #devsumiB ⭕ アクセシブルな属性 • 文言 • altテキスト • aria-role
// CodeceptJSは標準で文言のみで要素探索できる I.fillField("注文数", "10"); I.click("送信"); // Playwrightなどでは getByRole などを中心に使う await
page.getByLabel('注文数').fill('10'); await page.getByRole('button', { name: '送信' }).click(); セマンティクスを意識したロケーター #devsumi #devsumiB
まとめ • 手順が連続する状況では コンテキスト を明示する • 前提条件の準備手順は テストコードから隠蔽して 状態 だけを表すようにする
• セマンティクス を意識したロケーターで ユーザー目線で意味のある テストコードにする #devsumi #devsumiB
Enjoy Testing! おわり #devsumi #devsumiB