使うもの

  • playwright
  • biome（リンター兼フォーマッター）
  • tsgo（型チェック）
  • valibot（スキーマ）

手順

  1. 環境のセットアップ 環境構築は割愛

  2. Playwrightで操作の録画を行う playwright codegenで録画環境を起動し、1シナリオ分のテスト動作を録画する 録画中に行った動作はPlaywrightコードとして生成されているのでこれを下書きにする

  3. 録画結果の修正 余分な動作や不安定そうなセレクターの手動修正を行う 複雑なセレクターが多い場合にはフロントの実装にdatatest-idを付与することも検討

  4. ひたすら実行 目標となる動きが完成するまでひたすら try & error この時の失敗とその解消方法はClaudeでまとめさせてskillsとして保存しておく

  5. 他のシナリオにも着手 2と3の操作をシナリオの数分行う。 4の作業に入るまえに5で作成したskillsを走らせておく

  6. コードベースを綺麗にする

  • テストデータや期待値のObjectに対して型を宣言し、静的型付けを進める
  • decribeとtestを正しく使い分けを行う
  • 共通のヘルパー関数への切り出し
  • fixtureの整理
  1. 長期的な運用に耐えうるかチェック
  • 新規のテストが追加しやすいか
  • 何度か実行してフレーキーテストになっていないか
  • 待機ステップの見直し（極力「1秒待機」などの待機ステップは避ける）