Networkタブの使い方

Networkタブは、ブラウザとサーバー間の通信（HTTPリクエストとレスポンス）を確認できるタブです。E2Eテストで、APIリクエストの検証やエラーの原因調査に役立ちます。

Networkタブとは？

ページが読み込むすべてのリソースとAPI通信を記録します。

確認できるもの：

• HTMLページ
• CSS、JavaScript ファイル
• 画像、フォント
• API リクエスト（JSON など）
• ステータスコード（200、404、500 など）
• リクエスト/レスポンスの詳細

Networkタブを開く

1. F12 で検証ツールを開く
2. "Network" タブをクリック
3. ページをリロード（Ctrl+R / Cmd+R）
4. すべてのリクエストが記録される

重要: リロードが必要

Networkタブを開く前に発生したリクエストは記録されません。必ずリロードしましょう。

基本的な見方

リクエスト一覧

左側に、すべてのHTTPリクエストが一覧表示されます。

列	説明
Name	リクエストしたファイルやエンドポイント
Status	ステータスコード（200、404など）
Type	ファイルタイプ（document、xhr、scriptなど）
Initiator	リクエストを発生させた場所
Size	ファイルサイズ
Time	レスポンスまでの時間

例

Name                  Status  Type      Size     Time
─────────────────────────────────────────────────────
index.html            200     document  12.3 KB  120ms
app.js                200     script    45.6 KB  80ms
style.css             200     stylesheet 8.2 KB  50ms
api/users             200     xhr       2.1 KB   150ms
logo.png              200     png       15.4 KB  60ms
api/posts             404     xhr       0 B      100ms

ステータスコードの確認

ステータスコードで、リクエストの結果が分かります。

コード	意味	説明
200	OK	成功
201	Created	作成成功
204	No Content	成功（コンテンツなし）
301	Moved Permanently	永久リダイレクト
302	Found	一時リダイレクト
304	Not Modified	キャッシュを使用
400	Bad Request	リクエストが不正
401	Unauthorized	認証が必要
403	Forbidden	アクセス禁止
404	Not Found	見つからない
500	Internal Server Error	サーバーエラー
503	Service Unavailable	サーバー利用不可

色分け

• 黒/緑: 成功（2xx）
• 青: リダイレクト（3xx）
• 赤: エラー（4xx、5xx）

リクエストの詳細を確認

リクエストをクリックすると、右側に詳細が表示されます。

Headers タブ

リクエストとレスポンスのヘッダー情報が表示されます。

General

Request URL: https://example.com/api/users
Request Method: GET
Status Code: 200 OK

Response Headers

Content-Type: application/json
Set-Cookie: session=abc123; HttpOnly
Cache-Control: no-cache

Request Headers

User-Agent: Mozilla/5.0 ...
Cookie: session=xyz789
Authorization: Bearer token123

Preview タブ

レスポンスの内容を見やすく表示します（JSON など）。

{
  "users": [
    {
      "id": 1,
      "name": "Taro",
      "email": "taro@example.com"
    },
    {
      "id": 2,
      "name": "Hanako",
      "email": "hanako@example.com"
    }
  ]
}

Response タブ

レスポンスの生データを表示します。

{"users":[{"id":1,"name":"Taro","email":"taro@example.com"},{"id":2,"name":"Hanako","email":"hanako@example.com"}]}

Payload タブ（Request Payload）

POSTやPUTリクエストで送信したデータを表示します。

{
  "username": "taro",
  "password": "secret123"
}

Timing タブ

リクエストの各フェーズの時間を表示します。

Queueing: 2ms
Stalled: 5ms
DNS Lookup: 10ms
Initial connection: 20ms
SSL: 30ms
Request sent: 1ms
Waiting (TTFB): 100ms
Content Download: 20ms

フィルタリング

Networkタブ上部のフィルタで、表示するリクエストを絞り込めます。

タイプ別フィルタ

フィルタ	説明
All	すべて
Fetch/XHR	API リクエスト（Ajax）
JS	JavaScript ファイル
CSS	CSS ファイル
Img	画像
Media	動画・音声
Font	フォント
Doc	HTML ドキュメント
WS	WebSocket

