Playwright でページ遷移と状態管理をしっかり検証

2025年9月10日

モダンな Web アプリケーションでは、ユーザーの操作に応じて動的にページが遷移し、複雑な状態管理が行われています。特に SPA（Single Page Application）や PWA（Progressive Web Application）では、ページ遷移時に状態を適切に保持・管理することが、優れたユーザーエクスペリエンスを提供する上で重要な要素となっています。

しかし、これらの検証を手動で行うのは非効率的で、見落としも発生しやすいものです。そこで注目されているのが、Microsoft が開発した Playwright という E2E テストフレームワークです。Playwright を活用することで、複雑なページ遷移と状態管理を自動化して検証でき、品質の高い Web アプリケーションを効率的に開発できるようになります。

背景

Web アプリケーションにおけるページ遷移の複雑化

現代の Web アプリケーションは、従来のマルチページアプリケーション（MPA）とは大きく異なる複雑な構造を持っています。React、Vue.js、Angular などのフロントエンドフレームワークの普及により、クライアントサイドルーティングが主流となり、ページ遷移のパターンも多様化しました。

以下の図は、モダンな Web アプリケーションでの遷移パターンを示しています。

mermaidflowchart TD
    user[ユーザー操作] --> route[ルーター判定]
    route --> spa_nav[SPA内遷移]
    route --> page_reload[ページリロード]
    spa_nav --> state_update[状態更新]
    spa_nav --> lazy_load[遅延ローディング]
    page_reload --> full_reload[完全リロード]
    state_update --> render[画面再描画]
    lazy_load --> async_load[非同期読み込み]
    async_load --> render
    full_reload --> render

この図が示すように、ユーザーの一つの操作から複数の処理パスが存在し、それぞれ異なる状態管理が必要になります。

状態管理が重要な理由

Web アプリケーションの状態管理は、ユーザーエクスペリエンスの質を左右する重要な要素です。適切に管理されていない状態は、以下のような問題を引き起こします。

問題の種類	具体的な影響	ユーザーへの影響
データの不整合	フォーム入力値の消失	入力作業のやり直し
状態の永続化失敗	ログイン状態の消失	再ログインの手間
UI 状態の混乱	モーダルの表示不整合	操作の混乱

これらの問題を防ぐため、Redux、Vuex、NgRx などの状態管理ライブラリが広く利用されています。しかし、これらのライブラリを正しく使用できているかを検証するには、包括的なテストが必要不可欠です。

従来のテスト手法の限界

従来のテスト手法では、以下のような限界がありました。

単体テストの限界 単体テストは個別のコンポーネントや関数の動作は検証できますが、複数のコンポーネント間での状態の受け渡しや、ページ遷移時の状態変更は検証できません。

手動テストの問題点 手動テストは実際のユーザー操作を再現できますが、時間がかかり、テストケースの網羅性に限界があります。また、回帰テストの実行コストが高く、継続的な品質保証が困難でした。

E2E テストツールの課題 従来の E2E テストツールである Selenium などは、設定が複雑で、実行速度も遅く、フレキーなテストになりがちでした。特に、非同期処理の多いモダンな Web アプリケーションでは、適切な待機処理の実装が困難でした。

課題

ページ遷移時の状態保持の問題

モダンな Web アプリケーションでは、ページ遷移時に様々な状態を適切に保持・引き継ぐ必要があります。しかし、この処理には複数の課題が存在します。

セッション状態の管理 ユーザーのログイン状態、権限情報、個人設定などのセッション状態は、ページ遷移後も維持される必要があります。しかし、認証トークンの有効期限切れや、ストレージの制限により、予期しない状態の消失が発生することがあります。

typescript// 問題のある状態管理の例
class UserSession {
  private token: string | null = null;

  // トークンの有効期限チェックが不十分
  isAuthenticated(): boolean {
    return this.token !== null; // 期限切れチェックがない
  }

  // ページ遷移時の状態保持が不安定
  navigateToPage(route: string) {
    // 状態の保存処理が不完全
    localStorage.setItem(
      'user_state',
      JSON.stringify(this.token)
    );
    window.location.href = route;
  }
}

