feat: implement LoginFixture for streamlined login/logout in e2e tests

.prettierignore

@@ -23,6 +23,7 @@
 **/public
 packages/email-templates/**/index.ts
 apps/api/src/storage/migrations/**
+apps/web/e2e/**/*.json
 
 
 # Cache

apps/web/e2e/auth.setup.ts

@@ -0,0 +1,12 @@
+import { test as setup } from "@playwright/test";
+
+import { AuthFixture } from "./fixture/auth.fixture";
+
+setup("authenticate", async ({ page }) => {
+  const authFixture = new AuthFixture(page);
+  await authFixture.login("[email protected]", "password");
+
+  await page.context().storageState({
+    path: "e2e/.auth/user.json",
+  });
+});

apps/web/e2e/fixture/auth.fixture.ts

@@ -0,0 +1,32 @@
+import { expect } from "@playwright/test";
+
+import type { Locator, Page } from "@playwright/test";
+
+export class AuthFixture {
+  private readonly emailInput: Locator;
+  private readonly passwordInput: Locator;
+  private readonly loginButton: Locator;
+  private readonly logoutButton: Locator;
+
+  constructor(public page: Page) {
+    this.emailInput = page.getByLabel("email");
+    this.passwordInput = page.getByLabel("password");
+    this.loginButton = page.getByRole("button", { name: /login/i });
+    this.logoutButton = page.getByRole("button", { name: /log out/i });
+  }
+
+  async login(email: string, password: string) {
+    await this.page.goto("/auth/login");
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.loginButton.click();
+
+    await expect(this.page).toHaveURL("/");
+    await expect(this.page).toHaveTitle(/dashboard/i);
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+    await expect(this.page).toHaveURL("/auth/login");
+  }
+}

apps/web/e2e/tests/get-course.spec.ts

@@ -1,18 +1,8 @@
 import { expect, test } from "@playwright/test";
 
 test.describe("course", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto("/auth/login");
-  });
-
   test("should find, open and enroll the paid course", async ({ page }) => {
-    await page.getByLabel("email").fill("[email protected]");
-    await page.getByLabel("password").fill("password");
-    await page.getByRole("button", { name: /login/i }).click();
-
-    await expect(page).toHaveURL("/");
-    await expect(page).toHaveTitle(/dashboard/i);
-
+    await page.goto("/");
     await page.getByPlaceholder("Search by title...").fill("For E2E Testing");
     await expect(page.getByRole("button", { name: "Clear All" })).toBeVisible();
 

apps/web/e2e/tests/login.spec.ts

@@ -11,13 +11,4 @@ test.describe("login page", () => {
     await expect(page.getByRole("heading", { name: "Sign up" })).toBeVisible();
     await expect(page).toHaveURL(/register/);
   });
-
-  test("should login as test user", async ({ page }) => {
-    await page.getByLabel("email").fill("[email protected]");
-    await page.getByLabel("password").fill("password");
-    await page.getByRole("button", { name: /login/i }).click();
-
-    await expect(page).toHaveURL("/");
-    await expect(page).toHaveTitle(/dashboard/i);
-  });
 });

apps/web/e2e/tests/register.spec.ts

@@ -1,7 +1,12 @@
 import { test, expect } from "@playwright/test";
 
+import { AuthFixture } from "e2e/fixture/auth.fixture";
+
 test.describe("register page", () => {
   test.beforeEach(async ({ page }) => {
+    const authFixture = new AuthFixture(page);
+    await page.goto("/");
+    await authFixture.logout();
     await page.goto("/auth/register");
   });
 

apps/web/playwright.config.ts

@@ -20,20 +20,19 @@ export default defineConfig({
     //   ],
     // },
   },
-
   projects: [
-    { name: "setup", testMatch: /.*\.setup\.ts/ },
     {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-      },
+      name: "setup",
+      testMatch: /.*\.setup\.ts/,
     },
     {
-      name: "firefox",
+      name: "chromium",
+      dependencies: ["setup"],
       use: {
-        ...devices["Desktop Firefox"],
+        ...devices["Desktop Chrome"],
+        storageState: "e2e/.auth/user.json",
       },
+      testMatch: /.*\.(spec|test)\.ts$/,
     },
   ],
 });