【E2Eテスト編】Playwright + Next.js App Router によるフロントエンドテスト

本コースでは、Microsoft製のE2Eテストのフレームワーク Playwrightを使用したフロントエンドテスト手法について学習します。Playwrightは、Kent C. Dodds氏(React-testing-libraryの作者 + Remixのmain contributor)も推している注目技術です。E2Eテストは、CypressからPlaywrightへの移行トレンドが予想されます。

テスト対象のアプリケーションは、

• フロントエンド: Next.js 13 app dir

• バックエンド: Next.jsのAPI routes (認証 + zodによる入力値バリデーション付き)

を使用します。

• Playwrightを使用したフロントエンドE2Eテスト(Next.js app dir)

• storageStateを使用したテスト用認証情報の作成(cookie)

• 認証情報有無のテストケース実装

• CRUD操作のテストケース実装

• NextAuthを使用したGitHub認証の実装

• Server componentにおける認証方法 (cookie)

• 認証保護されたAPI routesの実装

• zodによる入力値バリデーションの実装 (API routes)