feat: refactor Playwright tests to use base URL and clean database utility; add global setup for test environment

Author: diegotc86

.env.test

@@ -1,4 +1,4 @@
 DATABASE_URL="postgresql://diego@localhost:5432/fullstock_test?schema=public"
 
 # Admin Database (for database creation/deletion)
-ADMIN_DB_NAME=postgres
+ADMIN_DB_NAME=postgres

.gitignore

@@ -26,7 +26,7 @@ dist-ssr
 # React Router
 .react-router/
 
-.build/
+build/
 .env
 
 # Playwright

package.json

@@ -18,7 +18,9 @@
     "prisma:migrate:status": "prisma migrate status",
     "prisma:studio": "prisma studio",
     "prisma:seed": "prisma db seed",
-    "test:prisma:migrate:deploy": "dotenv -e .env.test -- prisma migrate deploy"
+    "test:prisma:migrate:deploy": "dotenv -e .env.test -- prisma migrate deploy",
+    "test:e2e": "playwright test",
+    "test:prisma:seed": "dotenv -e .env.test prisma db seed"
   },
   "prisma": {
     "seed": "tsx ./prisma/seed.ts"

playwright.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from "@playwright/test";
 import dotenv from "dotenv";
 
+import { baseUrl, command } from "@/e2e/utils-tests-e2e";
+
 // Load test environment variables
 dotenv.config({ path: ".env.test" });
 
@@ -18,15 +20,16 @@ dotenv.config({ path: ".env.test" });
 export default defineConfig({
   testDir: "./src/e2e",
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  // globalSetup: require.resolve("./src/e2e/setup.ts"),
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: "list",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -75,9 +78,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: command,
+    url: baseUrl,
+    reuseExistingServer: !process.env.CI,
+  },
 });

src/e2e/demo.signin.spec.ts

@@ -4,49 +4,32 @@ import { prisma } from "@/db/prisma";
 import { hashPassword } from "@/lib/security";
 import type { CreateUserDTO } from "@/models/user.model";
 
+import { baseUrl, cleanDatabase } from "./utils-tests-e2e";
+
 test.describe("Visitante inicio sesion", () => {
-  let testUserId: number;
+  test.beforeEach(async () => {
+    await cleanDatabase();
 
-  test.beforeAll(async () => {
     const testUser: CreateUserDTO = {
       email: "[email protected]",
       name: null,
       password: await hashPassword("letmein"),
       isGuest: false,
     };
 
-    const existingUser = await prisma.user.findUnique({
-      where: { email: testUser.email },
-    });
-
-    if (existingUser) {
-      await prisma.user.delete({
-        where: { id: existingUser.id },
-      });
-    }
-
-    const user = await prisma.user.create({
+    await prisma.user.create({
       data: testUser,
     });
-    testUserId = user.id;
-  });
-
-  test.afterAll(async () => {
-    await prisma.user.delete({
-      where: { id: testUserId },
-    });
   });
 
   test("test", async ({ page }) => {
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
     await page.getByTestId("login").click();
     await page.getByRole("textbox", { name: "Correo electrónico" }).click();
     await page
       .getByRole("textbox", { name: "Correo electrónico" })
       .fill("[email protected]");
-    await page
-      .getByRole("textbox", { name: "Correo electrónico" })
-      .press("Tab");
+
     await page.getByRole("textbox", { name: "Contraseña" }).fill("letmein");
     await page.getByRole("button", { name: "Iniciar sesión" }).click();
 

src/e2e/demo.spec.ts

@@ -1,8 +1,10 @@
 import { test, expect } from "@playwright/test";
 
+import { baseUrl } from "./utils-tests-e2e";
+
 test.describe("Visitor", () => {
   test("can add a product to the cart", async ({ page }) => {
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
 
     await expect(page).toHaveTitle(/inicio/i);
 

src/e2e/guest-create-order.spec.ts

@@ -1,14 +1,14 @@
 // import { createOrderFormData } from "@/lib/utils.tests";
 import { expect, test } from "@playwright/test";
 
-import { createOrderFormData } from "./utils-tests-e2e";
+import { baseUrl, createOrderFormData } from "./utils-tests-e2e";
 
 export type OrderFormData = Record<string, string>;
 
 test.describe("Guest", () => {
   test("Guest can create an order", async ({ page }) => {
     // Navegar a la tienda y agregar un producto
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
 
     await page.getByRole("menuitem", { name: "Polos" }).click();
     await page.getByTestId("product-item").first().click();

src/e2e/setup.ts

@@ -0,0 +1,5 @@
+import { cleanDatabase } from "./utils-tests-e2e";
+
+export default async function globalSetup() {
+  await cleanDatabase();
+}

src/e2e/user-create-order.spec.ts

@@ -4,41 +4,26 @@ import { prisma } from "@/db/prisma";
 import { hashPassword } from "@/lib/security";
 import type { CreateUserDTO } from "@/models/user.model";
 
+import { baseUrl, cleanDatabase } from "./utils-tests-e2e";
+
 test.describe("User", () => {
-  let testUserId: number;
+  test.beforeEach(async () => {
+    await cleanDatabase();
 
-  test.beforeAll(async () => {
     const testUser: CreateUserDTO = {
       email: "[email protected]",
       name: null,
       password: await hashPassword("letmein"),
       isGuest: false,
     };
 
-    const existingUser = await prisma.user.findUnique({
-      where: { email: testUser.email },
-    });
-
-    if (existingUser) {
-      await prisma.user.delete({
-        where: { id: existingUser.id },
-      });
-    }
-
-    const user = await prisma.user.create({
+    await prisma.user.create({
       data: testUser,
     });
-    testUserId = user.id;
-  });
-
-  test.afterAll(async () => {
-    await prisma.user.delete({
-      where: { id: testUserId },
-    });
   });
 
   test("User can create an order", async ({ page }) => {
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
 
     await page.getByRole("link", { name: "Iniciar sesión" }).click();
 

src/e2e/utils-tests-e2e.ts

@@ -1,5 +1,7 @@
 /* Helper functions → Playwright */
 
+import { prisma } from "@/db/prisma";
+
 export type OrderFormData = Record<string, string>;
 
 export const createOrderFormData = (
@@ -16,3 +18,17 @@ export const createOrderFormData = (
   Teléfono: "987456321",
   ...overrides,
 });
+
+export async function cleanDatabase() {
+  await prisma.order.deleteMany();
+  await prisma.cart.deleteMany();
+  await prisma.user.deleteMany();
+
+  // Mantenemos product y category
+}
+
+export const baseUrl = process.env.CI
+  ? "http://localhost:3000/"
+  : "http://localhost:5173/";
+
+export const command = process.env.CI ? "npm run start" : "npm run dev";