refactoring started here custom fixture!!

client/e2e/fixtures/index.ts

@@ -0,0 +1,6 @@
+import { expect, mergeTests } from "@playwright/test";
+import { loginTest } from "./login";
+
+const test = mergeTests(loginTest);
+
+export { test, expect };

client/e2e/fixtures/login.ts

@@ -0,0 +1,55 @@
+import { test as base } from "@playwright/test";
+import type { Page, Locator } from "@playwright/test";
+import { API_ROUTES } from "../support/constants";
+import { gameListResponse, moderatorExistsResponse } from "../mockResponses";
+
+export class Login {
+  private readonly inputEmail: Locator;
+  private readonly inputPassword: Locator;
+  private readonly submitButton: Locator;
+
+  constructor(public readonly page: Page) {
+    this.inputEmail = this.page.locator('input[placeholder="Email"]');
+    this.inputPassword = this.page.locator('input[placeholder="Password"]');
+    this.submitButton = this.page.locator("button");
+  }
+
+  async submitLoginForm() {
+    await this.inputEmail.fill("john@example.com");
+    await this.inputPassword.fill("password123");
+
+    await this.page.route(API_ROUTES.LOGIN, async (route) => {
+      route.fulfill({
+        body: JSON.stringify({ token: "mockToken" }),
+      });
+    });
+
+    await this.submitButton.click();
+  }
+
+  async gotoLoginPage() {
+    await this.page.route(API_ROUTES.CHECK_MODERATOR, async (route) => {
+      await route.fulfill({ json: moderatorExistsResponse });
+    });
+    await this.page.goto("/login");
+  }
+
+  async gotoGamesPage() {
+    await this.gotoLoginPage();
+    await this.submitLoginForm();
+
+    await this.page.route(API_ROUTES.GAME_LIST, async (route) => {
+      await route.fulfill({ json: gameListResponse });
+    });
+
+    await this.page.goto("/games");
+    await this.page.waitForLoadState("networkidle");
+  }
+}
+
+export const loginTest = base.extend<{ login: Login }>({
+  login: async ({ page }, use) => {
+    const login = new Login(page);
+    await use(login);
+  },
+});

client/e2e/tests/addEditGame.spec.ts

@@ -1,32 +1,12 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "../fixtures";
+import { gameListResponse } from "../mockResponses";
 import { API_ROUTES } from "../support/constants";
-import { gameListResponse, moderatorExistsResponse } from "../mockResponses";
 
 test.describe("Games: Add, Edit from Admin panel", () => {
   const currentGame = gameListResponse.data[0];
 
-  test.beforeEach(async ({ page }) => {
-    await page.route(API_ROUTES.CHECK_MODERATOR, async (route) => {
-      await route.fulfill({ json: moderatorExistsResponse });
-    });
-    await page.goto("/login");
-
-    await page.route(API_ROUTES.LOGIN, async (route) => {
-      route.fulfill({
-        body: JSON.stringify({ token: "mockToken" }),
-      });
-    });
-
-    await page.fill('input[placeholder="Email"]', "john@example.com");
-    await page.fill('input[placeholder="Password"]', "password123");
-    await page.click("button");
-
-    await page.route(API_ROUTES.GAME_LIST, async (route) => {
-      await route.fulfill({ json: gameListResponse });
-    });
-
-    await page.goto("/games");
-    await page.waitForLoadState("networkidle");
+  test.beforeEach(async ({ login }) => {
+    await login.gotoGamesPage();
   });
 
   test("Add Games validations check", async ({ page }) => {

client/e2e/tests/example.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "../fixtures";
+
+test("should add an item", async ({ page, login }) => {
+  await login.gotoGamesPage();
+
+  await page.click("#add-game-button");
+  await page.click("#save-button-add-game");
+
+  await expect(page.locator("text=Game Name must be provided")).toBeVisible();
+  await expect(
+    page.locator("text=Game Image must be a valid URL")
+  ).toBeVisible();
+  await expect(page.locator("text=Description must be provided")).toBeVisible();
+
+  await page.click("#cancel-button-add-game");
+});