フォーム状態の継承 複数ページにわたるフォーム入力では、前のページで入力された内容を次のページに引き継ぐ必要があります。この際、ブラウザの戻るボタンでの復帰や、途中でのページリロードが発生した場合の状態復旧が課題となります。

非同期処理による状態の不整合

現代の Web アプリケーションでは、API 呼び出し、データベースアクセス、外部サービスとの連携など、多くの非同期処理が並行して実行されます。これにより、状態の更新タイミングに不整合が生じるリスクが高まっています。

以下の図は、非同期処理による状態不整合のパターンを示しています。

mermaidsequenceDiagram
    participant User as ユーザー
    participant UI as UIコンポーネント
    participant Store as 状態管理
    participant API1 as API A
    participant API2 as API B

    User->>UI: 操作実行
    UI->>Store: 状態更新開始
    Store->>API1: 非同期リクエスト1
    Store->>API2: 非同期リクエスト2

    Note over API1,API2: 処理時間の差異

    API2-->>Store: レスポンス2（高速）
    Store->>UI: 部分的状態更新
    UI->>User: 中間表示

    API1-->>Store: レスポンス1（低速）
    Store->>UI: 最終状態更新
    UI->>User: 最終表示

    Note over User: 状態の不整合期間

この図で示されているように、非同期処理の完了タイミングの違いにより、ユーザーには一時的に不整合な状態が表示される可能性があります。

競合状態（Race Condition）の発生 複数の非同期処理が同じ状態を更新する際、処理の完了順序によって最終的な状態が変わってしまう競合状態が発生することがあります。

状態更新の順序保証 非同期処理の結果を状態に反映する際、適切な順序で更新されることを保証する仕組みが必要です。特に、依存関係のあるデータの更新では、この順序保証が重要になります。

複数のブラウザ環境での検証の難しさ

Web アプリケーションは様々なブラウザ環境で動作する必要がありますが、ブラウザごとに状態管理の挙動に微細な差異が存在することがあります。

ブラウザ固有の状態管理の違い

ブラウザ	localStorage 制限	セッション管理	JavaScript 実行特性
Chrome	10MB 程度	タブ間で共有	V8 エンジン
Firefox	10MB 程度	タブ間で分離	SpiderMonkey
Safari	制限あり	厳格な制限	JavaScriptCore
Edge	Chrome 類似	Chrome 類似	V8 エンジン

クロスブラウザテストの複雑性 各ブラウザで同じテストケースを実行し、状態管理が正しく動作することを確認するには、環境構築とテスト実行の自動化が必要不可欠です。手動でのクロスブラウザテストは現実的ではありません。

解決策

Playwright による包括的なテスト戦略

Playwright は、Microsoft が開発したモダンな E2E テストフレームワークで、ページ遷移と状態管理の検証に最適化された機能を提供しています。

Playwright の主要な特徴

typescript// Playwrightの基本設定
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 複数ブラウザでの並列実行
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

  // 信頼性の高い実行設定
  use: {
    // 自動待機の設定
    actionTimeout: 10000,
    navigationTimeout: 30000,

    // 状態管理のためのトレース
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  // 並列実行による高速化
  workers: process.env.CI ? 2 : undefined,
  retries: process.env.CI ? 2 : 0,
});

包括的なテスト戦略の構築 Playwright を活用することで、以下のような段階的なテスト戦略を構築できます。

mermaidflowchart TB
    subgraph "テスト戦略"
        unit[単体テスト]
        integration[統合テスト]
        e2e[E2Eテスト]
    end

    subgraph "Playwrightの適用範囲"
        navigation[ページ遷移テスト]
        state[状態管理テスト]
        cross[クロスブラウザテスト]
        performance[パフォーマンステスト]
    end

    unit --> integration
    integration --> e2e
    e2e --> navigation
    e2e --> state
    e2e --> cross
    e2e --> performance

ページ遷移の適切な検証方法

Playwright では、様々な遷移パターンに対応した検証方法が提供されています。

基本的な遷移の検証

typescriptimport { test, expect } from '@playwright/test';

