要素の見つけ方

E2Eテストを書く際、操作したい要素を正確に見つけることが最も重要です。検証ツールを使って、効率的に要素を特定する方法を学びます。

基本的な流れ

1. 操作したい要素を見つける
2. 検証ツールで要素を選択
3. ID、クラス、属性などを確認
4. セレクタを決める
5. Playwrightのコードを書く

要素を見つける方法

方法1: 要素選択ツール（最も簡単）

1. F12 で検証ツールを開く
2. 左上の "要素を選択" アイコン（矢印）をクリック
   ショートカット: Ctrl+Shift+C (Mac: Cmd+Shift+C)
3. ページ上の要素にカーソルを合わせる
4. 要素がハイライトされる
5. クリックすると、Elementsタブでそのコードが表示される

方法2: 右クリックで直接

1. ページ上の要素を右クリック
2. "検証" を選択
3. Elementsタブで選択された状態で開く

方法3: Elementsタブで検索

1. Elementsタブを開く
2. Ctrl+F (Mac: Cmd+F) で検索ボックスを表示
3. 検索キーワードを入力:
   - ID: submit-btn
   - クラス: primary
   - テキスト: ログイン
   - 属性: data-testid="submit"
4. Enter で次の一致項目へ移動

要素の情報を確認する

要素を選択したら、以下の情報を確認します。

HTML表示

<button
  id="submit-btn"
  class="btn btn-primary"
  type="submit"
  data-testid="submit-button"
  aria-label="送信ボタン"
>
  送信
</button>

確認する項目：

項目	値	セレクタ
タグ名	button	button
ID	submit-btn	#submit-btn
クラス	btn btn-primary	.btn, .btn-primary
type属性	submit	[type="submit"]
data-testid	submit-button	[data-testid="submit-button"]
aria-label	送信ボタン	getByLabel('送信ボタン')
テキスト	送信	getByText('送信')

セレクタをコピーする

検証ツールで、セレクタを自動生成してコピーできます。

セレクタコピーの手順

1. Elementsタブで要素を選択
2. 要素を右クリック
3. "Copy" → 選択:

オプション	説明	例
Copy selector	CSSセレクタ	#login-form > div > button
Copy JS path	JavaScriptパス	document.querySelector("#login-form > div > button")
Copy XPath	XPath	//*[@id="login-form"]/div/button
Copy full XPath	完全なXPath	/html/body/div[1]/form/div[2]/button
Copy element	HTML全体	<button>...</button>

自動生成セレクタの注意点

/* 自動生成されたセレクタ */
#login-form > div:nth-child(3) > button

/* 問題点: */
- 階層に依存（DOM構造が変わると壊れる）
- nth-child()は順序に依存（要素が増減すると壊れる）

/* より良いセレクタ: */
#login-btn
[data-testid="login-button"]
button[type="submit"]

良いセレクタの選び方

優先順位

1. data-testid - テスト専用（最も安定）
2. id - 一意で変更されにくい
3. role + name - セマンティック（推奨）
4. label - フォームに最適
5. placeholder - 入力欄に便利
6. 固有の属性 - type, name など
7. クラス - 変更されやすい（非推奨）
8. 階層セレクタ - 構造に依存（最も避ける）

良い例

// 1. data-testid（最優先）
await page.getByTestId('submit-button');

// 2. id
await page.locator('#submit-btn');

// 3. role + name
await page.getByRole('button', { name: '送信' });

// 4. label（フォーム）
await page.getByLabel('メールアドレス');

// 5. placeholder
await page.getByPlaceholder('メールアドレスを入力');

// 6. 固有の属性
await page.locator('button[type="submit"]');

悪い例

// 構造に依存
await page.locator('div > div > button');

// 順序に依存
await page.locator('button:nth-child(3)');

// 自動生成されたクラス
await page.locator('.css-xyz-123');

// 曖昧すぎる
await page.locator('button');

検索機能の活用

Elementsタブ内検索

Ctrl+F (Mac: Cmd+F) で検索ボックスを表示

検索できるもの：

検索内容	例
ID	submit-btn
クラス	btn-primary
テキスト	ログイン
属性	data-testid="submit"
タグ名	button

検索のコツ

1. 部分一致で検索できる
   "submit" → "submit-btn", "submitButton" などがヒット

2. 属性で検索
   data-testid → data-testid属性を持つすべての要素

