はじめてのE2Eテストを作成する #42

kazuma-naka · 2025-01-05T00:44:44Z

概要

ローカル環境のテストユーザーを使用してログイン、ログアウトをする。

2025年１月５日現在の問題

ログアウトをしても自動的に画面が更新されないため `await page.reload();` が必要となる。しかし ` await page.waitForTimeout(1500);` を追加しないと flaky なテストとなる（ログアウトは非同期処理でログアウト前にリロードされてしまうため `Timeout` が必要）

2025年1月13日（このPRで修正済み）

`login`と`signUp`ページ内のロゴ、`pjord.svg` の `height` が定義されておらずエラーが起こったので新たに高さを定義

2025年1月16日 CI のテスト内で Supabase の立ち上げ、 Next.js のビルドと開始

E2E テストでログイン、ログアウトを行いヘッダーのボタンが変わるのかをテストするため実際に Supabase と Next.js を `ci.yml` の `test` 内で環境を構築しました。 [この記事](https://playwright.dev/docs/ci-intro)を参考に `ci.yml` を修正

`.env.local` を `test` のインスタンス内で動的に作成する

npm run build をCI環境で実行したさいに supabaseUrl is required. のエラーが出ました。 .env.local はリモートに追加されないので supabase の url と anon key が定義されずビルドに失敗すると考えました。エラーが起こった個所に createClient() が使用されていたため。

 STATUS_OUTPUT=$(npx supabase status)
 API_URL=$(echo "$STATUS_OUTPUT" | grep "API URL:" | awk '{print $3}')
 ANON_KEY=$(echo "$STATUS_OUTPUT" | grep "anon key:" | awk '{print $3}')
 echo "NEXT_PUBLIC_SUPABASE_URL=$API_URL" > .env.local
 echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY" >> .env.local

npx supabase status の例

    API URL: http://localhost:54321
    DB URL: postgresql://postgres:postgres@localhost:54322/postgres
    Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
    anon key: eyJh......
    service_role key: eyJh......

STATUS_OUTPUT の変数にnpx supabase status の結果を代入する
API_URLとANON_KEYをSTATUS_OUTPUTから抜き取って代入する
.env.local を動的に作成して NEXT_PUBLIC_SUPABASE_URL=$API_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY で生成された URL と Anon Key を書き込む
npm run build をする
npm run start をバックグランドで実行する
10 秒待つ
npm run test を実行する

２０２５年１月１９日テストCI環境でデータベースをE2Eテスト実行前、実行後にリセットする。

seed.test.sql を作成
テスト環境のための seed.sql ファイル。

TRUNCATE "auth"."users" RESTART IDENTITY CASCADE;
TRUNCATE companies RESTART IDENTITY CASCADE;

seed を使用する際にテーブルを初期化する

手順

npm init playwright@latest コマンドを実行する
playwright のテストの実行されるディレクトリを e2e に設定する
3. テストユーザーの設定を .env.local に EMAIL と PASSWORD を設定する。
EMAIL と PASSWORD は WIKI のローカル環境のユーザーのものを記載する
テストユーザーの情報を login_then_logout.spec.ts 内に定義する

この動画を参考にしてテストを作成しました。

ログイン時

ログアウトのリンクが表示されているかチェックする。

ログアウト時

ログアウト後、リロードをしないと画面が更新されない
ログアウトボタンがクリックされて1.5秒待ちリロードする。
でないとリロードしてもログアウトの状態にならず flaky なテストとなる。
ログインのリンク、ユーザー登録のリンクが表示されているかチェックする。

Playwright の結果

Artifacts としてアップロードする

~~テスト環境では seed.test.sql を使用する~~
~~テスト前とテスト後に以下のコマンドを実行して seed.test.sql を取り込む~~

~~~~ ~~psql "postgres://postgres:postgres@localhost:54322/postgres" -f ~~~~./src/supabase/seed.test.sql~~ ~~~~

~~### E2Eテスト環境のためにユーザーを作成、テスト後にユーザーを削除する~~
createClient().auth.signUp でユーザーを新規登録後、 email confirmation が必要となりテストが失敗する。そのため createClient().auth.admin.createUser() でユーザーを新規登録、 email_confirm: true にする

Supawright を使用する

Supabase と Playwright を組み合わせた Supawright を使用してテスト用のユーザーをテスト前に作成、テスト後に作成したテストユーザーを自動的に削除してくれます。
README にある通りではうまく動かなかったので Issue で質問させて頂きました。

vercel · 2025-01-05T00:44:50Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agent	❌ Failed (Inspect)			Feb 6, 2025 11:24pm

kazuma-naka · 2025-01-05T04:17:37Z

@komagata さん、
はじめてのE2Eテストを作成しました🖊️
確認よろしくおねがいします🙇‍♂️

komagata · 2025-01-05T06:28:12Z

@kazuma-naka 僕はいい感じだと思います！
念の為フロントエンドのメンターの方々にもみてもらいますね。

kazuma-naka · 2025-01-05T07:17:39Z

@kazuma-naka 僕はいい感じだと思います！念の為フロントエンドのメンターの方々にもみてもらいますね。

承知しました！
よろしくおねがいします🙇‍♂️

firewood · 2025-01-05T10:52:03Z

package.json

@@ -14,6 +14,7 @@
    "@supabase/supabase-js": "^2.47.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "dotenv": "^16.4.7",


これだとインストールパッケージに dotenv が入りますが、
運用時に使わないのであれば、
代わりに devDependencies に dotenv-cli を入れて
scripts セクションに

"e2e": "dotenv -e .env.local -- playwright test",

で呼び出せると思います。
(スクリプト内の import も不要になる)

@firewood さん、
レビューありがとうございます😊
dotenv を削除dotenv-cli を入れたのですが process.env.EMAIL が not defined となりテストを実行することができませんでした。具体的には
npm run e2e は実行できましたが Playwright Test for VSCode を使用した際にエラーが出て実行できませんでした。
dotenv を devDependencies に移動する対応を今回したのですが dotenv-cli を使用する方がよいでしょうか？

なるほど、VSCodeから呼ぶときに困るんですね。
devDependencies + dotenv でも良いと思います!

firewood

LGTM

komagata · 2025-01-08T01:27:09Z

@kazuma-naka コンフリクトの修正をお願いします。

kazuma-naka · 2025-01-08T03:12:10Z

@kazuma-naka コンフリクトの修正をお願いします。

@komagata さん、
コンフリクトを解消しました🖊

komagata · 2025-01-08T07:16:04Z

README.md

+EMAIL=Wikiのローカル環境ユーザーの Email を設定する
+PASSWORD=Wikiのローカル環境ユーザーの Pass を設定する


開発環境のPASSWORDなので隠さないで大丈夫です〜

komagata · 2025-01-08T07:17:34Z

package.json

+    "test": "true",
+    "e2e": "dotenv -e .env.local -- playwright test"


npm run testでE2Eテストも動くようにお願いします。

CI環境でも動くことになるのでヘッドレスブラウザで動くようにお願いします。

supabase-e2e-test 内で bash runE2Etest.sh で supabase を clone する URL: http://localhost:8000

kazuma-naka · 2025-02-06T00:42:50Z

@komagata さん、

お疲れ様です。
Supawright を使用してテストユーザーを毎テスト前に作成、テスト後にテストユーザーを Supawright によって自動的に削除してもらう方向性で修正しました🖊
確認よろしくお願いします。

firewood · 2025-02-06T13:43:08Z

playwright.config.ts

+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+console.log("Loaded ENV:", process.env);


(nit) デバッグ用なら消してもよいかもです

削除しました！

firewood · 2025-02-06T13:44:22Z

うまく動いているようです 👍

firewood · 2025-02-06T13:54:55Z

e2e/database.types.ts

+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {


question: モデルが二重管理になっていますが、このファイルって必要でしょうか?
src/lib/database.types をimportしてもテストは動作していそうです。

src/libのほうをimportすると Type 'Database' does not satisfy the constraint 'GenericDatabase'. というエラーになるんですが、もしかして型定義が古いためですか? このE2Eのほうをsrc/lib/の方で使えばよさそう

レビューありがとうございます😊
Supawright を使用するために Supabase の型のタイプを変更する必要がありました。
src/lib/databaase.types.ts に変更しました。

https://github.com/isaacharrisholt/supawright#:~:text=%2D%20export%20interface%20Database%20%7B%0A%2B%20export%20type%20Database%20%3D%20%7B

不必要なログを削除

komagata

大変なIssueお疲れ様です。
確認させて頂きました。OKです〜🙆‍♂️

kazuma-naka self-assigned this Jan 5, 2025

kazuma-naka requested a review from komagata January 5, 2025 00:44

vercel bot had a problem deploying to Preview January 5, 2025 03:21 Failure

firewood reviewed Jan 5, 2025

View reviewed changes

kazuma-naka force-pushed the chore/create-first-e2e-test branch from 55e48be to 26b2dd2 Compare January 6, 2025 00:27

vercel bot had a problem deploying to Preview January 6, 2025 00:28 Failure

kazuma-naka requested a review from firewood January 6, 2025 00:35

firewood approved these changes Jan 6, 2025

View reviewed changes

kazuma-naka force-pushed the chore/create-first-e2e-test branch from 26b2dd2 to 8622244 Compare January 8, 2025 03:10

vercel bot had a problem deploying to Preview January 8, 2025 03:11 Failure

komagata reviewed Jan 8, 2025

View reviewed changes

vercel bot had a problem deploying to Preview January 13, 2025 16:12 Failure

vercel bot had a problem deploying to Preview January 13, 2025 16:24 Failure

vercel bot had a problem deploying to Preview January 13, 2025 16:33 Failure

vercel bot had a problem deploying to Preview January 13, 2025 16:44 Failure

vercel bot had a problem deploying to Preview January 13, 2025 16:50 Failure

vercel bot had a problem deploying to Preview January 13, 2025 16:56 Failure

vercel bot had a problem deploying to Preview January 13, 2025 17:08 Failure

vercel bot had a problem deploying to Preview January 13, 2025 17:18 Failure

vercel bot had a problem deploying to Preview January 14, 2025 15:00 Failure

vercel bot had a problem deploying to Preview January 14, 2025 15:13 Failure

vercel bot had a problem deploying to Preview January 14, 2025 15:40 Failure

vercel bot had a problem deploying to Preview January 14, 2025 15:51 Failure

vercel bot had a problem deploying to Preview January 14, 2025 17:10 Failure

kazuma-naka added 8 commits February 5, 2025 19:03

setup.ts, teardown.ts playwright の設定を削除

25ce5fb

e2e 用の supabase の環境をローカルに構築する

b285068

supabase-e2e-test 内で bash runE2Etest.sh で supabase を clone する URL: http://localhost:8000

supabase を clone してローカルに構築する

a9870f2

Supabase を git clone でローカル環境に構築することをキャンセルする

980cd0d

supawright を使ってE2Eテストを実装する

3c248c2

Supawright を追加

26f99ba

Supawright をつかってテスト前にユーザーを作成する。Supawright は自動的にテスト内で作成されたテーブル、ユーザーを削除

1b7114b

e2e テストとコンポネントテストを npm run test で両方とも実行するようにする

43a43d8

kazuma-naka force-pushed the chore/create-first-e2e-test branch from a8b0d3f to 43a43d8 Compare February 6, 2025 00:24

vercel bot had a problem deploying to Preview February 6, 2025 00:24 Failure

.env.test ファイルを削除

7857c23

vercel bot had a problem deploying to Preview February 6, 2025 00:35 Failure

不必要なものを .gitignore から削除する

52ede0c

vercel bot had a problem deploying to Preview February 6, 2025 00:56 Failure

dotenv-cli を削除する

bd8ccc5

vercel bot had a problem deploying to Preview February 6, 2025 01:14 Failure

supawright の createUser() で email を自動的に生成してくれるので生成された email を使用する

04e64f5

vercel bot had a problem deploying to Preview February 6, 2025 01:30 Failure

ci.yml の不必要な変数を削除

e488be3

vercel bot had a problem deploying to Preview February 6, 2025 06:06 Failure

firewood reviewed Feb 6, 2025

View reviewed changes

モデルの２重管理を解消

02feb22

不必要なログを削除

vercel bot had a problem deploying to Preview February 6, 2025 23:24 Failure

kazuma-naka requested a review from firewood February 6, 2025 23:31

komagata approved these changes Feb 7, 2025

View reviewed changes

komagata merged commit fb0edc1 into main Feb 7, 2025
7 of 9 checks passed

komagata deleted the chore/create-first-e2e-test branch February 7, 2025 02:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

はじめてのE2Eテストを作成する #42

はじめてのE2Eテストを作成する #42

kazuma-naka commented Jan 5, 2025 •

edited

Loading

vercel bot commented Jan 5, 2025 •

edited

Loading

kazuma-naka commented Jan 5, 2025

komagata commented Jan 5, 2025

kazuma-naka commented Jan 5, 2025

firewood Jan 5, 2025

kazuma-naka Jan 6, 2025 •

edited

Loading

firewood Jan 6, 2025

firewood left a comment

komagata commented Jan 8, 2025

kazuma-naka commented Jan 8, 2025

komagata Jan 8, 2025

komagata Jan 8, 2025

komagata Jan 8, 2025

kazuma-naka commented Feb 6, 2025

firewood Feb 6, 2025

kazuma-naka Feb 6, 2025

firewood commented Feb 6, 2025

firewood Feb 6, 2025

firewood Feb 6, 2025

kazuma-naka Feb 6, 2025

komagata left a comment

		EMAIL=Wikiのローカル環境ユーザーの Email を設定する
		PASSWORD=Wikiのローカル環境ユーザーの Pass を設定する

		"test": "true",
		"e2e": "dotenv -e .env.local -- playwright test"

はじめてのE2Eテストを作成する #42

はじめてのE2Eテストを作成する #42

Conversation

kazuma-naka commented Jan 5, 2025 • edited Loading

概要

.env.local を test のインスタンス内で動的に作成する

手順

ログイン時

ログアウト時

Playwright の結果

Supawright を使用する

vercel bot commented Jan 5, 2025 • edited Loading

kazuma-naka commented Jan 5, 2025

komagata commented Jan 5, 2025

kazuma-naka commented Jan 5, 2025

Choose a reason for hiding this comment

kazuma-naka Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

firewood left a comment

Choose a reason for hiding this comment

komagata commented Jan 8, 2025

kazuma-naka commented Jan 8, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kazuma-naka commented Feb 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

firewood commented Feb 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

komagata left a comment

Choose a reason for hiding this comment

kazuma-naka commented Jan 5, 2025 •

edited

Loading

`.env.local` を `test` のインスタンス内で動的に作成する

vercel bot commented Jan 5, 2025 •

edited

Loading

kazuma-naka Jan 6, 2025 •

edited

Loading