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

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

リクエストとレスポンス

リクエストとレスポンス

HTTPの通信は、常に「リクエスト」と「レスポンス」のペアで行われます。

リクエスト（Request）

クライアントからサーバーへ送られるメッセージです。

リクエストの構成

GET /search?q=playwright HTTP/1.1     ← リクエストライン
Host: www.google.com                   ← ヘッダー
User-Agent: Mozilla/5.0
Cookie: session=abc123

                                       ← 空行
name=John&age=30                       ← ボディ（POSTの場合）

1. リクエストライン

GET /search?q=playwright HTTP/1.1
│   │                     │
│   │                     └─ HTTPバージョン
│   └─ パス（どのページにアクセスするか）
└─ メソッド（何をするか）

2. ヘッダー

リクエストに関する追加情報です。

ヘッダー 説明 例
Host アクセス先のドメイン www.example.com
User-Agent ブラウザ情報 Chrome/120.0
Cookie 保存されたCookie session=abc123
Content-Type 送信データの形式 application/json

3. ボディ

POST/PUTメソッドで送信するデータです。

フォームデータの例:
username=taro&password=secret123

JSON の例:
{"username": "taro", "password": "secret123"}

レスポンス（Response）

サーバーからクライアントへ返されるメッセージです。

レスポンスの構成

HTTP/1.1 200 OK                        ← ステータスライン
Content-Type: text/html                ← ヘッダー
Set-Cookie: session=xyz789
Content-Length: 1234

                                       ← 空行
<!DOCTYPE html>                        ← ボディ
<html>
...
</html>

1. ステータスライン

HTTP/1.1 200 OK
│        │   │
│        │   └─ ステータスメッセージ
│        └─ ステータスコード
└─ HTTPバージョン

2. レスポンスヘッダー

ヘッダー 説明 例
Content-Type レスポンスの形式 text/html, application/json
Set-Cookie Cookieを設定 session=xyz789
Content-Length データサイズ 1234 (bytes)
Cache-Control キャッシュ制御 max-age=3600

3. レスポンスボディ

実際のコンテンツです。

  • HTMLページ
  • JSON データ
  • 画像ファイル
  • CSSファイル など

Playwrightでリクエスト/レスポンスを扱う

リクエストを待機

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

レスポンスを取得

// レスポンスを待って内容を確認
const response = await page.waitForResponse('**/api/users');
const json = await response.json();
console.log(json);

リクエストをモック

// リクエストを途中で変更
await page.route('**/api/**', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ message: 'mocked' })
  });
});

実際の例: ログインフォーム送信

1. ブラウザからのリクエスト

POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

username=taro&password=secret123

2. サーバーからのレスポンス

HTTP/1.1 200 OK
Set-Cookie: session=xyz789; HttpOnly
Location: /dashboard

{"success": true, "message": "ログイン成功"}

3. Playwrightでの実装

test('ログイン', async ({ page }) => {
  await page.goto('https://example.com/login');

  // フォームに入力（リクエストが送信される）
  await page.fill('#username', 'taro');
  await page.fill('#password', 'secret123');
  await page.click('#login-button');

  // レスポンスを待つ
  await page.waitForURL('**/dashboard');

  // Cookieが設定されているか確認
  const cookies = await page.context().cookies();
  expect(cookies.some(c => c.name === 'session')).toBe(true);
});
🎯 検証ツールで確認してみよう
1. ブラウザで検証ツールを開く（F12）
2. Networkタブを選択
3. ページをリロード
4. 各リクエスト/レスポンスをクリックして中身を見る

まとめ

リクエスト レスポンス
方向 クライアント → サーバー サーバー → クライアント
含まれるもの メソッド、パス、ヘッダー、ボディ ステータスコード、ヘッダー、ボディ
例 GET /search 200 OK + HTML
目次に戻る