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
500
読みやすいテストコードの書き方
Developers Summit Kansai 2024
※社名・ロゴ・サービス内容等は発表当時のものとなります。
Autify
September 18, 2024
Tweet
Share
More Decks by Autify
See All by Autify
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Autify Company Deck
autifyhq
2
44k
AIによるソフトウェア品質保証の現在地点とこれから
autifyhq
1
300
事業継続を支える自動テストの考え方(レバレジーズ様勉強会版)
autifyhq
0
400
自動テストの世界に、この5年間で起きたこと
autifyhq
11
15k
AIが変革するシステム開発
autifyhq
0
500
テスト自動化プラットフォームAutifyはどのようにAutify自身を自動テストしているか
autifyhq
1
2.8k
テスト自動化から、 開発を支える継続的テストへ
autifyhq
27
13k
テスト自動化プラットフォーム「Autify」におけるAI
autifyhq
0
3.4k
Other Decks in Technology
See All in Technology
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
1.4k
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
2
210
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
4
660
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.1k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
230
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
360
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
14
4.8k
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
160
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
120
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
520
生成AIによる情報システムへのインパクト
taka_aki
1
230
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.1k
Fireside Chat
paigeccino
37
3.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Faster Mobile Websites
deanohume
308
31k
Agile that works and the tools we love
rasmusluckow
329
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
KATA
mclloyd
31
14k
Site-Speed That Sticks
csswizardry
10
730
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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