HTML入門｜Selenium・Playwrightで使うタグ・属性・ロケーターの基礎を解説

Selenium・Playwright でテスト自動化を始めると、「要素が取れない」「ロケーターの書き方がわからない」と壁にぶつかることがあります。その根本的な原因の多くは、HTML の読み方を知らないことにあります。本記事では、QA エンジニアがテスト自動化に必要な HTML の基礎知識を、実例つきでわかりやすく解説します。

📌 この記事の対象読者

テスト自動化のコードを書くとき、必ず登場するのが「要素の特定」です。Selenium なら driver.find_element(By.ID, "email")、Playwright なら page.get_by_test_id("login-btn") のように書きますが、この "email" や "login-btn" という値はどこから来るのでしょうか？

答えは HTML の中にあります。テスト自動化ツールは HTML 要素に付けられた属性を手がかりに要素を見つけます。そのため「HTML が読める」かどうかが、テスト自動化の習得速度に直結します。Web 開発の知識がなくても大丈夫です。QA として必要な最低限の知識だけを、実際の例で確認していきましょう。

HTML の基本構造：タグと属性とは何か

HTML はウェブページの骨格を作る言語です。テスト自動化ツールが「ボタンを押す」「入力欄に文字を入れる」といった操作をするとき、その要素を HTML の属性を手がかりに見つけます。DevTools でどの属性を確認すればよいかは Chrome DevTools 入門 も参考にしてください。

タグの基本

HTML は タグ（<〜>）と呼ばれる部品の組み合わせで構成されています。ほとんどのタグは「開始タグ」と「終了タグ」がペアになっています。

<button>ログイン</button>

<p>この文章が段落です。</p>


<input type="text">

属性とは何か

タグには属性を追加できます。属性は「その要素の追加情報」を表し、属性名="値" の形で開始タグの中に書きます。

<input type="email" id="user-email" name="email" placeholder="メールアドレス">

この属性の値こそが、テスト自動化でロケーターを書くときの手がかりになります。

テスト自動化で重要な属性 5 選

HTML にはたくさんの属性がありますが、テスト自動化で使う属性は限られています。以下の5つを押さえれば、ほとんどのロケーターを書けるようになります。

① id 属性：一番信頼できる識別子

id はページ内で1つしか使えないという決まりがあるため、ロケーターとして最も安定しています。

<input id="login-email" type="email">
<button id="login-btn">ログイン</button>

# Selenium
driver.find_element(By.ID, "login-email")
driver.find_element(By.CSS_SELECTOR, "#login-btn")

# Playwright
page.locator("#login-email")
page.locator("#login-btn")

② data-testid 属性：テスト専用の最強識別子

data-testid はテストのために開発者が意図的に追加する属性です。デザイン変更や機能改修の影響を受けにくく、テスト自動化で最も壊れにくいロケーターとして推奨されています。

<button data-testid="submit-button" class="btn btn-primary btn-lg">
  送信する
</button>

# Selenium（CSS セレクターで取得）
driver.find_element(By.CSS_SELECTOR, "[data-testid='submit-button']")

# Playwright（専用メソッドあり）
page.get_by_test_id("submit-button")

③ class 属性：便利だが壊れやすい

class はスタイル（見た目）を当てるためのグループ名です。複数の要素に同じ class をつけられるため、ロケーターとしては不安定になりやすいという欠点があります。

<button class="btn btn-primary btn-lg disabled">送信する</button>
                         ↑ デザイン変更・状態変化で変わりやすい


<button class="MuiButton-root css-1abcde">送信</button>   <!-- Material UI -->
<button class="chakra-button">送信</button>               <!-- Chakra UI -->
<button class="Button_btn__abc123">送信</button>          <!-- CSS Modules -->
                                     ↑ ビルドのたびに変わる可能性あり

テスト自動化でよく使うフォーム要素

Web アプリのテストで最も多く登場するのがフォーム要素です。ログイン・登録・検索などのほとんどの操作がフォームを通じて行われます。

フォーム要素とロケーター対応表

実践：ログインフォームの HTML を読んでロケーターを書く

実際の HTML を読んでロケーターを書く流れを確認しましょう。

<form id="login-form">
  <label for="email">メールアドレス</label>
  <input type="email"
         id="email"
         name="email"
         data-testid="login-email"
         placeholder="例：user@example.com">

  <label for="password">パスワード</label>
  <input type="password"
         id="password"
         name="password"
         data-testid="login-password">

  <button type="submit"
          id="login-btn"
          data-testid="login-submit">
    ログイン
  </button>
</form>

この HTML から書けるロケーターの例がこちらです。

# Selenium の場合（id を優先）
email_input    = driver.find_element(By.ID, "email")
password_input = driver.find_element(By.ID, "password")
login_button   = driver.find_element(By.ID, "login-btn")

email_input.send_keys("test@example.com")    # サンプルURL
password_input.send_keys("password123")
login_button.click()

# Playwright の場合① get_by_test_id（data-testid がある場合）
page.get_by_test_id("login-email").fill("test@example.com")    # サンプルURL
page.get_by_test_id("login-password").fill("password123")
page.get_by_test_id("login-submit").click()

# Playwright の場合② get_by_label / get_by_role（セマンティックロケーター優先）
page.get_by_label("メールアドレス").fill("test@example.com")    # サンプルURL
page.get_by_label("パスワード").fill("password123")
page.get_by_role("button", name="ログイン").click()

ロケーターを選ぶときの優先順位

Selenium と Playwright では推奨するロケーターが異なります。使っているツールに合わせて参照してください。

Selenium の場合：属性ベースで安定したものを優先

左ほど安定・右ほど壊れやすい

Playwright の場合：要素の種類によって使い分ける

Playwright では要素の種類に応じて適切なロケーターを選ぶのが基本方針です。固定された「絶対順位」はなく、状況に合わせて使い分けます。

HTML を読むときのはまりポイント

よくある質問（FAQ）

まとめ

HTML の全てを覚える必要はありません。「id・data-testid・name を探す」「フォーム要素の種類を知っている」この2つだけで、テスト自動化の最初の壁を大きく乗り越えられます。HTML が読めるようになったら次は Chrome DevTools を使って実際のページの HTML を調査してみましょう。セレクターの検証まで一気通貫でできるようになります。