Playwright Agents を Codex CLI に対応させブラウザ自動テストを実装してもらう（公式が未サポートだけどできました）

品質保証、ユーザーエクスペリエンステスト、テストシナリオ設計において豊富な経験を持つ、Webテストプランナーとしてのエキスパートです。

専門分野には、機能テスト、エッジケースの特定、包括的なテストカバレッジ計画が含まれます。

以下の内容を実施します。

1. **ナビゲーションと探索**
– 他のツールを使用する前に、`planner_setup_page` ツールを一度呼び出してページをセットアップします。
– ブラウザのスナップショットを探索します。
– 絶対に必要な場合を除き、スクリーンショットを撮らないでください。
– browser_* ツールを使用してインターフェースをナビゲートし、探索します。
– インターフェースを徹底的に探索し、すべてのインタラクティブ要素、フォーム、ナビゲーションパス、および機能を特定します。

2. **ユーザーフローを分析**
– 主要なユーザージャーニーをマッピングし、アプリケーションにおけるクリティカルパスを特定します。
– さまざまなユーザータイプとその典型的な行動を考慮します。

3. **包括的なシナリオを設計**

以下の項目を含む詳細なテストシナリオを作成します。
– ハッピーパスシナリオ（通常のユーザー行動）
– エッジケースと境界条件
– エラー処理と検証

4. **テスト計画の構築**

各シナリオには以下を含める必要があります。
– 明確で説明的なタイトル
– 詳細な手順説明
– 必要に応じて期待される結果
– 開始状態に関する前提条件（常に空白/新規状態
– 成功基準と失敗条件

5. **ドキュメントの作成**
要求に応じてテスト計画を保存します。
– テスト対象のページ/アプリケーションのエグゼクティブサマリー
– 個々のシナリオを個別のセクションにまとめる
– 各シナリオを番号付きのステップでフォーマットする
– 検証のために期待される結果を明確にする

# TodoMVC アプリケーション – 包括的なテスト計画

## アプリケーションの概要

TodoMVC アプリケーションは、コアとなるタスク管理機能を提供する React ベースの ToDo リストマネージャーです。アプリケーションの機能:

– **タスク管理**: 個々の ToDo を追加、編集、完了、削除
– **一括操作**: すべての ToDo を完了/未完了としてマークし、完了済みの ToDo をすべてクリア
– **フィルタリング**: ToDo を「すべて」、「アクティブ」、「完了」のステータスで表示
– **URL ルーティング**: URL 経由でフィルタリングされたビューに直接移動可能
– **カウンター表示**: アクティブ (未完了) ToDo のリアルタイムカウント
– **永続性**: セッション中は状態が維持されます (ブラウザの更新動作はテストされていません)

## テストシナリオ

### 1. 新しい ToDo の追加

**シード:** `tests/seed.spec.ts`

#### 1.1 有効な ToDo を追加
**手順:**
1. 「何をする必要がありますか?」をクリックします。入力フィールド
2. 「食料品を購入」と入力
3. Enterキーを押す

**期待される結果:**
– チェックボックスがオフになった状態でToDoがリストに表示される
– カウンターに「残り1項目」と表示される
– 入力フィールドの内容がクリアされ、次の入力が可能になる
– ToDoリストのコントロールが表示される（「すべて完了としてマーク」チェックボックス）

#### 1.2
…

**品質基準**:
– どのテスターでも実行できるほど具体的な手順を記述する
– ネガティブテストシナリオを含める
– シナリオが独立しており、任意の順序で実行できることを確認する

**出力形式**: 完全なテスト計画は、明確な見出し、番号付きステップ、そして開発チームやQAチームと共有しやすいプロフェッショナルなフォーマットで、必ずマークダウンファイルとして保存してください。

# GMOエンジニアブログ「Playwright」検索テスト計画

## エグゼクティブサマリー

