Added the homePage test

fixtures/page.fixture.ts

@@ -1,15 +1,23 @@
 import { test as base, expect, Locator } from '@playwright/test'
 import { LoginPage } from '../pages/LoginPage'
 import { BasePage } from '../pages/BasePage';
+import { HomePage } from '../pages/HomePage';
 
 type pageFixture = {
     loginPage: LoginPage;
+    homePage: HomePage;
 }
 
 export const test = base.extend<pageFixture>(
     {
+        // Login page 
         loginPage: async ({ page }, use) => {
             await use(new LoginPage(page));
         },
+
+        // Home Page 
+        homePage: async ({ page }, use) => {
+            await use(new HomePage(page));
+        },
     }
-)
+)

pages/BasePage.ts

@@ -18,7 +18,7 @@ export abstract class BasePage {
 
     async fill(locator: Locator, value: string) {
         await locator.waitFor({ state: 'visible', timeout: 6000 });
-        await locator.fill(value);
+        await locator.fill(value.toString());
     }
 
 }

pages/HomePage.ts

@@ -0,0 +1,48 @@
+import { Page, test, expect, Locator } from '@playwright/test'
+import { BasePage } from './BasePage';
+
+export class HomePage extends BasePage {
+
+    // Data Entry Form Locators 
+    private readonly dataEntryFormTitle: Locator;
+    private readonly nameField: Locator;
+    private readonly emailField: Locator;
+    private readonly phoneField: Locator;
+
+    constructor(page: Page) {
+        super(page);
+        // Data Entry Form Locators
+        this.dataEntryFormTitle = this.page.getByText("Data Entry Form");
+        this.nameField = this.page.getByPlaceholder("Enter Name");
+        this.emailField = this.page.getByPlaceholder("Enter Email");
+        this.phoneField = this.page.getByPlaceholder("Enter Phone");
+    }
+
+
+    async navigateToURL() {
+        await this.goto("https://testautomationpractice.blogspot.com/");
+    }
+
+    async verifyTitleOfGUISection() {
+        await test.step("Fetching the text Content of page title", async () => {
+            let sectionTitle = await this.dataEntryFormTitle.textContent();
+            if (sectionTitle?.trim() && sectionTitle !== null) {
+                if (sectionTitle.includes("Data Entry Form")) {
+                    console.log(`Section title is as expected - ${sectionTitle}`);
+                }
+            }
+            else {
+                console.log(`Section title is not as per expected - ${sectionTitle}`);
+            }
+        });
+    }
+
+
+    async fillBasicDetails(name: string, email: string, phoneNumber: bigint) {
+        await test.step(`Started to fill the basic details into form`, async () => {
+            await this.fill(this.nameField, name.trim());
+            await this.fill(this.emailField, email.trim());
+            await this.fill(this.phoneField, phoneNumber.toString());
+        });
+    }
+}

pages/LoginPage.ts

@@ -17,41 +17,50 @@ export class LoginPage extends BasePage {
         this.submitButton = this.page.getByRole('button', { name: /submit/i })
         this.userNameFieldValidationMessage = this.page.getByText(/Your username is invalid!/i).first();
         this.passwordFieldValidationMessage = this.page.getByText(/Your password is invalid!/i).first();
-
     }
 
     async navigateToURL() {
-        await this.goto("https://practicetestautomation.com/practice-test-login/");
+        await test.step("Navigating to the URL", async ({ }) => {
+            await this.goto("https://practicetestautomation.com/practice-test-login/");
+        });
     }
 
     async loginWithValidDetails(username: string, password: string) {
-        await this.fill(this.userNameField, username.trim());
-        await this.fill(this.passwordField, password.trim());
-        await this.click(this.submitButton);
+        await test.step(`Entering the user name - ${username.trim()} and password - ${password}`, async () => {
+            await this.fill(this.userNameField, username.trim());
+            await this.fill(this.passwordField, password.trim());
+            await this.click(this.submitButton);
+        });
     }
 
-    async isUserLoggedIn(): Promise<boolean> {
-        const fetchURL: string = this.page.url();
-        console.log(`Fetched URL is ${fetchURL}`);
-        let isLoggedIn: boolean = fetchURL.includes("/logged-in-successfully/");
-        if (isLoggedIn) {
-            console.log(`User is logged in correctly with credentials`);
-        }
-        else {
-            console.log(`User is not logged in with credentials`);
-        }
-        return isLoggedIn;
+    async isUserLoggedIn() {
+        await test.step(`Verifying the user is logged into system`, async () => {
+            const fetchURL: string = this.page.url();
+            console.log(`Fetched URL is ${fetchURL}`);
+            let isLoggedIn: boolean = fetchURL.includes("/logged-in-successfully/");
+            if (isLoggedIn) {
+                console.log(`User is logged in correctly with credentials`);
+            }
+            else {
+                console.log(`User is not logged in with credentials`);
+            }
+            return isLoggedIn;
+        });
     }
 
     async verifyIncorrectUserNameMessage(message: string) {
-        await expect(this.userNameFieldValidationMessage).toBeVisible();
-        await expect(this.userNameFieldValidationMessage).toHaveText(message.trim())
-        console.log("Incorrect username field validation message shown correctly")
+        await test.step(`Checking the username field respective validation message is visible`, async () => {
+            await expect(this.userNameFieldValidationMessage).toBeVisible();
+            await expect(this.userNameFieldValidationMessage).toHaveText(message.trim())
+            console.log("Incorrect username field validation message shown correctly")
+        });
     }
 
     async verifyIncorrectPasswordValidationMessage(message: string) {
-        await expect(this.passwordFieldValidationMessage).toBeVisible();
-        await expect(this.passwordFieldValidationMessage).toHaveText(message.trim())
-        console.log("Incorrect password field validation message shown correctly")
+        await test.step(`Checking the password field validation message is visible`, async () => {
+            await expect(this.passwordFieldValidationMessage).toBeVisible();
+            await expect(this.passwordFieldValidationMessage).toHaveText(message.trim())
+            console.log("Incorrect password field validation message shown correctly")
+        });
     }
 }

tests/ui/HomePageTest.spec.ts

@@ -0,0 +1,13 @@
+import { test } from './../../fixtures/page.fixture'
+import { HomePage } from '../../pages/HomePage'
+import { homedir } from 'node:os';
+
+test("Verifying the page section title of the", async ({ homePage }) => {
+    await homePage.navigateToURL();
+    await homePage.verifyTitleOfGUISection();
+})
+
+test("Fill Basic details into Data entry form", async ({ homePage }) => {
+    await homePage.navigateToURL();
+    await homePage.fillBasicDetails("Roshan Ghadge", "roshanghadge20@gmail.com", 8767002000n);
+});