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

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

HTMLの基礎

👆 よく使うHTML要素とPlaywrightでの指定方法
🔗
<a>
リンク
📝
<h1>
見出し
📋
<li>
リスト
📊
<table>
テーブル

この章では、Webページで頻繁に使われるHTML要素の操作方法を学びます。

リンク（<a>）、見出し（<h1>）、リスト（<li>）、テーブル（<table>）といった代表的な要素を取り上げ、それぞれをPlaywrightでピンポイントに指定するための具体的なコードを見ていきましょう。

これらをマスターすることで、「Pick locator」が提案するコードの意図を深く理解できるだけでなく、より複雑な状況でも、ご自身の力で安定したテストを書くための強力な武器が手に入ります。

id と class の違い

要素を特定する上で最も重要な2つの属性を理解しましょう。

id属性（#）
ページ内で唯一の名前
#login-button
✅ テストで使いやすい
✅ 要素を確実に特定できる
class属性（.）
複数の要素で共有できる名前
.btn-primary
⚠️ 複数の要素に同じ名前がつく
⚠️ 特定には注意が必要

Playwrightでの指定方法

// idで指定する場合（#を付ける）
await page.locator('button#login-button').click();

// classで指定する場合（.を付ける）
await expect(page.locator('div.error-message')).toBeVisible();

<a>（リンク）

他のページに移動するための部品です。

HTML

<a href="/privacy-policy">プライバシーポリシー</a>

Playwrightでの指定方法

// 「プライバシーポリシー」というテキストを持つ a タグをクリックする
await page.locator('a:has-text("プライバシーポリシー")').click();

<h1>〜<h5>（見出し）

文章のタイトルや小見出しを表す部品です。<h1>が一番大きな見出しで、数字が大きくなるほど小さくなります。

HTML

<h1>お知らせ1</h1>
<h2>お知らせ2</h2>
<h3>お知らせ3</h3>

Playwrightでの指定方法

// 「お知らせ1」というテキストを持つ h1 タグが見えることを確認する
await expect(page.locator('h1:has-text("お知らせ1")')).toBeVisible();

<input>（入力フォーム）

文字を入力したり、チェックを入れたりするための部品です。

HTML

<input type="text" placeholder="お名前を入力">

Playwrightでの指定方法

await page.locator('input').fill('山田太郎');

<ul>, <li>（リスト）

<ul>（ユーエル）という「棚」の中に、<li>（エルアイ）という「品物」が並んでいるイメージです。

HTML

<ul class="nav-menu">
  <li>ホーム</li>
  <li>製品情報</li>
  <li>お問い合わせ</li>
</ul>

Playwrightでの指定方法

親を手がかりに、中の子を探し出すことができます。

// classが "nav-menu" の中にある、2番目の li要素 をクリックする
await page.locator('.nav-menu li').nth(1).click();

<table>, <tr>, <td>（テーブル）

<table>（テーブル）という「表」の中に、<tr>（ティーアール）という「行」があり、さらにその中に<td>（ティーディー）という「セル（マス目）」があるイメージです。

HTML

<table>
  <tbody>
    <tr> <!-- 1行目 -->
      <td>Cierra</td>
      <td>Vega</td>
      <td><button>編集</button></td>
    </tr>
    <tr> <!-- 2行目 -->
      <td>Alden</td>
      <td>Cantrell</td>
      <td><button>編集</button></td>
    </tr>
  </tbody>
</table>

Playwrightでの指定方法

順番をたどって目的のデータを探し出すことができます。

// 2番目の行(tr)の中にある、「編集」というテキストを持つ button をクリックする
await page.locator('tr').nth(1).locator('button:has-text("編集")').click();

開発者ツールでHTMLを確認する

ブラウザの「開発者ツール」を使うと、実際のWebページのHTML構造を確認できます。

ブラウザ ショートカット
Chrome / Edge F12 または Ctrl + Shift + I（Mac: Cmd + Option + I）
Firefox F12 または Ctrl + Shift + I（Mac: Cmd + Option + I）
💡 ヒント
開発者ツールで要素を選択すると、その要素のHTML構造が表示されます。id や class、親要素との関係など、テストに必要な情報がすべて確認できます。

学びのまとめと、次の一歩

これまでの章で学んだ知識は、Pick locatorがなぜそのコードを提案してくるのか、その「理由」を理解するための重要なヒントとなります。

理由が分かれば、単にツールが提案したコードを貼り付けるだけでなく、より変更に強く、安定したテストコードを自ら考えて書くことができるようになります。これこそが、信頼性の高い自動テストを構築するための、強力な土台となるのです。

さらに理解を深めるために

もしHTMLの構造について、さらに詳しく学びたい場合は、以下の外部サイトが参考になります。

HTMLの基本的な構造 Webページがどのような骨格で成り立っているか、基礎から学べます。

🔗 https://cc.musabi.ac.jp/kenkyu/cl1/html5/basic_cnst.html

目次に戻る