– 対象は「GMOインターネットグループ グループ研究開発本部」サイト内のエンジニアブログ (`https://recruit.group.gmo/engineer/jisedai/blog/`) と、その検索機能。
– ブログページにはグローバルナビゲーション、記事一覧、サイドバーウィジェット（検索フォーム、バナー、タグクラウドなど）が表示される。検索フォームはサイドバー上部に配置され、`検索:` ラベル付きのテキストボックスと `検索` ボタンで構成される。
– 検索実行後は `?s=<入力値>` 付きURLの検索結果ページに遷移し、メインカラムに「「<検索語>」の検索結果」という見出しと一致記事のカードが並ぶ。各カードには公開日、タイトル、関連タグが表示され、クリックで詳細記事へ遷移できる。
– ヒットが無い場合は「お探しの記事は見つかりませんでした。」というメッセージが表示され、サイドバーには検索フォームとタグクラウドが継続して表示される。
– サイトはWordPress系構成であり、ブラウザバック時に検索フォームへ入力した語が保持される。サイズの大きいメインカラムのため、検索フォームが初期表示で見えない場合はスクロールが必要。

## テストシナリオ

### シナリオ1: ブログトップから検索ボタンで「Playwright」を検索
**前提:** デスクトップブラウザ、キャッシュ/クッキーをクリアした新規セッション。
**手順:**
1. `https://recruit.group.gmo/engineer/jisedai/blog/` を開く。
– 期待結果: タイトルに「エンジニアブログ」が表示され、記事カード一覧とサイドバーが読み込まれる。
2. サイドバー上部の検索フォームが見える位置までスクロールし、`検索:` テキストボックスと `検索` ボタンを確認する。
– 期待結果: テキストボックスが空でフォーカス可能になっている。
3. テキストボックスに「Playwright」と入力する。
– 期待結果: 入力値が反映され、IME確定後も保持される。
4. `検索` ボタンをクリックする。
– 期待結果: ページがリロードされ、URLに `?s=Playwright` が付与された検索結果ページへ遷移する。
**成功条件:** 検索結果ページが表示され、後続シナリオの検証に必要な要素が揃う。
**失敗条件:** 検索フォームが見つからない、クリック後に遷移しない、別ドメインへリダイレクトされるなど。

### シナリオ2: Enterキーで検索を実行
**前提:** シナリオ1完了後、またはブログトップを再度開いた状態。
**手順:**
1. 検索フォームを表示し、テキストボックスに「Playwright」を入力する。
– 期待結果: 入力値がフィールドに表示される。
2. フォーカスをテキストボックスに残したまま Enter キーを押下する。
– 期待結果: `検索` ボタンを押した場合と同様にページ遷移し、URLに `?s=Playwright` が付与される。
**成功条件:** キーボード操作のみで検索が成立し、表示結果がシナリオ1と一致する。
**失敗条件:** Enter押下で何も起きない、または別のページ遷移が発生する。

### シナリオ3: 「Playwright」検索結果ページの表示要素を検証
**前提:** `https://recruit.group.gmo/engineer/jisedai?s=Playwright` に遷移済み。
**手順:**
1. ブラウザタブのタイトルを確認する。
– 期待結果: 「Playwright – GMOインターネットグループ グループ研究開発本部」と表示され、検索語がタイトルに含まれる。
2. メインカラムの見出しを確認する。
– 期待結果: `「Playwright」の検索結果` と表示される。
3. 記事カードをすべて確認する。
– 期待結果: 5件（最低でも1件）以上のカードが存在し、各カードに公開日、クリック可能なタイトル、タグ一覧が表示される。最上段の記事タイトルが「playwright mcpをAI駆動開発フローに組み込んでE2Eテストをさせよう」である。
4. サイドバーの検索フォームを確認する。
– 期待結果: テキストボックスに `Playwright` が保持されている。
**成功条件:** 検索結果ページで必要なメタ情報・リスト構造・フォームの状態保持が確認できる。
**失敗条件:** 見出しの表記が欠落、件数が0件、カードの構造が崩れているなど。

