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
430
読みやすいテストコードの書き方
Developers Summit Kansai 2024
※社名・ロゴ・サービス内容等は発表当時のものとなります。
Autify
September 18, 2024
Tweet
Share
More Decks by Autify
See All by Autify
事業継続を支える自動テストの考え方(レバレジーズ様勉強会版)
autifyhq
0
330
自動テストの世界に、この5年間で起きたこと
autifyhq
10
13k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Autify Company Deck
autifyhq
2
43k
AIが変革するシステム開発
autifyhq
0
430
テスト自動化プラットフォームAutifyはどのようにAutify自身を自動テストしているか
autifyhq
1
2.8k
テスト自動化から、 開発を支える継続的テストへ
autifyhq
27
13k
テスト自動化プラットフォーム「Autify」におけるAI
autifyhq
0
3.1k
AWSコスト削減事例祭り
autifyhq
1
3.7k
Other Decks in Technology
See All in Technology
OSMnx Galleryの紹介
mopinfish
0
150
Microsoft Season of Agent AI エージェントの使用開始
takas0522
0
130
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
GitHub Coding Agent 概要
kkamegawa
1
1.5k
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
130
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
10
5.1k
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
taiseiue
0
150
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
130
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
350
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
A designer walks into a library…
pauljervisheath
205
24k
Docker and Python
trallard
44
3.4k
KATA
mclloyd
29
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
188
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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