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

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

DOMとは？

DOMとは？

DOM（Document Object Model）は、HTMLドキュメントをプログラムで操作できるようにした構造です。

DOMの基本概念

WebブラウザがHTMLを読み込むと、DOMという木構造のモデルを作成します。

HTML ファイル
   ↓ ブラウザが読み込み
DOM ツリー（木構造）
   ↓ JavaScript で操作可能
ページが動的に変化

実際のHTMLとDOM

<!DOCTYPE html>
<html>
  <head>
    <title>マイページ</title>
  </head>
  <body>
    <h1>ようこそ</h1>
    <p>こんにちは</p>
  </body>
</html>

このHTMLからブラウザが作るDOM Tree：

document
  └─ html
      ├─ head
      │   └─ title
      │       └─ "マイページ"
      └─ body
          ├─ h1
          │   └─ "ようこそ"
          └─ p
              └─ "こんにちは"

要素とノード

要素（Element）

HTMLタグで囲まれた部分です。

<div class="container">
  <button id="submit">送信</button>
</div>
  • <div> は要素
  • <button> は要素
  • class="container" は属性

ノード（Node）

DOMツリーの各部品です。

ノードの種類 説明 例
要素ノード HTMLタグ <div>, <p>
テキストノード テキスト内容 "こんにちは"
属性ノード 属性 class="btn"
コメントノード コメント <!-- コメント -->
💡 覚えておくポイント
  • 要素はノードの一種
  • テキストもノード（テキストノード）
  • すべてがツリー構造で繋がっている

DOM操作の基本

JavaScriptでDOMを操作する例：

要素を取得

// IDで取得
const button = document.getElementById('submit');

// クラスで取得
const items = document.getElementsByClassName('item');

// セレクタで取得
const title = document.querySelector('h1');
const allLinks = document.querySelectorAll('a');

要素を変更

// テキストを変更
document.querySelector('h1').textContent = '新しいタイトル';

// スタイルを変更
document.querySelector('button').style.color = 'red';

// 属性を変更
document.querySelector('input').setAttribute('disabled', 'true');

要素を追加・削除

// 新しい要素を作成
const newDiv = document.createElement('div');
newDiv.textContent = '新しいコンテンツ';

// ページに追加
document.body.appendChild(newDiv);

// 要素を削除
const oldElement = document.querySelector('.old');
oldElement.remove();

PlaywrightとDOM

PlaywrightはDOMを操作してテストを行います。

要素の取得

// Playwrightでの要素取得
await page.locator('#submit'); // ID
await page.locator('.item'); // クラス
await page.locator('button'); // タグ
await page.locator('button:has-text("送信")'); // テキスト

DOM状態の確認

// 要素が存在するか
await expect(page.locator('h1')).toBeVisible();

// テキスト内容の確認
await expect(page.locator('h1')).toHaveText('ようこそ');

// 属性の確認
await expect(page.locator('input')).toHaveAttribute('disabled', '');

DOM変更の待機

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

// DOM変更を待つ
await page.waitForSelector('.loaded');

なぜE2EテストでDOMの理解が重要か

🎯 テストで必要な理由
  • 要素を見つける: テストしたいボタンやフォームを特定するため
  • 操作する: クリック、入力などのアクションを実行するため
  • 検証する: 正しい結果が表示されているか確認するため
  • タイミング: 動的に変わるDOMの変更を待つため

DOMツリーの実例

実際のログインフォーム：

<form id="login-form">
  <div class="form-group">
    <label for="username">ユーザー名</label>
    <input type="text" id="username" name="username">
  </div>
  <div class="form-group">
    <label for="password">パスワード</label>
    <input type="password" id="password" name="password">
  </div>
  <button type="submit">ログイン</button>
</form>

このDOMツリー：

form#login-form
  ├─ div.form-group
  │   ├─ label (for="username")
  │   │   └─ "ユーザー名"
  │   └─ input#username
  ├─ div.form-group
  │   ├─ label (for="password")
  │   │   └─ "パスワード"
  │   └─ input#password
  └─ button
      └─ "ログイン"

Playwrightでの操作：

// フォーム内の要素を取得
await page.locator('#login-form #username').fill('user123');
await page.locator('#login-form #password').fill('pass456');
await page.locator('#login-form button[type="submit"]').click();
📌 実践のコツ
テストを書く時は、まず検証ツールでDOMツリーを確認してから、セレクタを決めましょう。

まとめ

用語 説明
DOM HTMLを木構造で表現したモデル
ノード DOMツリーの各要素（要素、テキスト、属性など）
要素 HTMLタグで表されるノード
DOM操作 JavaScriptで要素を取得・変更・追加・削除すること

次のチャプターでは、HTML構造についてさらに詳しく学びます。

目次に戻る