Vuetify

Claude Code で Vue 3 + Vuetify 3 プロジェクトに Playwright E2E テストを構築した話

はじめに

Miyagi です。前回の記事では Vitest による単体テストの整備について書きました。今回はその続きで、Playwright による E2E テストの話です。

単体テストでロジック層のカバレッジは確保できましたが、「ブラウザ上で実際に画面が表示されるか」「フォームのバリデーションがユーザー操作で正しく動くか」は E2E テストでしか確認できません。特に Vue 2 → Vue 3 移行プロジェクトでは、移行前と同じ動作をしているかのノンデグレード確認が最重要テスト観点でした。

Vue 2 → Vue 3 + Vuetify 3 移行計画の全貌 ― 段階的アップグレードの戦略と実践

Vue 2 から Vue 3 + Vuetify 3 への移行計画

はじめに

Miyagi です。今回、実際のプロジェクトで Vue 2 → Vue 3 の移行に取り組みました。Vue 2 は 2023年12月31日に EOL を迎えており、セキュリティアップデートやエコシステムの最新化を考えると、もはや移行は避けて通れない状況です。移行期間中にリリースされた Vite 8(Rolldown ベース)も取り込んだ結果、ビルド時間は約 7 倍、開発サーバー起動は約 25 倍高速化しました。工数は約 1.5 人月です。