e2etest

e2eテスト (Playwright)

基本方針

• テストファイルはapp/tests/に配置する
• セレクタはdata-testid属性を使用する（CSSクラスに依存しない）
• テストデータはbeforeAll / afterAllで作成・削除し、 テスト名にDate.now()を含めて一意にする

基本パターン

SvelteKitのhydration完了を待つには、次のtRPCレスポンス待ちパターンを使う。

waitForSelectorはSSRで描画されるため即返るが、onMountのAPI呼び出しはまだ完了していない。 SSE接続が常時開いているためwaitUntil: "networkidle"は利用できない。

await Promise.all([
  page.goto("/"),
  page.waitForResponse((res) => res.url().includes("/api/trpc")),
]);

セレクタの曖昧さに注意する。 button:has-text("追加")はサイドバーのリスト追加ボタンにも一致するため、 main button:has-text("追加")のようにスコープを限定する。

複数ブラウザ・マルチタブ

browser.newContext()を使う場合はbaseURLを明示する（page.goto("/")が動くため）。

複数ブラウザ（多端末同期）のテスト:

const ctx = await browser.newContext({
  storageState: "app/tests/.auth/user.json",
  ignoreHTTPSErrors: true,
  baseURL: process.env.BASE_URL ?? "https://localhost:38180",
});

上記ctxを2つ生成し、終了時はfinallyでctx.close()する。

SSE・ネットワーク制御

SSEイベントを受信しない状態を再現する場合は、 await ctx.route("**/api/events", route => route.abort())でSSEエンドポイントへの接続だけを遮断する。 /api/trpcは通るので削除等の通常操作は引き続き実行できる。

UI操作

ページ全体のスクロールを内部スクロールへ変更する場合など、高さ制約を変える作業では次をテスト設計時に確認する。

• 可変高の子要素を列挙し、各要素の公開上限と複数要素が同時に上限へ達する組合せを検証する
• 高さ制約の領域に隣接する主要操作が表示され、操作できることを検証する

ダイアログ操作の規約

確認・入力ダイアログは共通コンポーネント（ConfirmDialog / PromptDialog）に統一されている。 ネイティブのwindow.confirm / window.promptは発火しない。 そのため、e2eテストではPlaywrightのdialogイベント経由（page.once("dialog", ...)）ではなく、 ダイアログ内のボタンを直接押下する。

• 確認（削除等）は[role="dialog"]スコープのbutton:has-text("削除")を.last()でclickする
• 入力（名前変更等）は[role="dialog"]スコープのinput[type="text"]にfillしてから、 同スコープのbutton:has-text("変更")をclickして確定する

ネスト時に外側ダイアログのボタンを誤選択しないよう、role="dialog"スコープでlocatorを構築する。 複数候補がある場合は.last()で最前面のダイアログを取り出す。

クリップボード操作

クリップボードを使うテストでは、操作前に権限を付与してからnavigator.clipboard.readText()で検証する。

await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
await taskRow.locator('[data-testid="task-copy-btn"]').dispatchEvent("click");
await taskRow
  .locator('[data-testid="task-copy-menu"]')
  .waitFor({ timeout: 15000 });
await taskRow.locator('[data-testid="task-copy-all"]').dispatchEvent("click");
const copied = await page.evaluate(() => navigator.clipboard.readText());
expect(copied).toBe(`${title}\n\n${notes}`);

モバイルテスト

playwright.config.tsのmobile-chromeプロジェクトはモバイルブレークポイントの回帰検知用。 viewportのみPixel 5サイズへoverrideする構成を採用している（完全なmobile emulationではない）。 実タッチ入力でのD&D動作確認はChrome DevToolsのデバイスエミュレーション等で手動検証する。

高さ制約の回帰テストを追加または変更する前に、playwright.config.tsのtestMatchとtestIgnoreを照合し、 対象ファイルがデスクトップとモバイルのどちらで実行されるかを確認する。 高さ制約の領域と隣接する主要操作への到達性は、デスクトップと該当するモバイルテストの双方で検証する。

状態依存テストのリセット

ユーザー既定値（users.preferences等のサーバー側状態）に依存するテストは、 前回テスト失敗時の状態が残ると正しく動作しない。 本題の検証に入る前に冒頭で必ず初期状態へリセットしてから進める。 afterEachでのリセットだけではテスト失敗時に巻き戻らないため、冒頭での明示的リセットを優先する。

共通ヘルパーの利用

e2eテストでは共通ヘルパー（app/tests/helpers/common.ts）を利用する。 各テストファイルでBASE_URLやstorageStateパスを再定義しない。

公開シンボル一覧:

• BASE_URLはテスト対象のベースURL（環境変数BASE_URL優先、既定値https://localhost:38180）
• STORAGE_STATE_PATHは認証状態ファイルの絶対パス（import.meta.dirname基準）
• setupTestList(browser, listName)はbeforeAllからテスト用リストを作成する
• cleanupTestList(browser, listName)はafterAllからテスト用リストを削除する