### シナリオ4: 検索結果から記事詳細へ遷移して内容を確認
**前提:** シナリオ3完了後。
**手順:**
1. 検索結果の1件目（`playwright mcpをAI駆動開発フローに組み込んでE2Eテストをさせよう`）のタイトルリンクをクリックする。
– 期待結果: 記事詳細 (`…/blog/e2e-test-by-playwright-mcp/`) に遷移し、読み込みが正常に完了する。
2. 記事ヘッダーの情報を確認する。
– 期待結果: 公開日が `2025.09.30` 形式で表示され、H1が検索結果で確認したタイトルと一致する。
3. タグ一覧を確認する。
– 期待結果: タグの中に `playwright` が存在し、クリック可能である。
4. ブラウザの戻る操作を実行する。
– 期待結果: 検索結果ページに戻り、検索語 `Playwright` が保持された状態で記事リストが再表示される。
**成功条件:** 詳細ページの主要情報が正しく表示され、戻る操作で検索状態が維持される。
**失敗条件:** タイトル不一致、タグ欠落、戻る操作で検索語が消えるなど。

### シナリオ5: 該当なしキーワードでの検索メッセージ確認
**前提:** ブログトップ、または検索結果ページの検索フォームが利用可能。
**手順:**
1. テキストボックスに存在しない語（例: `ZXY999`）を入力する。
– 期待結果: 入力値が反映される。
2. `検索` ボタンをクリックする。
– 期待結果: URLが `?s=ZXY999` となり、メインカラム見出しが `「ZXY999」の検索結果` に変わる。
3. メインカラムのメッセージを確認する。
– 期待結果: `お探しの記事は見つかりませんでした。` の文言が表示され、記事カードは生成されない。
**成功条件:** 該当なしメッセージが表示され、不要な空カードが存在しない。
**失敗条件:** 空結果でも記事カードが表示される、エラーページへ遷移するなど。

### シナリオ6: 空検索やスペースのみ入力時の挙動を確認
**前提:** ブログトップまたは検索結果ページ上の検索フォームが利用可能。
**手順:**
1. テキストボックスを空のまま `検索` ボタンをクリックする。
– 期待結果: 入力が必須であれば警告が表示される、もしくは検索が実行されない。（現状観測: 全件リストが表示され、見出しが `「」の検索結果` となる）
2. テキストボックスにスペースのみ（例: 半角スペース2個）を入力して `検索` ボタンをクリックする。
– 期待結果: 不正入力として扱われるか、自動的にトリムされ `Playwright` と同じ検索結果が返る。（現状観測: URLに `s=++` が付き、全件リストが表示される）
**成功条件:** 入力バリデーションの仕様が明確になり、想定と異なる場合は不具合として報告できる。
**失敗条件:** 空入力で不正なページ遷移が起きる、エラー表示が崩れるなど。

### シナリオ7: 大文字・小文字・前後スペースの正規化確認
**前提:** シナリオ1で基準となる検索結果を取得済み。
**手順:**
1. `playwright`（小文字）で検索を実行する。
– 期待結果: URLが `?s=playwright` となり、表示される記事ラインアップと件数が `?s=Playwright` の結果と一致する。
2. `PLAYWRIGHT`（全大文字）で検索を実行する。
– 期待結果: 大文字小文字に関わらず同じ結果が返る。
3. 先頭末尾にスペースを含む ` Playwright `（前後半角スペース）で検索を実行する。
– 期待結果: 結果の集合が基準検索と一致し、検索結果見出しやURLの表記揺れ（`「 Playwright 」` や `s=++Playwright++`）が仕様として許容されるか判断できる。
**成功条件:** 検索ロジックが大文字小文字やスペースの差異を吸収して同一結果を返す。
**失敗条件:** 文字種の違いで結果が欠落する、スペースのみで内部エラーが発生するなど。

// spec: gmo-blog-playwright-search.md
// seed: seed.spec.ts

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

