添付ファイルテストの競合状態をsrc確定待ちで解消

添付ファイルのギャラリーテストで発生していた断続的な失敗（フレーキーテスト）を、画像の src 属性が確定するまで待機する関数を導入することで解消しました。

背景

src スワッピングの導入により、画像アップロード後に src 属性が非同期で切り替わるタイミングで競合状態が生じていました。具体的には、src の切り替えが発生すると選択状態（selection）がクリアされてしまうため、クリック直後に要素を操作するテストが不安定になっていました。

この問題は複数の添付ファイルテストに影響しており、gallery.test.js 内でアタッチメントをクリックしてから2枚目の画像をアップロードするシナリオで特に頻繁に再現していました。

技術的な変更

競合状態を回避するために、selectAttachment というヘルパー関数が追加され、直接の click() 呼び出しを置き換えました。

変更前:

await page.locator("figure.attachment img").click()

変更後:

await selectAttachment(page)

追加された selectAttachment 関数は以下の3ステップで構成されています：

async function selectAttachment(page) {
  await page.locator("figure.attachment img[src*='/blobs/']").waitFor()
  await page.locator("figure.attachment img").click()
  await expect(page.locator("figure.attachment")).toHaveClass(/node--selected/)
}

まず img[src*='/blobs/'] セレクタで /blobs/ を含む最終的な src が確定するまで待機し、その後クリックを実行し、最後に node--selected クラスが付与されたことを確認します。この3ステップにより、src スワッピング完了前にクリックが走る競合状態と、クリック後に選択状態が確立されていない状態での次操作への進行、双方を防ぎます。この変更は gallery.test.js 内の2箇所の呼び出し元に適用されています。

設計判断

セレクタによる状態確認を待機条件として活用するアプローチが採用されました。

単純に固定の遅延（waitForTimeout）を挿入するのではなく、img[src*='/blobs/'] というセレクタで「最終的なBlobストレージURLへの切り替え完了」という具体的な状態をポーリングしています。また、クリック後には toHaveClass(/node--selected/) によるアサーションを挿入することで、次のテストステップへ進む前に選択状態の確立を保証しています。これらを単一のヘルパー関数にカプセル化した点も重要で、同じ操作パターンが必要な将来のテストで再利用できるようになっています。

まとめ

本PRは、非同期な src スワッピングという実装の副作用に起因する競合状態を、テスト側で状態遷移を明示的に待機することで解消した変更です。固定遅延ではなくセレクタベースの待機とアサーションを組み合わせたヘルパー関数として実装することで、テストの信頼性と再利用性を同時に高めています。