🦁Playwrightで自動テストを作ろう！

「ボタンをクリックするテストを書いた！」…でも、どうやって成功したと判断する？ 🤔

Playwrightでは、テストが成功したことを expect() を使って確認する！ 🎯

「何をもってテストOKとするか？」は、

テストのゴール（期待する結果） を expect() でチェックすることで定義するよ。

✅ テストOKの条件を `expect()` で定義する

await expect(page).toHaveURL(/purchase-confirmation/);

👉 チケット購入後に /purchase-confirmation/ のURLになっていればテストOK！ 🎫✅

await expect(page.locator('text=購入が完了しました')).toBeVisible();

👉 「購入が完了しました」のメッセージが表示されていればテストOK！ 🦁🎟️

await expect(page.locator('button:has-text("購入する")')).toBeEnabled();

👉 「購入する」ボタンが押せる状態ならテストOK！ ✅

await expect(page.locator('text=パンダエリア入場券')).toHaveClass(/selected/);

👉 「パンダエリア入場券」に selected クラスが付いていればテストOK！ 🐼🎟️

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() で確認する

✅ 「チケット購入が成功したこと」を表す条件を決める！ 🎫🐼🎯