test.describe('シナリオ1: ブログトップから検索ボタンで「Playwright」を検索', () => {
  test('シナリオ1: ブログトップから検索ボタンで「Playwright」を検索', async ({ page }) => {
    // 1. `https://recruit.group.gmo/engineer/jisedai/blog/` を開く。
    await page.goto('https://recruit.group.gmo/engineer/jisedai/blog/');
    await expect(page).toHaveTitle(/エンジニアブログ/);
    await expect(page.locator('main article').first()).toBeVisible();

    // 2. サイドバー上部の検索フォームが見える位置までスクロールし、`検索:` テキストボックスと `検索` ボタンを確認する。
    const searchTextbox = page.getByRole('textbox', { name: '検索:' });
    await searchTextbox.scrollIntoViewIfNeeded();
    await expect(searchTextbox).toBeVisible();
    await expect(searchTextbox).toBeEditable();
    await expect(searchTextbox).toHaveValue('');
    const searchButton = page.getByRole('button', { name: '検索' });
    await expect(searchButton).toBeVisible();

    // 3. テキストボックスに「Playwright」と入力する。
    await searchTextbox.fill('Playwright');
    await expect(searchTextbox).toHaveValue('Playwright');

    // 4. `検索` ボタンをクリックする。
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=Playwright$/),
      searchButton.click(),
    ]);
    await expect(page).toHaveTitle(/Playwright - GMOインターネットグループ/);
    await expect(page.getByRole('heading', { level: 1, name: '「Playwright」の検索結果' })).toBeVisible();
    await expect(page.locator('main article')).not.toHaveCount(0);
  });
});

// spec: gmo-blog-playwright-search.md
// seed: seed.spec.ts

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

const BLOG_TOP_URL = 'https://recruit.group.gmo/engineer/jisedai/blog/';

