🦁Playwrightで自動テストを作ろう！
「ボタンをクリックするテストを書いた！」…でも、どうやって成功したと判断する？ 🤔
Playwrightでは、テストが成功したことを expect() を使って確認する！ 🎯
「何をもってテストOKとするか？」は、
テストのゴール（期待する結果） を expect() でチェックすることで定義するよ。
✅ テストOKの条件を expect() で定義する
📌 例1: チケット購入が成功したか？
await expect(page).toHaveURL(/purchase-confirmation/);
👉 チケット購入後に /purchase-confirmation/ のURLになっていればテストOK！ 🎫✅
📌 例2: 購入完了のメッセージが表示されるか？
await expect(page.locator('text=購入が完了しました')).toBeVisible();
👉 「購入が完了しました」のメッセージが表示されていればテストOK！ 🦁🎟️
📌 例3: 「購入する」ボタンが押せるか？
await expect(page.locator('button:has-text("購入する")')).toBeEnabled();
👉 「購入する」ボタンが押せる状態ならテストOK！ ✅
📌 例4: 指定のエリアチケットが正しく選択されたか？
await expect(page.locator('text=パンダエリア入場券')).toHaveClass(/selected/);
👉 「パンダエリア入場券」に selected クラスが付いていればテストOK！ 🐼🎟️
✅ テストOKの条件を表す書き方（expect() の使い方）
| OKとする条件 | 書き方 (expect()) |
例 |
|---|---|---|
| URLが変わること | toHaveURL() |
await expect(page).toHaveURL(/purchase-confirmation/); |
| メッセージが表示されること | toBeVisible() |
await expect(page.locator('text=購入完了')).toBeVisible(); |
| ボタンが押せること | toBeEnabled() |
await expect(page.locator('button:has-text("購入する")')).toBeEnabled(); |
| 要素のテキストが変わること | toHaveText() |
await expect(page.locator('.status')).toHaveText('支払い完了'); |
| チェックボックスが選択されていること | toBeChecked() |
await expect(page.locator('input[type="checkbox"]')).toBeChecked(); |
| クラスがついていること | toHaveClass() |
await expect(page.locator('.ticket')).toHaveClass(/selected/); |
🎯 まとめ
✅ 「テストOKとする条件」は expect() で表す
✅ ページ遷移・メッセージ表示・ボタンが押せる などを expect() で確認する
✅ 「チケット購入が成功したこと」を表す条件を決める！ 🎫🐼🎯