implement page fixtures

Author: ersu-amine

fixtures/pageFixtures.ts

@@ -0,0 +1,19 @@
+import { test as base, Page } from "@playwright/test";
+import { LoginPage } from "../pages/LoginPage";
+import { RegistrationPage } from "../pages/RegistrationPage";
+
+type MyFixtures = {
+  loginPage: LoginPage;
+  registrationPage: RegistrationPage;
+  //add more types here
+};
+
+export const test = base.extend<MyFixtures>({
+  loginPage: async ({ page }, use) => {
+    await use(new LoginPage(page));
+  },
+  registrationPage: async ({ page }, use) => {
+    await use(new RegistrationPage(page));
+  },
+  //define others similarly
+});

pages/BasePage.ts

@@ -0,0 +1 @@
+//TODO

pages/LoginPage.ts

@@ -1,4 +1,4 @@
-import { Page, Locator, expect} from "@playwright/test";
+import { Page, Locator, expect } from "@playwright/test";
 import settings from "../tests/config/settings.json";
 
 export class LoginPage {
@@ -31,7 +31,7 @@ export class LoginPage {
     this.loginButton.waitFor({ state: "visible" });
     await this.loginButton.click();
     await this.page.waitForTimeout(3000); // wait for login to process
-      console.log("Current URL after login:", this.page.url());
+    console.log("Current URL after login:", this.page.url());
   }
 
   async verifyDashboard() {

pages/RegistrationPage.ts

@@ -0,0 +1,66 @@
+import { Page, Locator, expect } from "@playwright/test";
+import settings from "../tests/config/settings.json";
+import { faker } from "@faker-js/faker/locale/en";
+
+export class RegistrationPage {
+  readonly page: Page;
+  readonly firstNameInput: Locator;
+  readonly lastNameInput: Locator;
+  readonly dobInput: Locator;
+  readonly streetInput: Locator;
+  readonly postalCodeInput: Locator;
+  readonly cityInput: Locator;
+  readonly stateInput: Locator;
+  readonly phoneInput: Locator;
+  readonly emailInput: Locator;
+  readonly passwordInput: Locator;
+  readonly countryDropdown: Locator;
+  readonly registerButton: Locator;
+  readonly loginHeader: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.firstNameInput = page.locator("#first_name");
+    this.lastNameInput = page.locator("#last_name");
+    this.dobInput = page.locator("#dob");
+    this.streetInput = page.locator("#street");
+    this.postalCodeInput = page.locator("#postal_code");
+    this.cityInput = page.locator("#city");
+    this.stateInput = page.locator("#state");
+    this.phoneInput = page.locator("#phone");
+    this.emailInput = page.locator("#email");
+    this.passwordInput = page.locator("#password");
+    this.countryDropdown = page.locator("select#country");
+    this.registerButton = page.locator("//button[@type='submit']");
+    this.loginHeader = page.locator("//h3[text()='Login']");
+  }
+
+    async navigateToRegistration() {
+        await this.page.goto(settings.REGISTRATION_URL);
+    }
+
+    async fillRegistrationForm() {
+        await this.firstNameInput.fill(faker.person.firstName());
+        await this.lastNameInput.fill(faker.person.lastName());
+        await this.dobInput.fill("1990-01-01");
+        await this.streetInput.fill(faker.location.streetAddress());
+        await this.postalCodeInput.fill(faker.location.zipCode());
+        await this.cityInput.fill(faker.location.city());
+        await this.stateInput.fill(faker.location.state());
+        await this.countryDropdown.selectOption({ label: "Canada" });
+        const phoneNumber = faker.string.numeric(10);
+        await this.phoneInput.fill(phoneNumber);
+        await this.emailInput.fill(faker.internet.email());
+        await this.passwordInput.fill(settings.PASSWORD);
+    }
+
+    async clickRegisterButton() {
+        await this.registerButton.click();
+    }
+
+    async verifyRedirectionToLogin() {
+        await this.loginHeader.waitFor({ state: "visible", timeout: 2000 });
+        expect(this.page.url()).toBe(settings.LOGIN_URL);
+        expect(await this.loginHeader.textContent()).toBe("Login");
+    }
+}

tests/hooks/hooks.ts

@@ -13,6 +13,7 @@ Before(async function (this: CustomWorld) {
   // Attach to World so step defs can access via this.browser / this.page
   this.browser = browser;
   this.page = page;
+  await this.initPageObjects();
 });
 
 After(async function (this: CustomWorld) {

tests/support/world.ts

@@ -1,8 +1,30 @@
 import { setWorldConstructor, World } from "@cucumber/cucumber";
 import { Browser, Page } from "playwright";
+import { LoginPage } from "../../pages/LoginPage";
+import {RegistrationPage} from "../../pages/RegistrationPage";
 
 export class CustomWorld extends World {
   browser!: Browser;
   page!: Page;
+  loginPage!: LoginPage;
+  registrationPage!:RegistrationPage;
+
+  async initPageObjects() {
+    this.loginPage = new LoginPage(this.page);
+    this.registrationPage = new RegistrationPage(this.page);
+    // Initialize other page objects similarly
+  }
 }
+
 setWorldConstructor(CustomWorld);
+
+//optional helper function to initialize page objects
+export async function initPageObjects(world: CustomWorld): Promise<void> {
+  if (!world) throw new Error("initPageObjects: world instance is required");
+  if (typeof world.initPageObjects !== "function") {
+    throw new Error(
+      "initPageObjects: provided world does not implement initPageObjects()"
+    );
+  }
+  await world.initPageObjects();
+}