検索

検索ボックスで、URLやファイル名でフィルタリングできます。

api/users  →  api/users を含むリクエストのみ表示
.json      →  JSON ファイルのみ表示

ステータスコード別

status-code:404  →  404 エラーのみ表示
status-code:5**  →  500番台のエラーのみ表示

実践例

例1: ログインリクエストの確認

1. Networkタブを開く
2. ログインフォームに入力して送信
3. Networkタブで POST /login を探す
4. クリックして詳細を確認:
   - Payload タブ: 送信したユーザー名とパスワード
   - Response タブ: レスポンスデータ
   - Headers タブ: Set-Cookie でセッションIDが設定されているか

例2: APIエラーの調査

1. テストが失敗したとき、Networkタブを確認
2. 赤色（エラー）のリクエストを探す
3. クリックして詳細を確認:
   - Status: 404 → URLが間違っている
   - Status: 500 → サーバーエラー
   - Response タブでエラーメッセージを確認

例3: データ取得の確認

1. ページを開く
2. Networkタブで GET /api/users を確認
3. Preview タブでレスポンスデータを確認
4. データが正しく取得できているか確認

PlaywrightでNetworkを扱う

Playwrightで、Networkタブと同様の情報を取得・検証できます。

リクエストを待機

// リクエストを待つ
await page.waitForRequest('**/api/users');

// リクエストをキャプチャ
page.on('request', request => {
  console.log('リクエスト:', request.url());
  console.log('メソッド:', request.method());
});

レスポンスを待機

// レスポンスを待つ
const response = await page.waitForResponse('**/api/users');

// ステータスコードを確認
console.log(response.status()); // 200

// レスポンスデータを取得
const data = await response.json();
console.log(data);

リクエストをモック

// リクエストを途中で変更
await page.route('**/api/users', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([
      { id: 1, name: 'Mock User' }
    ])
  });
});

リクエストの検証

test('API呼び出しを検証', async ({ page }) => {
  // リクエストをキャプチャ
  const requestPromise = page.waitForRequest(request =>
    request.url().includes('/api/login') &&
    request.method() === 'POST'
  );

  // ログイン
  await page.fill('#username', 'taro');
  await page.fill('#password', 'secret');
  await page.click('#login-btn');

  // リクエストを確認
  const request = await requestPromise;
  const postData = request.postDataJSON();
  expect(postData).toEqual({
    username: 'taro',
    password: 'secret'
  });
});

レスポンスの検証

test('APIレスポンスを検証', async ({ page }) => {
  await page.goto('/users');

  // レスポンスを取得
  const response = await page.waitForResponse('**/api/users');

  // ステータスコードを検証
  expect(response.status()).toBe(200);

  // レスポンスデータを検証
  const users = await response.json();
  expect(users).toHaveLength(2);
  expect(users[0].name).toBe('Taro');
});

便利な機能

リクエストをコピー

リクエストを右クリックして、以下をコピーできます：

オプション	説明
Copy URL	URLをコピー
Copy as cURL	curlコマンドとしてコピー
Copy as Fetch	JavaScriptのfetch()コードとしてコピー

リクエストを再送信

1. リクエストを右クリック
2. "Replay XHR" を選択
3. 同じリクエストが再送信される

HAR ファイルの保存

すべてのリクエストをファイルに保存できます。

1. Networkタブで右クリック
2. "Save all as HAR with content" を選択
3. .harファイルが保存される

トラブルシューティング

リクエストが記録されない

→ Networkタブを開いてからページをリロード

レスポンスが表示されない

→ "Preserve log" にチェックを入れる（ページ遷移後もログを保持）

キャッシュの影響を排除

→ "Disable cache" にチェックを入れる

まとめ

機能	用途
リクエスト一覧	すべての通信を確認
ステータスコード	成功/エラーを判別
Headers	リクエスト/レスポンスヘッダーを確認
Preview/Response	レスポンスデータを確認
Payload	送信データを確認
フィルタ	特定のリクエストを絞り込み

次のチャプターでは、要素の見つけ方をさらに詳しく学びます。