From 6e4f52f2f012895dc864ec7b36149dd4f422fd19 Mon Sep 17 00:00:00 2001 From: RoshanGhadge Date: Tue, 7 Jul 2026 19:42:58 +0530 Subject: [PATCH] Added the homePage test --- fixtures/page.fixture.ts | 10 ++++++- pages/BasePage.ts | 2 +- pages/HomePage.ts | 48 +++++++++++++++++++++++++++++++ pages/LoginPage.ts | 53 ++++++++++++++++++++--------------- tests/ui/HomePageTest.spec.ts | 13 +++++++++ 5 files changed, 102 insertions(+), 24 deletions(-) create mode 100644 pages/HomePage.ts create mode 100644 tests/ui/HomePageTest.spec.ts diff --git a/fixtures/page.fixture.ts b/fixtures/page.fixture.ts index 715a3d5..2b25441 100644 --- a/fixtures/page.fixture.ts +++ b/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( { + // Login page loginPage: async ({ page }, use) => { await use(new LoginPage(page)); }, + + // Home Page + homePage: async ({ page }, use) => { + await use(new HomePage(page)); + }, } -) \ No newline at end of file +) diff --git a/pages/BasePage.ts b/pages/BasePage.ts index affa369..c2bcec5 100644 --- a/pages/BasePage.ts +++ b/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()); } } \ No newline at end of file diff --git a/pages/HomePage.ts b/pages/HomePage.ts new file mode 100644 index 0000000..2990560 --- /dev/null +++ b/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()); + }); + } +} \ No newline at end of file diff --git a/pages/LoginPage.ts b/pages/LoginPage.ts index 6910a7c..1437d8d 100644 --- a/pages/LoginPage.ts +++ b/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 { - 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") + }); } } \ No newline at end of file diff --git a/tests/ui/HomePageTest.spec.ts b/tests/ui/HomePageTest.spec.ts new file mode 100644 index 0000000..d05bc78 --- /dev/null +++ b/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); +}); \ No newline at end of file