Playwright

前回（#24）は画面の枠でした。今回は、キャンプの中身です。 一覧のカードを、広い幅でも2列にする。実績期間が入っていれば、実績の日付を出す。日付の書き方をそろえる（#116） キャンプに、おすすめ度と感想を足す。編集画面を「行く前」「行っ …

前回（#22）に続いて、見た目の手直しです。今回は、#20で作ったカード表示を直します（#110・#112）。 前回は「サンプル画像を見て決めれば、あとからの直しが出ない」という話でした。今回は、サンプルを見て決めても、使ってみたら直したく …

#19でタイトルバナーとロゴを入れてから、気になることが出てきました。ロゴやアイコンは丸みのある絵なのに、画面の文字は端末の標準のフォントのままで、雰囲気が合っていません。 今回は、画面のフォントを変えます（#102）。

ギアにも（#12）、キャンプにも（#15）画像を付けられるようにしましたが、一覧は文字のリストのままでした。画像は、編集画面やキャンプの画面を開かないと見られません。 今回は、一覧をカード表示に切り替えられるようにします。ギアの一 …

機能が増えるにつれて、E2E テストも増えてきました。気がつくと、PR を出してから CI が終わるまで10分以上待つようになっていました。 今回は、アプリの機能ではなく、開発の流れの見直しです。 デプロイのときは E2E を流さな …

前回（#15）でキャンプの情報がそろったので、今回は持ち物の側を広げます。ガス缶・薪・調味料・食材など、キャンプのたびに減ったり、用意し直したりするもの（消耗品）です。 Notion の「今後の機能強化」の「消耗品の管理」にあたり、ステッ …

前回（#5）のコンテナの機能を作っている途中で、E2Eテストが通ったり落ちたりするようになりました。 落ちるテストが実行のたびに変わる、いわゆる「不安定なテスト」です。 原因は1つではなく、4つありました。今回は、その見つけ方と直し方の記録 …

家計簿アプリ作成シリーズの第95回です。前回のレシート画像APIの所有者チェックは、目で見て確認しただけでした。うっかり壊しやすい部分なので、E2Eテストで固めておきます。

家計簿アプリ作成シリーズの第87回です。お題59でVitestによるユニットテストを導入しましたが、あれはcalculateTotalsのような関数単体の検証でした。今回はPlaywrightを導入し、実際にブラウザを動かして「サインアップ …

PlaywrightはE2Eテスト（End-to-End）のツールです。実際のブラウザを動かしてユーザー操作をシミュレートします。Vitestのユニットテストと組み合わせることで、ロジックから画面全体まで幅広くテストできます。