ReactのアプリをPlaywrightで操作してテストする方法

// src/TodoApp.tsx
import { useEffect, useState } from 'react';
import type { FormEvent } from 'react';

type Todo = { id: number; title: string; done: boolean };

export function TodoApp() {
  const [todos, setTodos] = useState<Todo[] | null>(null);
  const [title, setTitle] = useState('');
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    fetch('/api/todos.json')
      .then((res) => res.json())
      .then((data: Todo[]) => setTodos(data));
  }, []);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!title.trim()) return;
    setSaving(true);
    // 保存に時間がかかる場面の代わりに、0.8秒待つ
    await new Promise((resolve) => setTimeout(resolve, 800));
    setTodos((prev) => [...(prev ?? []), { id: Date.now(), title: title.trim(), done: false }]);
    setTitle('');
    setSaving(false);
  }

  function toggle(id: number) {
    setTodos((prev) => prev!.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  }

  return (
    <main>
      <h1>やること</h1>
      <form onSubmit={handleSubmit}>
        <label>
          新しいやること
          <input value={title} onChange={(e) => setTitle(e.target.value)} />
        </label>
        <button type="submit" disabled={saving}>
          {saving ? '追加中…' : '追加'}
        </button>
      </form>
      {todos === null ? (
        <p>読み込み中…</p>
      ) : (
        <>
          {todos.length === 0 && <p>やることはありません</p>}
          <ul>
            {todos.map((t) => (
              <li key={t.id}>
                <label>
                  <input type="checkbox" checked={t.done} onChange={() => toggle(t.id)} />
                  {t.title}
                </label>
              </li>
            ))}
          </ul>
          <p role="status">残り {todos.filter((t) => !t.done).length} 件</p>
        </>
      )}
    </main>
  );
}

[
  { "id": 1, "title": "牛乳を買う", "done": false },
  { "id": 2, "title": "本を返す", "done": true }
]

npm install -D -E @playwright/test@1.56.1

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  reporter: [['list'], ['html', { open: 'never' }]],
  use: {
    baseURL: 'http://localhost:5173',
    screenshot: 'only-on-failure',
  },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

// e2e/todo.spec.ts
import { test, expect } from '@playwright/test';

test('やることを追加すると、一覧と残りの件数が増える', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('listitem')).toHaveCount(2);

  await page.getByLabel('新しいやること').fill('猫の爪を切る');
  await page.getByRole('button', { name: '追加' }).click();

  await expect(page.getByRole('listitem')).toHaveText(['牛乳を買う', '本を返す', '猫の爪を切る']);
  await expect(page.getByRole('status')).toHaveText('残り 2 件');
  await expect(page.getByLabel('新しいやること')).toHaveValue('');
});

test('チェックを入れると、残りの件数が減る', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('checkbox', { name: '牛乳を買う' }).check();
  await expect(page.getByRole('status')).toHaveText('残り 0 件');
});

test('APIの返す一覧が空なら、そのことを表示する', async ({ page }) => {
  await page.route('**/api/todos.json', (route) => route.fulfill({ json: [] }));
  await page.goto('/');
  await expect(page.getByText('やることはありません')).toBeVisible();
  await expect(page.getByRole('listitem')).toHaveCount(0);
});

$ CI=1 npx playwright test; echo "exit=$?"

Running 3 tests using 1 worker

  ✓  1 [chromium] › e2e/todo.spec.ts:3:1 › やることを追加すると、一覧と残りの件数が増える (1.3s)
  ✓  2 [chromium] › e2e/todo.spec.ts:15:1 › チェックを入れると、残りの件数が減る (349ms)
  ✓  3 [chromium] › e2e/todo.spec.ts:21:1 › APIの返す一覧が空なら、そのことを表示する (311ms)

  3 passed (3.9s)
exit=0

$ CI=1 npx playwright test --grep "チェック" --reporter=line; echo "exit=$?"

Running 1 test using 1 worker

[1/1] [chromium] › e2e/todo.spec.ts:15:1 › チェックを入れると、残りの件数が減る
  1 passed (2.4s)
exit=0

// e2e/no-wait.spec.ts
import { test, expect } from '@playwright/test';

test('件数をすぐに読むと、追加が終わる前の数になる', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('listitem')).toHaveCount(2);

  await page.getByLabel('新しいやること').fill('猫の爪を切る');
  await page.getByRole('button', { name: '追加' }).click();

  expect(await page.getByRole('listitem').count()).toBe(3);
});

$ CI=1 npx playwright test e2e/no-wait.spec.ts --reporter=list; echo "exit=$?"
（中略）
    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 3
    Received: 2

       8 |   await page.getByRole('button', { name: '追加' }).click();
       9 |
    > 10 |   expect(await page.getByRole('listitem').count()).toBe(3);
         |                                                    ^

<           <p role="status">残り {todos.filter((t) => !t.done).length} 件</p>
---
>           <p role="status">残り {todos.length} 件</p>

$ CI=1 npx playwright test --reporter=list,html; echo "exit=$?"

Running 3 tests using 1 worker

  ✘  1 [chromium] › e2e/todo.spec.ts:3:1 › やることを追加すると、一覧と残りの件数が増える (6.3s)
  ✘  2 [chromium] › e2e/todo.spec.ts:15:1 › チェックを入れると、残りの件数が減る (5.4s)
  ✓  3 [chromium] › e2e/todo.spec.ts:21:1 › APIの返す一覧が空なら、そのことを表示する (347ms)
（中略）
  2) [chromium] › e2e/todo.spec.ts:15:1 › チェックを入れると、残りの件数が減る ───────────────────────────────────────

    Error: expect(locator).toHaveText(expected) failed

    Locator:  getByRole('status')
    Expected: "残り 0 件"
    Received: "残り 2 件"
    Timeout:  5000ms

    Call log:
      - Expect "toHaveText" with timeout 5000ms
      - waiting for getByRole('status')
        9 × locator resolved to <p role="status">残り 2 件</p>
          - unexpected value "残り 2 件"

$ CI=1 npx playwright test --reporter=line; echo "exit=$?"
Error: http://localhost:5173 is already used, make sure that nothing is running on the port/url or set reuseExistingServer:true in config.webServer.

exit=1

$ npx playwright test --reporter=line; echo "exit=$?"

Running 3 tests using 1 worker

[1/3] [chromium] › e2e/todo.spec.ts:3:1 › やることを追加すると、一覧と残りの件数が増える
[2/3] [chromium] › e2e/todo.spec.ts:15:1 › チェックを入れると、残りの件数が減る
[3/3] [chromium] › e2e/todo.spec.ts:21:1 › APIの返す一覧が空なら、そのことを表示する
  3 passed (3.0s)
exit=0