test('基本的なページ遷移の検証', async ({ page }) => {
  // 初期ページへの遷移
  await page.goto('/home');

  // ページの読み込み完了を確認
  await expect(page).toHaveTitle('ホームページ');

  // リンククリックによる遷移
  await page.click('nav a[href="/about"]');

  // 遷移完了の確認
  await expect(page).toHaveURL('/about');
  await expect(page.locator('h1')).toHaveText('About Us');
});

SPA 内遷移の検証

typescripttest('SPA内でのクライアントサイド遷移', async ({
  page,
}) => {
  await page.goto('/app');

  // 初期状態の確認
  await expect(
    page.locator('[data-testid="current-route"]')
  ).toHaveText('/dashboard');

  // クライアントサイド遷移の実行
  await page.click('[data-testid="profile-link"]');

  // URLの変更確認（ページリロードなし）
  await expect(page).toHaveURL('/app/profile');

  // コンテンツの更新確認
  await expect(
    page.locator('[data-testid="profile-content"]')
  ).toBeVisible();

  // ブラウザの戻るボタンでの遷移確認
  await page.goBack();
  await expect(page).toHaveURL('/app/dashboard');
});

非同期遷移の検証

typescripttest('非同期データ読み込みを伴う遷移', async ({ page }) => {
  // APIリクエストの監視設定
  const responsePromise = page.waitForResponse(
    '/api/user-data'
  );

  await page.goto('/profile');

  // API呼び出しの完了を待機
  const response = await responsePromise;
  expect(response.status()).toBe(200);

  // データ表示の確認
  await expect(
    page.locator('[data-testid="user-name"]')
  ).not.toBeEmpty();
  await expect(
    page.locator('[data-testid="loading"]')
  ).not.toBeVisible();
});

状態管理のテストパターン

状態管理の検証では、様々なパターンに応じたテスト手法を適用する必要があります。

ローカルストレージ状態の検証

typescripttest('ローカルストレージでの状態永続化', async ({
  page,
}) => {
  await page.goto('/settings');

  // 設定値の変更
  await page.selectOption(
    '[data-testid="theme-select"]',
    'dark'
  );
  await page.click('[data-testid="save-button"]');

  // ローカルストレージの確認
  const theme = await page.evaluate(() => {
    return localStorage.getItem('user-theme');
  });
  expect(theme).toBe('dark');

  // ページリロード後の状態確認
  await page.reload();
  await expect(
    page.locator('[data-testid="theme-select"]')
  ).toHaveValue('dark');
});

セッション状態の検証

typescripttest('ログイン状態の維持確認', async ({
  page,
  context,
}) => {
  // ログイン処理
  await page.goto('/login');
  await page.fill(
    '[data-testid="email"]',
    'user@example.com'
  );
  await page.fill('[data-testid="password"]', 'password');
  await page.click('[data-testid="login-button"]');

  // ログイン状態の確認
  await expect(page).toHaveURL('/dashboard');

  // 新しいタブでの状態確認
  const newPage = await context.newPage();
  await newPage.goto('/profile');

  // セッション状態が引き継がれていることを確認
  await expect(
    newPage.locator('[data-testid="user-menu"]')
  ).toBeVisible();
});

複雑な状態フローの検証

typescripttest('ショッピングカートの状態管理', async ({ page }) => {
  await page.goto('/products');

  // 商品をカートに追加
  await page.click(
    '[data-testid="product-1"] [data-testid="add-to-cart"]'
  );

  // カート状態の確認
  await expect(
    page.locator('[data-testid="cart-count"]')
  ).toHaveText('1');

  // 別のページに遷移
  await page.goto('/about');

  // カート状態が保持されていることを確認
  await expect(
    page.locator('[data-testid="cart-count"]')
  ).toHaveText('1');

  // カートページでの詳細確認
  await page.goto('/cart');
  await expect(
    page.locator('[data-testid="cart-items"]')
  ).toContainText('商品1');
});

具体例

基本的なページ遷移テスト

まずは、最も基本的なページ遷移のテストから始めましょう。以下は、ナビゲーションメニューを使った遷移をテストする例です。

