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