自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

Elementsタブの使い方

Elementsタブの使い方

Elementsタブ（Firefoxでは「インスペクター」）は、ページのHTML構造とCSSスタイルを確認・編集できるタブです。E2Eテストでセレクタを調べる際に最もよく使います。

Elementsタブとは？

ページのDOMツリーを視覚的に表示し、要素の詳細を確認できます。

左側: DOM ツリー（HTML構造）
右側: スタイル、属性、計算済みスタイルなど
💡 E2Eテストでの使い方
テストしたい要素を見つけて、そのID、クラス、属性などを確認し、セレクタを書くために使います。

基本的な使い方

1. 要素を選択する

方法1: 要素選択ツール

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

方法2: 右クリックから

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

方法3: DOMツリーから探す

1. Elementsタブで<html>や<body>を展開
2. ツリーを辿って要素を見つける

2. DOM構造を確認する

選択した要素のHTMLコードが表示されます。

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

表示される情報：

  • タグ名: button
  • ID: id="submit-btn"
  • クラス: class="btn btn-primary"
  • 属性: type="submit", data-testid="submit"
  • 内容: 送信
🎯 セレクタの決め方
この情報から、以下のセレクタが使えます：
  • #submit-btn (ID)
  • .btn (クラス)
  • [data-testid="submit"] (属性)
  • button[type="submit"] (タグ+属性)

3. 親要素・子要素を確認

DOMツリーを展開・折りたたんで階層構造を確認できます。

<form id="login-form">                    <!-- 親 -->
  <div class="form-group">                <!-- 子 -->
    <label for="email">メール</label>    <!-- 孫 -->
    <input type="email" id="email">      <!-- 孫 -->
  </div>
</form>
  • ▶ をクリック: 子要素を展開
  • ▼ をクリック: 子要素を折りたたむ

スタイルの確認

右側のパネルで、選択した要素のCSSを確認できます。

Stylesパネル

適用されているCSSスタイルが表示されます。

/* 要素に適用されているスタイル */
.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
}

element.style {
  /* インラインスタイル */
  display: none;
}

スタイルの優先順位

上から下へ、優先順位の高い順に表示されます：

  1. インラインスタイル（style="..."）
  2. IDセレクタ（#id）
  3. クラスセレクタ（.class）
  4. タグセレクタ（div）

打ち消し線が引かれているスタイルは、上書きされています。

Computedパネル

最終的に適用されている計算済みスタイルが表示されます。

width: 200px
height: 40px
padding: 10px
margin: 0px

属性の確認

Attributesの確認方法

選択した要素のHTML表示で、すべての属性が見られます：

<input
  type="email"
  id="email-input"
  name="email"
  class="form-control"
  placeholder="メールアドレスを入力"
  required
  data-testid="email-field"
>

主要な属性

属性 説明 テストでの使用
id 一意の識別子 #email-input
class CSSクラス .form-control
name フォーム項目名 input[name="email"]
type 入力タイプ input[type="email"]
data-testid テスト用ID [data-testid="email-field"]
aria-label アクセシビリティ getByLabel() で使える
placeholder プレースホルダー getByPlaceholder() で使える

便利な機能

要素の編集（一時的）

Elementsタブで要素を編集できます（リロードすると元に戻る）。

HTML を編集

1. 要素を右クリック
2. "Edit as HTML" を選択
3. HTMLを直接編集
4. Enter で確定

属性を編集

1. 属性をダブルクリック
2. 値を変更
3. Enter で確定

要素を削除

1. 要素を選択
2. Delete キーを押す
   または右クリック → "Delete element"
⚠️ 注意
これらの変更は一時的です。ページをリロードすると元に戻ります。本番サイトには影響しません。

セレクタのコピー

要素のセレクタを自動生成してコピーできます。

1. 要素を右クリック
2. "Copy" → 選択:
   - "Copy selector" - CSSセレクタ
   - "Copy JS path" - JavaScriptパス
   - "Copy XPath" - XPath
   - "Copy element" - HTML

例：

// Copy selector の結果
'#login-form > div.form-group > input'

// Copy XPath の結果
'//*[@id="login-form"]/div[1]/input'

要素の状態を変更

ホバー、フォーカスなどの状態を強制的に設定できます。

1. 要素を選択
2. Stylesパネルの ":hov" をクリック
3. チェックボックスで状態を選択:
   - :hover - ホバー状態
   - :active - アクティブ状態
   - :focus - フォーカス状態
   - :visited - 訪問済み（リンク）

DOM Breakpoints

要素が変更されたときに処理を一時停止できます。

1. 要素を右クリック
2. "Break on" → 選択:
   - subtree modifications - 子要素の変更
   - attribute modifications - 属性の変更
   - node removal - 要素の削除

実践例

ログインフォームの調査

<form id="login-form" class="auth-form" method="post">
  <div class="form-group">
    <label for="username">ユーザー名</label>
    <input
      type="text"
      id="username"
      name="username"
      class="form-control"
      placeholder="ユーザー名を入力"
      data-testid="username-input"
    >
  </div>
  <div class="form-group">
    <label for="password">パスワード</label>
    <input
      type="password"
      id="password"
      name="password"
      class="form-control"
      data-testid="password-input"
    >
  </div>
  <button type="submit" class="btn btn-primary" data-testid="login-button">
    ログイン
  </button>
</form>

Elementsタブで確認できること：

  1. フォーム全体: #login-form
  2. ユーザー名入力:
    • ID: #username
    • data-testid: [data-testid="username-input"]
    • プレースホルダー: getByPlaceholder('ユーザー名を入力')
  3. パスワード入力:
    • ID: #password
    • data-testid: [data-testid="password-input"]
  4. 送信ボタン:
    • セレクタ: button[type="submit"]
    • data-testid: [data-testid="login-button"]
    • テキスト: getByText('ログイン')

Playwrightテストコード

test('ログイン', async ({ page }) => {
  await page.goto('/login');

  // Elementsタブで調べた情報を使う
  await page.locator('#username').fill('testuser');
  await page.locator('#password').fill('password123');
  await page.locator('[data-testid="login-button"]').click();

  // または推奨セレクタ
  await page.getByTestId('username-input').fill('testuser');
  await page.getByTestId('password-input').fill('password123');
  await page.getByTestId('login-button').click();
});

検索機能

Elementsタブ内で要素を検索できます。

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

まとめ

機能 用途
要素選択ツール ページ上の要素をクリックして調査
DOM ツリー HTML構造を確認
Styles パネル CSSスタイルを確認
セレクタコピー セレクタを自動生成
検索 要素をキーワードで検索
🎯 E2Eテスト作成の流れ
  1. ページで操作したい要素を右クリック → "検証"
  2. Elementsタブで ID、クラス、属性を確認
  3. 適切なセレクタを決める（ID > data-testid > クラス）
  4. Playwrightコードを書く

次のチャプターでは、Consoleタブの使い方を学びます。

目次に戻る