テスト対象のアプリケーション構造

typescript// src/components/Navigation.tsx
import React from 'react';
import { Link } from 'react-router-dom';

export const Navigation: React.FC = () => {
  return (
    <nav data-testid='main-navigation'>
      <Link to='/' data-testid='home-link'>
        ホーム
      </Link>
      <Link to='/products' data-testid='products-link'>
        商品一覧
      </Link>
      <Link to='/contact' data-testid='contact-link'>
        お問い合わせ
      </Link>
    </nav>
  );
};

基本的な遷移テストの実装

typescript// tests/navigation.spec.ts
import { test, expect } from '@playwright/test';

test.describe('基本的なページ遷移', () => {
  test('ナビゲーションメニューでの遷移確認', async ({
    page,
  }) => {
    // ホームページから開始
    await page.goto('/');

    // 初期状態の確認
    await expect(page).toHaveTitle('EC サイト - ホーム');
    await expect(
      page.locator('[data-testid="main-navigation"]')
    ).toBeVisible();

    // 商品一覧ページへの遷移
    await page.click('[data-testid="products-link"]');

    // 遷移完了の確認
    await expect(page).toHaveURL('/products');
    await expect(page).toHaveTitle('EC サイト - 商品一覧');
    await expect(page.locator('h1')).toHaveText('商品一覧');

    // お問い合わせページへの遷移
    await page.click('[data-testid="contact-link"]');

    // 遷移完了の確認
    await expect(page).toHaveURL('/contact');
    await expect(page).toHaveTitle(
      'EC サイト - お問い合わせ'
    );
  });
});

ブレッドクラム機能の遷移テスト

typescripttest('ブレッドクラムでの遷移確認', async ({ page }) => {
  // 深い階層のページから開始
  await page.goto(
    '/products/category/electronics/item/smartphone'
  );

  // ブレッドクラムの表示確認
  const breadcrumb = page.locator(
    '[data-testid="breadcrumb"]'
  );
  await expect(breadcrumb).toContainText(
    'ホーム > 商品一覧 > 電子機器 > スマートフォン'
  );

  // カテゴリページへの遷移
  await page.click(
    '[data-testid="breadcrumb"] a:has-text("電子機器")'
  );

  // 遷移確認
  await expect(page).toHaveURL(
    '/products/category/electronics'
  );
  await expect(page.locator('h1')).toHaveText(
    '電子機器カテゴリ'
  );
});

状態保持の検証

次に、ページ遷移時に状態が適切に保持されているかを検証するテストを見てみましょう。

フォーム入力状態の保持テスト

typescript// tests/form-state.spec.ts
test.describe('フォーム状態の保持', () => {
  test('複数ページフォームでの状態保持', async ({
    page,
  }) => {
    // Step 1: 個人情報入力ページ
    await page.goto('/register/step1');

    // フォーム入力
    await page.fill('[data-testid="first-name"]', '太郎');
    await page.fill('[data-testid="last-name"]', '田中');
    await page.fill(
      '[data-testid="email"]',
      'taro@example.com'
    );

    // 次のステップへ進む
    await page.click('[data-testid="next-button"]');

    // Step 2: 住所情報入力ページ
    await expect(page).toHaveURL('/register/step2');

    // 住所情報入力
    await page.fill(
      '[data-testid="postal-code"]',
      '123-4567'
    );
    await page.fill(
      '[data-testid="address"]',
      '東京都渋谷区'
    );

    // 戻るボタンで前のページに戻る
    await page.click('[data-testid="back-button"]');

    // Step 1の入力内容が保持されているか確認
    await expect(page).toHaveURL('/register/step1');
    await expect(
      page.locator('[data-testid="first-name"]')
    ).toHaveValue('太郎');
    await expect(
      page.locator('[data-testid="last-name"]')
    ).toHaveValue('田中');
    await expect(
      page.locator('[data-testid="email"]')
    ).toHaveValue('taro@example.com');

    // 再度次のステップへ
    await page.click('[data-testid="next-button"]');

    // Step 2の入力内容も保持されているか確認
    await expect(
      page.locator('[data-testid="postal-code"]')
    ).toHaveValue('123-4567');
    await expect(
      page.locator('[data-testid="address"]')
    ).toHaveValue('東京都渋谷区');
  });
});

