ブラウザ自動化というと、
- クリックする
- 入力する
- 画面を操作する
といった「操作そのもの」に目が行きがちです。
しかし、実際にブラウザ自動化で最も重要なのは、操作ではありません。
「どのDOMノード（HTML要素）を、どうやって取得するか」これがブラウザ自動化の成否の9割以上を決めます。
どんなに正しいクリック処理や入力処理を書いても、 対象となるDOMノードを正しく取得できなければ、処理は動きません。
この記事では、HTMLやJavaScriptに詳しくない初心者の方でも理解できるようにDOMノードの取得方法を、基本から順番に解説します。
DOMノードとは？
まず、「DOMノード」とは何かを簡単に確認しておきましょう。
次のようなHTMLがあるとします。
<input id="username" name="user">
<button>ログイン</button>この中にある、
<input><button>
これら一つ一つが、DOMノード（HTML要素）です。
ブラウザ自動化では、「このDOMノードを特定し、操作する」ということを行います。
なぜDOMノード取得が重要なのか？
ブラウザ自動化がうまく動かない原因の多くは、次のどれかに当てはまります。
- 要素が取得できない
- 取得できても動作が不安定
- 画面構成が少し変わっただけで壊れる
これらはすべて、DOMノードの取得方法が適切でない ことが原因です。
だからこそ、「どんな指定方法があるのか」「どう使い分けるのか」を知っておくことが非常に重要になります。
DOMノード取得の基本ルール（初心者向け）
ここからは、DOMノードの代表的な取得方法を紹介します。
すべて document.querySelector() を使った例で説明しますが、考え方はどの自動化ツールでも共通です。
タグ名で取得する
タグ名を指定すると、そのタグを持つ要素を取得できます。
次のコードは、ページ内で最初に見つかった button 要素を取得します。
document.querySelector("button")ただし、同じタグが複数ある場合は、
意図しない要素を取得してしまう可能性があります。
クラス名で取得する
class="primary-btn" を持つ要素を指定します。
クラスは複数の要素に使われることが多いため、
単体指定では不安定になる場合がある点に注意しましょう。
document.querySelector(".primary-btn")idで取得する
id="login-btn" を持つ要素を指定します。
idはHTMLドキュメント内で一意（ひとつだけ）である必要があるため、
最も確実で安定した取得方法です。
document.querySelector("#login-btn")タグ名＋クラス名で取得する
button タグで、かつ class="primary-btn" を持つ要素を指定します。
初心者でも扱いやすく、
実務でも非常によく使われる指定方法です。
document.querySelector("button.primary-btn")属性で取得する
name="email" を持つ input 要素を指定します。
フォーム入力欄の取得でよく使われます。
document.querySelector('input[name="email"]')親子・子孫セレクタ
id="login-form" の中にある、
button タグで class="primary-btn" を持つ要素を指定します。
同じクラス名の要素が複数ある場合でも、
範囲を絞ることで安定した取得が可能になります。
document.querySelector("#login-form button.primary-btn")初心者がやりがちなDOM取得の失敗例
DOMノードの取得に慣れていないと、動いているように見えても実は不安定なセレクタを書いてしまいがちです。
ここでは、初心者が特によくやってしまう失敗例を紹介します。
タグ名だけで取得してしまう
次のような指定は一見するとシンプルですが、非常に危険です。
document.querySelector("button")ページ内に複数のボタンがある場合、意図しない要素を取得してしまう可能性があります。
クラス名だけで取得してしまう
クラス名はデザイン目的で付けられることが多く、HTML構造の変更で簡単に壊れてしまいます。
単体指定ではなく、タグ名や親要素と組み合わせるのが基本です。
壊れにくいDOMセレクタを設計する考え方
DOMノードは「取得できるか」よりも「将来も取得でき続けるか」が重要です。
壊れにくいセレクタには、次のような特徴があります。
- id や data属性など意味を持った属性を使っている
- デザイン変更の影響を受けにくい
- 取得範囲が適切に絞られている
単体で指定できない場合は、親要素と組み合わせて取得範囲を限定しましょう。
querySelectorAllを使うべきケース
querySelector() は最初の1件だけを取得しますが、複数の要素を扱いたい場合は querySelectorAll() を使います。
const buttons = document.querySelectorAll("button.primary-btn");取得結果は配列のように扱えるため、ループ処理と組み合わせることができます。
一覧ページの操作や、複数ボタンへの一括処理では必須の知識です。
CSSセレクタとXPathの違いは？
DOMノードの取得方法には、CSSセレクタのほかに XPath という指定方法もあります。
初心者のうちは、まずCSSセレクタを優先して覚えるのがおすすめです。
| 項目 | CSSセレクタ | XPath |
|---|---|---|
| 書きやすさ | ◎ | △ |
| 可読性 | 高い | 低め |
| 初心者向け | ◎ | △ |
DOMノードが取得できないときのチェックリスト
- 要素がまだ読み込まれていない
- iframe内の要素を取得しようとしている
- JavaScriptで動的に生成される要素を対象にしている
これらを確認するだけでも、原因の切り分けがかなり楽になります。
