状態遷移テストとは？状態遷移図・状態遷移表の作り方と実例をわかりやすく解説【Playwright対応】

状態遷移テストとは、システムの「状態」と「状態を変化させるイベント」を整理して、遷移が正しく動作するかを検証するテスト設計技法です。ログインフロー・ECカート・予約システムなど、状態を持つシステムのテストに特に効果を発揮します。

状態遷移テストを使うと「正常な遷移が正しく動くか」だけでなく「あってはならない遷移が正しく拒否されるか」まで体系的にテストでき、フロー系バグを根こそぎ防ぐことができます。

「ログアウト状態で注文確定ボタンを押したらどうなる？」「キャンセル済みの注文を再度キャンセルできてしまう？」——こうした「あってはならない操作」のテストを見落としていませんか？

• 正常フローしかテストしておらず、異常な状態遷移が見落とされる
• どの状態からどの操作が可能かが整理できていない
• フローが複雑になるほどテストケースが発散してしまう

状態遷移テストはこうした問題を解決する技法です。この記事では概念・状態遷移図・状態遷移表の作り方から、Playwright E2Eテストへの応用まで一気通貫で解説します。

状態遷移テストとは？

状態遷移テストとは、「システムが持つ状態」「状態を変化させるイベント（操作）」「遷移後の状態」「実行されるアクション」を整理して、すべての遷移が正しく動作するかを検証するテスト設計技法です。

例えばECサイトの注文フローでは「カート未追加」→「カート追加済み」→「注文確定」→「発送済み」→「受取完了」という状態の変化が発生します。状態遷移テストはこの流れを図や表で整理し、すべてのパターンを漏れなくテストします。

状態遷移テストの基本要素とは？

状態遷移テストを設計するには、次の4つの要素を整理します。

状態遷移図（State Diagram）の作り方とは？

状態遷移図は、状態を丸（○）・遷移を矢印（→）・イベントをラベルで表した図です。全体の流れを直感的に把握できます。

※ 状態は「丸」、遷移は「矢印」、イベントは「ラベル」で表現します。図を初めて読む場合は、まず丸（状態）を確認し、矢印（遷移）をたどってみましょう。

状態遷移図のメリット

• 全体の流れを一目で把握できる：状態と遷移の関係が視覚的にわかる
• チームへの説明が楽になる：開発・QA・ビジネス側で共通認識を持てる
• 見落としの発見に役立つ：図を書く過程で「この状態への遷移がないぞ？」という気づきが生まれる

状態遷移表（State Transition Table）の作り方とは？

状態遷移表は、状態遷移図を表形式に変換したものです。各状態×各イベントの組み合わせで「遷移先」または「無効（—）」を記入することで、テストケースを網羅的に洗い出せます。

実例：ログインフローの状態遷移表

表中の「—」はそのイベントが現在の状態では無効（発生してはいけない、または発生しても状態が変わらない）ことを示します。この「—」の部分こそが「無効遷移テスト」のテストケースになります。

実例：ECサイトの注文フロー

より実務に近い例として、ECサイトの注文フローをテストケースに落とし込みます。

✅は正常遷移テスト（正しい操作が正しく動く）、❌は無効遷移テスト（無効な操作が正しく拒否される）を示しています。両方をカバーすることで、フロー全体の品質を担保できます。

Playwright × pytestへの応用

状態遷移テストはPlaywright × pytestのE2Eテストと非常に相性がよく、「各状態をfixture・各遷移をテスト関数」として実装するのが実務のベストプラクティスです。

フォルダ構成の例

tests/
├── conftest.py              # fixtureの定義（状態の準備）
└── e2e/
    └── test_order_flow.py   # 注文フローの状態遷移テスト

conftest.py：状態をfixtureで準備する

import pytest
from playwright.sync_api import Page

@pytest.fixture
def logged_in_page(page: Page):
    """状態：ログイン中（ログイン済みのページを返す）"""
    page.goto("localhost:3000/login")
    page.fill("#username", "test_user")
    page.fill("#password", "secret_pass")
    page.click("#login-btn")
    page.wait_for_url("**/dashboard")
    return page

@pytest.fixture
def cart_added_page(logged_in_page: Page):
    """状態：カート追加済み（ログイン済み＋商品追加済み）"""
    logged_in_page.goto("localhost:3000/products/1")
    logged_in_page.click("#add-to-cart")
    logged_in_page.wait_for_selector(".cart-badge")
    return logged_in_page

test_order_flow.py：遷移をテスト関数として実装する

from playwright.sync_api import Page, expect

# TC-01：カート未追加 → 商品追加 → カート追加済み
def test_add_item_to_cart(logged_in_page: Page):
    logged_in_page.goto("localhost:3000/products/1")
    logged_in_page.click("#add-to-cart")
    expect(logged_in_page.locator(".cart-badge")).to_have_text("1")

# TC-02：カート追加済み → 購入確定 → 注文確定
def test_confirm_order(cart_added_page: Page):
    cart_added_page.goto("localhost:3000/cart")
    cart_added_page.click("#checkout-btn")
    expect(cart_added_page.locator(".order-status")).to_have_text("注文確定")

# TC-04：カート未追加 → 購入確定（無効遷移）
def test_checkout_without_cart(logged_in_page: Page):
    logged_in_page.goto("localhost:3000/cart")
    # カートが空のときは購入ボタンが無効化されているか確認
    expect(logged_in_page.locator("#checkout-btn")).to_be_disabled()

# TC-05：キャンセル済み → 再キャンセル（無効遷移）
def test_cancel_already_cancelled_order(logged_in_page: Page):
    logged_in_page.goto("localhost:3000/orders/cancelled-order")
    # キャンセル済み注文にはキャンセルボタンが存在しないことを確認
    expect(logged_in_page.locator("#cancel-btn")).not_to_be_visible()

⚠️ 状態遷移テストでよくある失敗パターン4選

実務で状態遷移テストを設計するときに陥りやすい失敗を紹介します。

FAQ

📋 この記事のまとめ

状態遷移テストの最大の価値は「正常フローだけではわからないバグ」を体系的に発見できる点です。まずはログインフローや注文フローなど身近なシステムの状態遷移図を1枚書いてみることから始めましょう。図を書くだけで「この遷移のテスト、やってなかった！」という気づきが必ず生まれます。