検索条件の状態保持テスト

typescripttest('検索条件の状態保持', async ({ page }) => {
  await page.goto('/products');

  // 検索条件の設定
  await page.fill(
    '[data-testid="search-input"]',
    'スマートフォン'
  );
  await page.selectOption(
    '[data-testid="category-select"]',
    'electronics'
  );
  await page.check('[data-testid="in-stock-only"]');

  // 検索実行
  await page.click('[data-testid="search-button"]');

  // 検索結果の確認
  await expect(
    page.locator('[data-testid="product-list"]')
  ).toContainText('スマートフォン');

  // 商品詳細ページへ遷移
  await page.click(
    '[data-testid="product-item"]:first-child a'
  );

  // ブラウザの戻るボタンで検索結果ページに戻る
  await page.goBack();

  // 検索条件が保持されているか確認
  await expect(
    page.locator('[data-testid="search-input"]')
  ).toHaveValue('スマートフォン');
  await expect(
    page.locator('[data-testid="category-select"]')
  ).toHaveValue('electronics');
  await expect(
    page.locator('[data-testid="in-stock-only"]')
  ).toBeChecked();
});

複雑な状態管理フローのテスト

実際のアプリケーションでは、複数の状態が連携して動作する複雑なフローが存在します。以下は、ショッピングサイトでの購買フローを例にしたテストです。

ショッピングカートの状態管理テスト

typescript// tests/shopping-cart.spec.ts
test.describe('ショッピングカート状態管理', () => {
  test('カートから購入完了までの状態フロー', async ({
    page,
  }) => {
    // 商品一覧ページから開始
    await page.goto('/products');

    // 商品1をカートに追加
    await page.click(
      '[data-testid="product-1"] [data-testid="add-to-cart"]'
    );

    // カートアイコンの更新確認
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('1');

    // 別の商品詳細ページに遷移
    await page.goto('/products/2');

    // カート状態が保持されているか確認
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('1');

    // 商品2も追加
    await page.click('[data-testid="add-to-cart"]');
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('2');

    // カートページで内容確認
    await page.goto('/cart');

    // カート内容の詳細確認
    const cartItems = page.locator(
      '[data-testid="cart-item"]'
    );
    await expect(cartItems).toHaveCount(2);
    await expect(cartItems.nth(0)).toContainText('商品1');
    await expect(cartItems.nth(1)).toContainText('商品2');

    // 数量変更
    await page.fill(
      '[data-testid="cart-item"]:first-child [data-testid="quantity"]',
      '3'
    );
    await page.click('[data-testid="update-cart"]');

    // カートバッジの更新確認
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('4');

    // 購入手続きへ進む
    await page.click('[data-testid="proceed-checkout"]');

    // チェックアウトページでカート内容が引き継がれているか確認
    await expect(page).toHaveURL('/checkout');
    await expect(
      page.locator('[data-testid="checkout-items"]')
    ).toContainText('商品1 × 3');
    await expect(
      page.locator('[data-testid="checkout-items"]')
    ).toContainText('商品2 × 1');
  });
});

ユーザー認証状態の検証

typescripttest.describe('ユーザー認証状態', () => {
  test('ログイン状態での権限管理', async ({
    page,
    context,
  }) => {
    // 未ログイン状態での制限確認
    await page.goto('/profile');

    // ログインページにリダイレクトされることを確認
    await expect(page).toHaveURL('/login');

    // ログイン処理
    await page.fill(
      '[data-testid="email"]',
      'user@example.com'
    );
    await page.fill(
      '[data-testid="password"]',
      'password123'
    );
    await page.click('[data-testid="login-button"]');

    // ログイン後、元のページにリダイレクトされることを確認
    await expect(page).toHaveURL('/profile');

    // ユーザー情報の表示確認
    await expect(
      page.locator('[data-testid="user-name"]')
    ).toHaveText('テストユーザー');

    // 管理者限定ページへのアクセステスト
    await page.goto('/admin');

    // 権限不足でアクセス拒否されることを確認
    await expect(
      page.locator('[data-testid="access-denied"]')
    ).toBeVisible();

    // 新しいタブで同一セッションが維持されるか確認
    const newPage = await context.newPage();
    await newPage.goto('/profile');

    // 別タブでもログイン状態が維持されることを確認
    await expect(
      newPage.locator('[data-testid="user-name"]')
    ).toHaveText('テストユーザー');
  });
});

