📌Playwrightで自動テストを作ろう！
「ボタンをクリックするコードを書こう！」…ん？ セレクターってなに？ 🤯
セレクター（Selector） とは、
PlaywrightがWebページ上の特定の要素（ボタン・テキスト・入力欄など）を探すための指定方法！
例えば、動物園のチケット購入ページで「購入する」ボタンをクリックする場合：
await page.click('button:has-text("購入する")');
この "button:has-text("購入する")" がセレクター で、
Playwrightは 「購入する」ボタンを探してクリックする という動作をする。
✅ セレクターの種類（どれを使うべき？）
セレクターにはいくつかの種類がある。 状況によって適切なセレクターを選ぶのが重要！
1️⃣ getByRole() → 一番推奨！
👉 ボタン・入力欄・リンクなどの「役割」で探す
await page.getByRole('button', { name: '購入する' }).click();
✅ メリット: ユーザーが認識する ボタンの名前 で指定できるので、UI変更に強い！
2️⃣ locator() → 汎用的なセレクター
👉 特定のテキストを含む要素を探す
await page.locator('text=購入する').click();
✅ メリット: text=◯◯ を使うと、表示されている テキスト を基準に選択できる。
❌ デメリット: ページの構造が変わると影響を受けやすい。
3️⃣ CSSセレクター → querySelector() と同じ書き方
👉 HTMLのクラス・ID を使って指定
await page.click('.ticket-button'); // クラスで指定
await page.click('#confirm-purchase'); // IDで指定
✅ メリット: ボタンの名前が変わっても動く
❌ デメリット: HTML構造が変わると壊れる。
4️⃣ XPath → できるだけ使わない！
👉 HTMLツリーの階層をたどる方法（複雑）
await page.click('//button[contains(text(), "購入する")]');
✅ メリット: 非常に細かく要素を特定できる。
❌ デメリット: 可読性が低く、メンテしづらい。（使うのは最後の手段！）
✅ どのセレクターを使うべき？
| セレクター種類 | 例 | いつ使うべき？ | メリット | デメリット |
|---|---|---|---|---|
getByRole() |
getByRole('button', { name: '購入する' }) |
ボタン・入力欄・リンク | UI変更に強い | たまに動かない |
locator() |
locator('text=購入する') |
特定のテキスト要素を探す | 簡単に指定できる | UI変更に弱い |
| CSSセレクター | .ticket-button |
クラスやIDがあるとき | 名前変更に強い | HTML構造が変わると壊れる |
| XPath | //button[contains(text(), "購入する")] |
最終手段（複雑な要素） | どんな要素でも取れる | コードが読みにくい |
✅ Playwrightでセレクターを調べる方法
👉 npx playwright codegen を使うと、適切なセレクターを簡単に取得できる！
📌 セレクターを調べる手順
1️⃣ ターミナルで以下を実行（動物園のチケット購入ページを開く）
npx playwright codegen https://zoo-tickets.com/purchase
2️⃣ ブラウザが開くので、ボタンをクリック
3️⃣ 自動生成されたコードを確認！
page.getByRole(...)page.locator(...)-
page.click(...)などが出る！
4️⃣ セレクターをコピーして、テストコードに使う！
🎯 まとめ
✅ セレクターとは？ → Playwrightが要素を探すための指定方法
✅ 一番推奨 → getByRole() （ボタンや入力欄を簡単に探せる）
✅ npx playwright codegen を使うと、セレクターを自動取得できる！