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

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

DOMの考え方

🌳 DOMはWebページを「木」のような構造で表現したもの
<html>
<head>
<body>
<div>
<button>

自動テストでは「DOM」という言葉がよく出てきます。この章では、DOMとは何か、なぜ重要なのかを学びましょう。

DOMとは？

**DOM（Document Object Model）**とは、Webページの構造をプログラムから操作できるようにした「設計図」のようなものです。

ブラウザがHTMLを読み込むと、それを「DOMツリー」と呼ばれる木のような構造に変換します。Playwrightは、このDOMツリーを通じて要素を見つけたり、操作したりしています。

📄 HTML（ソースコード）
開発者が書いたテキストファイル
🌳 DOM（ブラウザ内部）
ブラウザが作成した操作可能な構造

家系図で理解するDOM

DOMの構造は、家系図に例えるととても分かりやすくなります。

<html>
  <body>
    <div class="container">
      <h1>タイトル</h1>
      <button>クリック</button>
    </div>
  </body>
</html>

親子関係

用語 説明 上の例では
親要素（Parent） ある要素を包んでいる要素 <div> は <h1> の親
子要素（Child） ある要素に包まれている要素 <h1> は <div> の子
兄弟要素（Sibling） 同じ親を持つ要素同士 <h1> と <button> は兄弟
先祖要素（Ancestor） 親、親の親、さらにその親... <body> は <h1> の先祖
子孫要素（Descendant） 子、子の子、さらにその子... <h1> は <body> の子孫

なぜDOMを理解する必要があるの？

理由1：要素を正確に特定するため

同じ名前のボタンが複数ある場合、DOMの構造（親子関係）を使って区別します。

// 「商品A」というテキストを持つdivの中にあるボタンをクリック
await page.locator('div:has-text("商品A")').locator('button').click();

理由2：エラーメッセージを理解するため

Playwrightのエラーには、DOMに関する用語がよく出てきます。

Error: locator resolved to 3 elements

このエラーは「指定したセレクタが、DOMツリー内で3つの要素に一致してしまった」という意味です。

理由3：動的なページに対応するため

現代のWebページは、JavaScriptによってDOMが動的に変化します。ボタンをクリックすると新しい要素が追加されたり、既存の要素が消えたりします。この仕組みを理解することで、より安定したテストが書けます。

DOMの変化を体験してみよう

開発者ツールを開いて、実際にDOMが変化する様子を観察してみましょう。

手順

  1. 任意のWebサイトを開く
  2. F12 で開発者ツールを開く
  3. 「Elements」タブを選択
  4. ページ上で何かをクリックしたり、フォームに入力したりする
  5. DOMツリーが変化する様子を観察する
👀 観察してみよう
モーダルが開くとき、新しい <div> が追加されるのが見えるはずです。アコーディオンを開くと、中の要素が表示状態に変わります。このような変化を理解することが、安定したテストへの第一歩です。

Playwrightが要素を見つける仕組み

Playwrightは、私たちが書いたセレクタを使って、DOMツリーの中から目的の要素を探し出します。

await page.locator('#login-button').click();

この1行が実行されると、内部では以下のことが起きています。

  1. DOMツリーを検索 - id="login-button" を持つ要素を探す
  2. 要素の状態を確認 - 表示されているか？クリック可能か？
  3. アクションを実行 - 条件を満たしたらクリックを実行
✨ Playwrightの賢いところ
Playwrightは、要素がまだDOMに存在しない場合、自動的に待機してくれます。これを「自動待機（Auto-waiting）」と呼びます。だから、多くの場合、明示的な待機処理を書く必要がないのです。

まとめ

ポイント 内容
DOMとは HTMLをブラウザが解釈して作る、操作可能な構造
DOMツリー 要素が親子関係で繋がった木のような構造
親子関係 要素を特定するための重要な手がかり
動的な変化 JavaScriptによってDOMは常に変化する
Playwright DOMツリーを通じて要素を見つけ、操作する

DOMの概念を理解することで、「なぜこのセレクタで要素が取れるのか」「なぜこのエラーが出るのか」がより深く理解できるようになります。

目次に戻る