Cookieとセッション

Cookieは、ブラウザに保存される小さなデータです。ログイン状態の維持などに使われます。

Cookieとは？

ブラウザがWebサイトごとに保存する小さなテキストデータです。

Cookieの仕組み

1. サーバーがCookieを設定
   Set-Cookie: session=abc123

2. ブラウザがCookieを保存

3. 次回アクセス時、Cookieを自動送信
   Cookie: session=abc123

4. サーバーがCookieを確認して、ユーザーを識別

Cookieの用途

1. ログイン状態の維持

ログイン → Cookieに session=abc123 を保存
次回アクセス → Cookieを送信して自動ログイン

2. ショッピングカート

商品をカートに追加 → Cart=item1,item2 を保存
ページ移動しても、カートの内容を維持

3. ユーザー設定

言語設定: lang=ja
テーマ設定: theme=dark

Cookieの構成

Set-Cookie: session=abc123; Path=/; Domain=example.com; Secure; HttpOnly
           │          │      │       │                  │       │
           │          │      │       │                  │       └─ JavaScriptから読めない
           │          │      │       │                  └─ HTTPS のみ
           │          │      │       └─ 有効なドメイン
           │          │      └─ 有効なパス
           │          └─ Cookie の値
           └─ Cookie の名前

主要な属性

属性	説明
Domain	Cookieが有効なドメイン
Path	Cookieが有効なパス
Expires	有効期限（日時）
Max-Age	有効期限（秒数）
Secure	HTTPS通信のみ
HttpOnly	JavaScriptからアクセス不可
SameSite	CSRF対策

セッションとの違い

Cookie	セッション
ブラウザに保存	サーバーに保存
データサイズ制限（約4KB）	大きなデータ可能
セキュリティリスクあり	より安全

実際の使い方:

Cookie に session ID だけ保存: session=abc123
セッション本体はサーバーに保存: {user: "taro", cart: [...]}

PlaywrightでのCookie操作

Cookieを取得

test('Cookie を確認', async ({ page }) => {
  await page.goto('https://example.com');

  // すべての Cookie を取得
  const cookies = await page.context().cookies();
  console.log(cookies);

  // 特定の Cookie を取得
  const sessionCookie = cookies.find(c => c.name === 'session');
  expect(sessionCookie).toBeDefined();
});

Cookieを設定

test('Cookie を設定してログイン状態を再現', async ({ page }) => {
  // ログイン状態を再現
  await page.context().addCookies([{
    name: 'session',
    value: 'abc123',
    domain: 'example.com',
    path: '/',
  }]);

  // ログイン後のページにアクセス
  await page.goto('https://example.com/dashboard');

  // ログイン済みであることを確認
  await expect(page.locator('.welcome')).toBeVisible();
});

Cookieを削除

test('Cookie を削除', async ({ context }) => {
  // すべての Cookie を削除
  await context.clearCookies();

  // 特定の Cookie を削除
  await context.clearCookies({ name: 'session' });
});

実践例: ログインのスキップ

毎回ログインするのは時間がかかるため、Cookieで状態を再現します。

import { test as base } from '@playwright/test';

// ログイン済みの fixture を作成
const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // 事前にログイン Cookie を設定
    await page.context().addCookies([{
      name: 'auth_token',
      value: 'your-token-here',
      domain: 'example.com',
      path: '/',
    }]);

    await use(page);
  },
});

test('ログイン済みでダッシュボードにアクセス', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/dashboard');
  await expect(authenticatedPage.locator('.user-name')).toBeVisible();
});

Cookie の確認方法

ブラウザの検証ツール

1. 検証ツールを開く（F12）
2. Applicationタブを選択
3. 左側のCookiesを展開
4. ドメインを選択

Playwrightのデバッグ

test('Cookie をデバッグ', async ({ page }) => {
  await page.goto('https://example.com');

  const cookies = await page.context().cookies();
  console.log('Cookies:', JSON.stringify(cookies, null, 2));
});

まとめ

用途	Playwr ightコード
Cookie取得	await page.context().cookies()
Cookie設定	await page.context().addCookies([...])
Cookie削除	await page.context().clearCookies()

Cookieを使いこなすと、テストの実行速度が大幅に改善されます！