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
540
読みやすいテストコードの書き方
Developers Summit Kansai 2024
※社名・ロゴ・サービス内容等は発表当時のものとなります。
Autify
September 18, 2024
Tweet
Share
More Decks by Autify
See All by Autify
ベストプラクティスを適用するとシナリオはどう変化するのか
autifyhq
0
33
Pro Serviceチームの身近なAI活用事例 (JaSST'25 Hokkaido スポンサーセッション)
autifyhq
0
14
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
140k
Autify Company Deck
autifyhq
2
46k
AIによるソフトウェア品質保証の現在地点とこれから
autifyhq
1
370
事業継続を支える自動テストの考え方(レバレジーズ様勉強会版)
autifyhq
0
440
自動テストの世界に、この5年間で起きたこと
autifyhq
11
15k
AIが変革するシステム開発
autifyhq
0
550
テスト自動化プラットフォームAutifyはどのようにAutify自身を自動テストしているか
autifyhq
1
2.9k
Other Decks in Technology
See All in Technology
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
580
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
270
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
340
多野優介
tanoyusuke
1
410
o11yで育てる、強い内製開発組織
_awache
3
120
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
490
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
870
データエンジニアがこの先生きのこるには...?
10xinc
0
440
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Side Projects
sachag
455
43k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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