3. テキストで検索
   "送信" → "送信" というテキストを含む要素

実践例

例1: ログインフォーム

<form id="login-form">
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="メールアドレスを入力"
      data-testid="email-input"
    >
  </div>
  <div class="form-group">
    <label for="password">パスワード</label>
    <input
      type="password"
      id="password"
      name="password"
      data-testid="password-input"
    >
  </div>
  <button type="submit" data-testid="login-button">
    ログイン
  </button>
</form>

要素を見つける手順

1. メール入力欄を右クリック → "検証"
2. Elementsタブで確認:
   - id="email"
   - data-testid="email-input"
   - placeholder="メールアドレスを入力"
3. セレクタを決める（優先順位順）:

// 推奨順
await page.getByTestId('email-input');
await page.locator('#email');
await page.getByLabel('メールアドレス');
await page.getByPlaceholder('メールアドレスを入力');
await page.locator('input[type="email"]');

例2: 動的に生成される要素

<!-- ボタンクリック後に表示される -->
<div class="toast-message success" data-testid="success-toast">
  <span>ログインに成功しました</span>
  <button class="close" aria-label="閉じる">×</button>
</div>

見つけ方

1. ボタンをクリックしてメッセージを表示
2. 表示されたメッセージを右クリック → "検証"
3. Elementsタブで確認
4. セレクタを決める

// テスト
await page.click('[data-testid="login-button"]');

// メッセージを待機・確認
await page.getByTestId('success-toast').waitFor({ state: 'visible' });
await expect(page.getByTestId('success-toast')).toHaveText('ログインに成功しました');

例3: 複数の似た要素から特定の1つを選ぶ

<ul class="user-list">
  <li data-user-id="1">
    <span class="name">田中太郎</span>
    <button class="delete-btn">削除</button>
  </li>
  <li data-user-id="2">
    <span class="name">佐藤花子</span>
    <button class="delete-btn">削除</button>
  </li>
  <li data-user-id="3">
    <span class="name">鈴木一郎</span>
    <button class="delete-btn">削除</button>
  </li>
</ul>

特定のユーザーの削除ボタンを見つける

// "佐藤花子" の削除ボタンをクリック

// 方法1: テキストで親を特定してから子を取得
await page.locator('li:has-text("佐藤花子") .delete-btn').click();

// 方法2: data属性で特定
await page.locator('[data-user-id="2"] .delete-btn').click();

// 方法3: フィルタリング
await page.locator('.user-list li')
  .filter({ hasText: '佐藤花子' })
  .locator('.delete-btn')
  .click();

Console で確認する

セレクタが正しく動作するか、Consoleで確認できます。

// 要素が取得できるか確認
document.querySelector('#submit-btn')
// → <button id="submit-btn">...</button>

// 取得できない場合は null
document.querySelector('#wrong-id')
// → null

// 複数要素
document.querySelectorAll('.item')
// → NodeList(3) [li.item, li.item, li.item]

// Consoleのショートカット
$('#submit-btn')  // = document.querySelector()
$$('.item')       // = document.querySelectorAll()

トラブルシューティング

要素が見つからない

原因1: セレクタが間違っている

→ Consoleで $('#id') を実行して null かどうか確認

原因2: 要素がまだ存在しない（動的に生成）

// 要素が表示されるまで待つ
await page.waitForSelector('#element');
await page.locator('#element').waitFor({ state: 'visible' });

原因3: iframe 内の要素

// iframe内の要素を取得
const frame = page.frameLocator('iframe');
await frame.locator('#element').click();

原因4: Shadow DOM

// Shadow DOM内の要素
await page.locator('my-component').locator('#shadow-element').click();

複数の要素がマッチする

// 最初の要素
await page.locator('button').first().click();

// 最後の要素
await page.locator('button').last().click();

// n番目の要素
await page.locator('button').nth(1).click();

// フィルタリング
await page.locator('button').filter({ hasText: '送信' }).click();

まとめ

手順	方法
1. 要素を選択	右クリック → "検証"
2. 情報を確認	ID、クラス、属性を見る
3. セレクタコピー	Copy selector（参考程度）
4. 動作確認	Consoleで $('#id') を実行
5. セレクタを決定	安定したセレクタを選ぶ
6. コードを書く	Playwrightで実装

これで、Web テストの基本知識の学習は完了です。次は実際のPlaywrightテストを書いて練習しましょう！