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

.github/workflows/ci.yml

@@ -34,16 +34,35 @@ jobs:
 
   test:
     needs: setup
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
         with:
           node-version: ${{ env.NODE_VERSION }}
+      - run: npx playwright install --with-deps
+      - run: npx supabase start
+      - run: npx supabase db reset
+      - name: Generate .env.local for test environment
+        run: |
+          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
+      - run: npm run build
+      - run: npm run start &
+      - name: Wait Front Response
+        run: |
+          curl --retry 5 --max-time 5 http://localhost:3000
+      - name: Install PostgreSQL Client
+        run: sudo apt update && sudo apt install -y postgresql-client
       - run: npm run test
-
-
-
-
-
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 

.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/database.types.ts

@@ -0,0 +1,206 @@
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  graphql_public: {
+    Tables: {
+      [_ in never]: never
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      graphql: {
+        Args: {
+          operationName?: string
+          query?: string
+          variables?: Json
+          extensions?: Json
+        }
+        Returns: Json
+      }
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+  public: {
+    Tables: {
+      companies: {
+        Row: {
+          created_at: string
+          id: number
+          memo: string | null
+          name: string
+          website: string | null
+        }
+        Insert: {
+          created_at?: string
+          id?: number
+          memo?: string | null
+          name: string
+          website?: string | null
+        }
+        Update: {
+          created_at?: string
+          id?: number
+          memo?: string | null
+          name?: string
+          website?: string | null
+        }
+        Relationships: []
+      }
+      users: {
+        Row: {
+          date_of_birth: string | null
+          email: string
+          first_name: string | null
+          first_name_kana: string | null
+          id: string
+          last_name: string | null
+          last_name_kana: string | null
+          role: string | null
+        }
+        Insert: {
+          date_of_birth?: string | null
+          email: string
+          first_name?: string | null
+          first_name_kana?: string | null
+          id: string
+          last_name?: string | null
+          last_name_kana?: string | null
+          role?: string | null
+        }
+        Update: {
+          date_of_birth?: string | null
+          email?: string
+          first_name?: string | null
+          first_name_kana?: string | null
+          id?: string
+          last_name?: string | null
+          last_name_kana?: string | null
+          role?: string | null
+        }
+        Relationships: []
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type PublicSchema = Database[Extract<keyof Database, "public">]
+
+export type Tables<
+  PublicTableNameOrOptions extends
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  PublicTableNameOrOptions extends
+    | keyof PublicSchema["Tables"]
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  PublicEnumNameOrOptions extends
+    | keyof PublicSchema["Enums"]
+    | { schema: keyof Database },
+  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never
+
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof PublicSchema["CompositeTypes"]
+    | { schema: keyof Database },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof Database
+  }
+    ? keyof Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof PublicSchema["CompositeTypes"]
+    ? PublicSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
+    : never
+

e2e/login_then_logout.test.ts

@@ -0,0 +1,62 @@
+import { describe } from "node:test";
+import { expect } from "@playwright/test";
+import { withSupawright } from "supawright";
+import type { Database } from "./database.types";
+
+const test = withSupawright<Database, "public">(["public"]);
+
+describe("Login and Logout E2E test", () => {
+  let validEmail: string | undefined;
+  const e2ePassword = "e2e_password";
+
+  test.beforeEach(async ({ supawright }) => {
+    const attributes = {
+      password: e2ePassword,
+      email_confirm: true,
+    };
+    const user = await supawright.createUser(attributes);
+    validEmail = user.email;
+  });
+
+  test("Should Success Login with valid Email and Password then Logout", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/");
+    await page.getByRole("link", { name: "ログイン" }).click();
+
+    console.log(`valid email: ${validEmail}`);
+
+    await page.getByPlaceholder("[email protected]").fill(validEmail ?? "");
+    await page.getByLabel("Password").fill(e2ePassword);
+    await page.getByRole("button", { name: "ログイン" }).click();
+
+    const logoutButton = page.getByRole("link", { name: "ログアウト" });
+    await expect(logoutButton).toBeVisible();
+
+    /** 現在リロードしないと画面が更新されずログイン、サインインが表示されない **/
+    await logoutButton.click();
+    await page.waitForTimeout(1500);
+
+    await page.reload();
+
+    const loginButton = page.getByRole("link", { name: "ログイン" });
+    const signInButton = page.getByRole("link", { name: "ユーザー登録" });
+
+    await expect(loginButton).toBeVisible();
+    await expect(signInButton).toBeVisible();
+  });
+
+  test("Should Fail Login with Invalid Email and Password", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/");
+    await page.getByRole("link", { name: "ログイン" }).click();
+
+    await page.getByPlaceholder("[email protected]").fill("[email protected]");
+    await page.getByLabel("Password").fill("invalidpassword");
+    await page.getByRole("button", { name: "ログイン" }).click();
+
+    const loginButton = page.getByRole("button", { name: "ログイン" });
+    await expect(loginButton).toBeVisible();
+  });
+});

jest.config.ts

@@ -26,6 +26,7 @@ const config: Config = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },
+  testPathIgnorePatterns: ["/e2e/"],
 };
 
 export default createJestConfig(config);