エラーハンドリングと復旧の検証

実際のアプリケーションでは、ネットワークエラーや API エラーなど、様々な異常状態が発生する可能性があります。これらの状況での状態管理を適切にテストすることも重要です。

ネットワークエラー時の状態保持テスト

typescript// tests/error-handling.spec.ts
test.describe('エラーハンドリング', () => {
  test('ネットワークエラー時の状態復旧', async ({
    page,
  }) => {
    await page.goto('/products');

    // 商品をカートに追加
    await page.click(
      '[data-testid="product-1"] [data-testid="add-to-cart"]'
    );
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('1');

    // ネットワークをオフラインに設定
    await page.context().setOffline(true);

    // 別のページに遷移を試行
    await page.goto('/contact');

    // エラーページまたはオフライン表示の確認
    await expect(
      page.locator('[data-testid="offline-indicator"]')
    ).toBeVisible();

    // ネットワークを復旧
    await page.context().setOffline(false);

    // ページリロード
    await page.reload();

    // カート状態が復旧されているか確認
    await expect(
      page.locator('[data-testid="cart-badge"]')
    ).toHaveText('1');
  });
});

API エラー時の状態管理テスト

typescripttest('APIエラー時の状態一貫性', async ({ page }) => {
  // API レスポンスをモック
  await page.route('/api/products', (route) => {
    route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({
        error: 'Internal Server Error',
      }),
    });
  });

  await page.goto('/products');

  // エラー状態の表示確認
  await expect(
    page.locator('[data-testid="error-message"]')
  ).toBeVisible();
  await expect(
    page.locator('[data-testid="error-message"]')
  ).toContainText('商品情報の取得に失敗しました');

  // リトライボタンのテスト
  // 正常なレスポンスにモックを変更
  await page.unroute('/api/products');
  await page.route('/api/products', (route) => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([
        { id: 1, name: '商品1', price: 1000 },
        { id: 2, name: '商品2', price: 2000 },
      ]),
    });
  });

  // リトライ実行
  await page.click('[data-testid="retry-button"]');

  // 正常状態への復旧確認
  await expect(
    page.locator('[data-testid="product-list"]')
  ).toBeVisible();
  await expect(
    page.locator('[data-testid="error-message"]')
  ).not.toBeVisible();
});

セッション期限切れ時の処理テスト

typescripttest('セッション期限切れ時の認証状態復旧', async ({
  page,
}) => {
  // ログイン状態で開始
  await page.goto('/login');
  await page.fill(
    '[data-testid="email"]',
    'user@example.com'
  );
  await page.fill(
    '[data-testid="password"]',
    'password123'
  );
  await page.click('[data-testid="login-button"]');

  await expect(page).toHaveURL('/dashboard');

  // セッション期限切れをシミュレート
  await page.evaluate(() => {
    localStorage.removeItem('auth_token');
    sessionStorage.clear();
  });

  // 認証が必要なAPIを呼び出すアクションを実行
  await page.click('[data-testid="load-profile"]');

  // 自動的にログインページにリダイレクトされることを確認
  await expect(page).toHaveURL('/login');
  await expect(
    page.locator('[data-testid="session-expired-message"]')
  ).toBeVisible();

  // 再ログイン後、元のページに戻ることを確認
  await page.fill(
    '[data-testid="email"]',
    'user@example.com'
  );
  await page.fill(
    '[data-testid="password"]',
    'password123'
  );
  await page.click('[data-testid="login-button"]');

  // ダッシュボードページに戻ることを確認
  await expect(page).toHaveURL('/dashboard');
});