test.describe('GMOエンジニアブログ「Playwright」検索テスト計画', () => {
  test('シナリオ1: ブログトップから検索ボタンで「Playwright」を検索', async ({ page }) => {
    const readResultTitles = async () => {
      const titles = await page.locator('main article h2').allTextContents();
      return titles.map(title => title.trim());
    };

    // 1. `https://recruit.group.gmo/engineer/jisedai/blog/` を開く。
    await page.goto(BLOG_TOP_URL);
    await expect(page).toHaveTitle(/エンジニアブログ/);
    await expect(page.locator('main article').first()).toBeVisible();

    const searchTextbox = page.getByRole('textbox', { name: '検索:' });
    const searchButton = page.getByRole('button', { name: '検索' });

    // 2. サイドバー上部の検索フォームが見える位置までスクロールし、`検索:` テキストボックスと `検索` ボタンを確認する。
    await searchTextbox.scrollIntoViewIfNeeded();
    await expect(searchTextbox).toBeVisible();
    await expect(searchTextbox).toBeEditable();
    await expect(searchTextbox).toHaveValue('');
    await expect(searchButton).toBeVisible();

    // 3. テキストボックスに「Playwright」と入力する。
    await searchTextbox.fill('Playwright');
    await expect(searchTextbox).toHaveValue('Playwright');

    // 4. `検索` ボタンをクリックする。
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=Playwright$/),
      searchButton.click(),
    ]);
    await expect(page).toHaveTitle(/Playwright - GMOインターネットグループ/);
    const playwrightHeading = page.getByRole('heading', { level: 1, name: '「Playwright」の検索結果' });
    await expect(playwrightHeading).toBeVisible();

    // シナリオ3 1. ブラウザタブのタイトルを確認する。
    await expect(page).toHaveTitle('Playwright - GMOインターネットグループ グループ研究開発本部');

    // シナリオ3 2. メインカラムの見出しを確認する。
    await expect(playwrightHeading).toBeVisible();

    // シナリオ3 3. 記事カードをすべて確認する。
    const resultCards = page.locator('main article');
    const cardCount = await resultCards.count();
    expect(cardCount).toBeGreaterThanOrEqual(5);
    const firstCard = resultCards.first();
    //await expect(firstCard.locator('p').first()).toHaveText('2025/09/30');
    await expect(firstCard.locator('h2')).toHaveText(/Playwright/i);
    const firstCardTags = (await firstCard.locator('li').allTextContents()).map(tag => tag.trim()).filter(Boolean);
    expect(firstCardTags.length).toBeGreaterThan(0);
    expect(firstCardTags).toContain('playwright');
    const expectedPlaywrightResults = await readResultTitles();

    // シナリオ3 4. サイドバーの検索フォームを確認する。
    await expect(searchTextbox).toHaveValue('Playwright');

    // シナリオ4 1. 検索結果の1件目（`playwright..`）のタイトルリンクをクリックする。
    const firstResultLink = page.locator('main li:has(article) > a').first();
    await expect(firstResultLink).toBeVisible();
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\/blog\/[\w-]+\/$/),
      firstResultLink.click(),
    ]);

    // シナリオ4 2. 記事ヘッダーの情報を確認する。
    const article = page.locator('main article').first();
    //await expect(article.locator('p').first()).toHaveText('2025.09.30');
    await expect(article.locator('h1')).toHaveText(/Playwright/i);

    // シナリオ4 3. タグ一覧を確認する。
    const playwrightTag = article.locator('li a', { hasText: 'playwright' });
    await expect(playwrightTag.first()).toHaveAttribute('href', /tag\/playwright/);

    // シナリオ4 4. ブラウザの戻る操作を実行する。
    await page.goBack();
    await expect(page).toHaveURL(/\/engineer\/jisedai\?s=Playwright$/);
    await expect(searchTextbox).toHaveValue('Playwright');

    // シナリオ5 1. テキストボックスに存在しない語（例: `ZXY999`）を入力する。
    await searchTextbox.fill('ZXY999');
    await expect(searchTextbox).toHaveValue('ZXY999');

    // シナリオ5 2. `検索` ボタンをクリックする。
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=ZXY999$/),
      searchButton.click(),
    ]);

    // シナリオ5 3. メインカラムのメッセージを確認する。
    await expect(page.getByRole('heading', { level: 1, name: '「ZXY999」の検索結果' })).toBeVisible();
    await expect(page.getByText('お探しの記事は見つかりませんでした。')).toBeVisible();
    await expect(page.locator('main article h2')).toHaveCount(0);

    // シナリオ6 1. テキストボックスを空のまま `検索` ボタンをクリックする。
    await searchTextbox.fill('');
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=$/),
      searchButton.click(),
    ]);
    await expect(page.getByRole('heading', { level: 1, name: '「」の検索結果' })).toBeVisible();
    const allResults = await readResultTitles();
    expect(allResults.length).toBeGreaterThan(0);

    // シナリオ6 2. テキストボックスにスペースのみ（例: 半角スペース2個）を入力して `検索` ボタンをクリックする。
    await searchTextbox.fill('  ');
    await expect(searchTextbox).toHaveValue('  ');
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=\+\+$/),
      searchButton.click(),
    ]);
    await expect(page.getByRole('heading', { level: 1, name: '「 」の検索結果' })).toBeVisible();
    const spaceOnlyResults = await readResultTitles();
    expect(spaceOnlyResults.length).toBeGreaterThan(0);

    // シナリオ7 1. `playwright`（小文字）で検索を実行する。
    await searchTextbox.fill('playwright');
    await expect(searchTextbox).toHaveValue('playwright');
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=playwright$/),
      searchButton.click(),
    ]);
    await expect(page.getByRole('heading', { level: 1, name: '「playwright」の検索結果' })).toBeVisible();
    expect(await readResultTitles()).toEqual(expectedPlaywrightResults);

    // シナリオ7 2. `PLAYWRIGHT`（全大文字）で検索を実行する。
    await searchTextbox.fill('PLAYWRIGHT');
    await expect(searchTextbox).toHaveValue('PLAYWRIGHT');
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=PLAYWRIGHT$/),
      searchButton.click(),
    ]);
    await expect(page.getByRole('heading', { level: 1, name: '「PLAYWRIGHT」の検索結果' })).toBeVisible();
    expect(await readResultTitles()).toEqual(expectedPlaywrightResults);

    // シナリオ7 3. 先頭末尾にスペースを含む ` Playwright `（前後半角スペース）で検索を実行する。
    await searchTextbox.fill(' Playwright ');
    await expect(searchTextbox).toHaveValue(' Playwright ');
    await Promise.all([
      page.waitForURL(/\/engineer\/jisedai\?s=\+Playwright\+$/),
      searchButton.click(),
    ]);
    await expect(page.getByRole('heading', { level: 1, name: '「 Playwright 」の検索結果' })).toBeVisible();
    expect(await readResultTitles()).toEqual(expectedPlaywrightResults);
    await expect(searchTextbox).toHaveValue(' Playwright ');
  });
});