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

[kazuma-naka]

#28

概要

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

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......

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

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

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

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

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

手順

1. npm init playwright@latest コマンドを実行する
2. playwright のテストの実行されるディレクトリを e2e に設定する
   3. テストユーザーの設定を .env.local に EMAIL と PASSWORD を設定する。
   EMAIL と PASSWORD は WIKI のローカル環境のユーザーのものを記載する
3. テストユーザーの情報を 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 にする

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
agent	❌ Failed (Inspect)			Jan 23, 2025 2:50pm

[kazuma-naka]

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

[komagata]

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

[kazuma-naka]

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

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

[firewood]

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

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

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

[kazuma-naka]

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

[firewood]

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

[firewood]

LGTM

[komagata]

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

[kazuma-naka]

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

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

[komagata]

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

[komagata]

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

[komagata]

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

[kazuma-naka]

これってe2eを実行するとその時のDBの内容が変わっちゃう感じですかね？（テストの前処理、後処理の話）

例えばtest environmentを作ってやる方法もあるのかなと思いました。

@komagata さん、

お疲れ様です。
テスト用に seed.test.sql を作成しました。
テスト前、後にデータベースをリセットします。

[komagata]

@kazuma-naka ローカルで（CI環境ではなく）e2eテストを実行したときにDBの内容に影響が出ないでしょうか？

[kazuma-naka]

@komagata さん、

お疲れ様です。
E2E テスト環境ためだけのユーザーをテスト前に作成、テスト後に削除する方向性で修正しました。

email: [email protected]
password: testtest

email confirmation を auth.signUp() では true にする手段が思いつきませんでした。
ですので auth.admin.createUser() で新規ユーザーを作成、email_confirm: true を渡しました。
auth.admi.createUser() を使用するために Supabase のService Role Key が必要となり .env.local にservice role keyの変数を追加しています。

よろしくお願いします。

[komagata]

@kazuma-naka

フロントエンドメンター陣に聞いたところ、E2Eはプログラマー側でそこまでしっかりやらない & デファクトのやり方は無い感じらしいので、ローカルでdevelopmentのDBに影響があってもOKとしたいと思います。

E2E テスト環境ためだけのユーザーをテスト前に作成、テスト後に削除する方向性で修正しました。

こちら、そこまで厳密でなくて良いようなので、（今後においても）テスト用に作成・削除しなくても大丈夫です。
（つまり、development環境でテストユーザーがいても問題ない）

ただちょっと気になるのが、ローカルでE2Eテストを実行する時、その時のdevelopment環境のデータの状態に左右されちゃうの点ですね。

例えば、seedの状態から変化がないDBだったら良いですが、開発中にブラウザからユーザーを追加してた場合とそうでない場合でテストの結果が変わってしまうなど。

email confirmation を auth.signUp() では true にする手段が思いつきませんでした。

どこかの記事でみましたが、実際に開発環境のメールアプリサービス（Inbucket）を開いて認証リンクをクリックすることでconfirmationするようです。

[komagata]

@kazuma-naka こちらに載ってました〜
https://www.bekapod.dev/articles/supabase-magic-login-testing-with-playwright/

[firewood]

test databaseの候補はありそうです。

1. supawright
2. 複数環境を作成する

2の方ですが ↓ のように別のconfigファイルを作成して supabase start --config supabase/test/config.toml のようにして起動します。(ChatGPTに Supabaseのlocal docker環境で、開発用とは別に、テスト専用のデータベースを用意する方法 を聞きました)

├── supabase/
│   ├── dev/
│   │   ├── migrations/
│   │   └── config.toml
│   └── test/
│       ├── migrations/
│       └── config.toml

[komagata]

2の方ですが ↓ のように別のconfigファイルを作成して supabase start --config supabase/test/config.toml のようにして起動します。(ChatGPTに Supabaseのlocal docker環境で、開発用とは別に、テスト専用のデータベースを用意する方法 を聞きました)

├── supabase/
│   ├── dev/
│   │   ├── migrations/
│   │   └── config.toml
│   └── test/
│       ├── migrations/
│       └── config.toml

@kazuma-naka 後からこのやりとりを見た人（未来の開発者）が混乱するので、もしこれが間違いであれば訂正を:memo: みたいな感じで書いておいていただければと思います〜

[kazuma-naka]

test databaseの候補はありそうです。

1. supawright
2. 複数環境を作成する

2の方ですが ↓ のように別のconfigファイルを作成して supabase start --config supabase/test/config.toml のようにして起動します。(ChatGPTに Supabaseのlocal docker環境で、開発用とは別に、テスト専用のデータベースを用意する方法 を聞きました)

├── supabase/
│   ├── dev/
│   │   ├── migrations/
│   │   └── config.toml
│   └── test/
│       ├── migrations/
│       └── config.toml

📝
supabase cli のリファレンスを参照したのですが

supabase start --config config.test.toml

--configというオプションがありませんでした。