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

PlaywrightによるフロントエンドE2Eテスト手法を習得。認証情報有無のテストやCRUDシミュレーションなど。

3.75 (35 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト
490
students
2 hours
content
Apr 2024
last update
$19.99
regular price

What you will learn

Playwrightによるフロントエンド E2Eテスト手法

storageStateを使用したテスト用cookieの実装方法

認証保護されたAPI routesの実装 (Nextjs)

zod による入力バリデーション (API routes)

Why take this course?

本コースでは、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)

Screenshots

【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト - Screenshot_01【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト - Screenshot_02【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト - Screenshot_03【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト - Screenshot_04

Reviews

なかしま
September 17, 2023
概要や何故そうするかなどの大枠についての説明がほとんどないので、理解しにくい箇所がある。初心者向けとあるが初心者では理解が難しいと私は感じた。あと、講座の中身に関してではないが、声に抑揚がなく早口なので聞き取りづらかったり、眠くなることもある。ただし、見本で共有してくれるソースコードは読みやすく、勉強になる。また1つ1つのコードの解説は丁寧である。Playwrightについてある程度詳しく説明した記事は、ネット上にあまりないので貴重な情報は得られる。
T_hirai
June 17, 2023
内容が中途半端。 幾つかの技術を使用した授業ですが、すべての授業に対して詳しく説明しているものではありません。 もちろんこの授業のタイトルにもある、Playwrightに対しても詳しく説明しているものではありません。

Charts

Price

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

Rating

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

Enrollment distribution

【E2Eテスト編】Playwright + Next.js 13 App Router によるフロントエンドテスト - Distribution chart
5025824
udemy ID
12/15/2022
course created date
12/29/2022
course indexed date
Bot
course submited by