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
420
読みやすいテストコードの書き方
Developers Summit Kansai 2024
※社名・ロゴ・サービス内容等は発表当時のものとなります。
Autify
September 18, 2024
Tweet
Share
More Decks by Autify
See All by Autify
事業継続を支える自動テストの考え方(レバレジーズ様勉強会版)
autifyhq
0
280
自動テストの世界に、この5年間で起きたこと
autifyhq
10
13k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Autify Company Deck
autifyhq
2
43k
AIが変革するシステム開発
autifyhq
0
410
テスト自動化プラットフォームAutifyはどのようにAutify自身を自動テストしているか
autifyhq
1
2.7k
テスト自動化から、 開発を支える継続的テストへ
autifyhq
27
13k
テスト自動化プラットフォーム「Autify」におけるAI
autifyhq
0
3.1k
AWSコスト削減事例祭り
autifyhq
1
3.6k
Other Decks in Technology
See All in Technology
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
4
400
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
150
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
pfn
PRO
1
130
AWSを利用する上で知っておきたい名前解決の話
nagisa53
6
790
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
7
63k
genspark_presentation.pdf
haruki_uiru
1
250
dbtとリバースETLでデータ連携の複雑さに立ち向かう
morookacube
0
170
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
quiver
1
970
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
380
Google Cloud Next 2025 Recap マーケティング施策の運用及び開発を支援するAIの活用 / Use of AI to support operation and development of marketing campaign
atsushiyoshikawa
0
150
OPENLOGI Company Profile
hr01
0
64k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
5.5k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for humans not robots
tammielis
253
25k
Code Review Best Practice
trishagee
68
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
700
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Making Projects Easy
brettharned
116
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
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