Selenium・Playwrightで使うDevTools入門｜Elements・Console・Networkの使い方を解説

Selenium・Playwright でテストコードを書くとき、「どのセレクターを使えばいいか分からない」「要素がうまく取れない」と悩んだことはありませんか？ブラウザの開発者ツール（DevTools）を使いこなせると、その悩みの大半は解決できます。本記事ではQAエンジニアがテスト自動化で押さえておきたい DevTools の基礎を、実例つきで解説します。

📌 この記事の対象読者

「要素が見つからない」「どのセレクターを書けばいいか分からない」——テスト自動化を始めると必ずぶつかる壁です。実はその答えはほとんど、ブラウザの 開発者ツール（DevTools） の中にあります。

DevTools は Chrome・Edge・Firefox などのブラウザに標準搭載されている開発・デバッグ用のツールで、インストール不要でいつでも使えます。QA エンジニアにとっては「テストコードを書く前の準備ツール」として欠かせない存在です。

開発者ツール（DevTools）とは

DevTools とは、ブラウザに内蔵されている開発・デバッグ用のパネルです。Web ページの HTML 構造・CSS・JavaScript の動作・ネットワーク通信などをリアルタイムに確認できます。

DevTools の開き方

QA の現場では Chrome DevTools が最もよく使われます。Selenium や Playwright もデフォルトで Chromium ベースのブラウザを使うため、Chrome の操作感をそのまま活かせます。

① Elements タブ：要素を確認してセレクターを取得する

QA エンジニアが最も使うタブです。ページ上の HTML 構造を確認し、テストコードで使うセレクターをその場でコピーできます。

要素を素早く見つける方法

テストしたい要素（ボタン・入力フォームなど）を右クリック →「検証」を選ぶと、その要素が HTML ツリーでハイライト表示されます。

セレクターをコピーする方法

Elements タブで対象の HTML 要素を右クリックすると、セレクターをワンクリックでコピーできます。

id や data-testid を確認する

Elements タブで HTML を確認すると、その要素が持つ属性（id・name・data-testid など）が一目でわかります。

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

この場合、Selenium・Playwright のコードでは以下のように書けます。

# Selenium の場合
driver.find_element(By.ID, "email")
driver.find_element(By.CSS_SELECTOR, "[data-testid='login-email']")

# Playwright の場合
page.get_by_test_id("login-email")
page.locator("#email")

② Console タブ：セレクターをその場で検証する

Console タブでは JavaScript を直接実行できます。「このセレクターで本当に要素が取れるか？」をテストコードを書く前にその場で確認するのに使います。

セレクター検証コマンド早見表

# CSS セレクターで1つ取得（最初の1件のみ）
document.querySelector('.submit-btn')

# CSS セレクターで全件取得（フルで書く場合）
document.querySelectorAll('.list-item')

# Chrome DevTools のショートカット（DevTools Console 内でのみ使用可）
$$('.list-item')    # document.querySelectorAll の省略形
$x('//button[@type="submit"]')    # XPath で取得

# 属性値を確認する
document.querySelector('#email').getAttribute('data-testid')

$$('.list-item') の結果が空配列 [] なら「そのセレクターでは要素が取れていない」サインです。セレクターを修正して再確認できます。

③ Network タブ：API の通信内容を確認する

Network タブでは、ページが行っている HTTP 通信をリアルタイムで確認できます。フロントエンドと API の間のやり取りを把握するために欠かせないタブです。

テスト設計に使える Network タブの情報

Network タブの絞り込みフィルター

Network タブはすべての通信を表示するため、情報量が多くて最初は混乱しがちです。以下のフィルターを使うと見通しがよくなります。

④ Application タブ：Cookie・Storage の状態を確認する

ログイン状態の保持やセッション管理のテストで役立つタブです。Cookie や LocalStorage の値をリアルタイムで確認・削除できます。

DevTools を使っていてはまりやすいポイント

テスト作業別・DevTool タブ活用マップ

よくある質問（FAQ）

まとめ

DevTools はインストール不要で、今すぐブラウザを開けば使えます。Selenium・Playwright のコードを書く前に「まず DevTools で確認する」という習慣をつけるだけで、テストコードの品質とデバッグ効率が大きく変わります。ぜひ日常的なテスト作業の相棒にしてみてください。