- May 07, 2025
- admin
- 0
Page Object Model (POM) in Playwright
Google.Spec.ts //spec file which have test case
import {test, Locator, Expect, chromium, Browser, Page, expect} from ‘@playwright/test’;
import { googlePage } from ‘./Pages/googlePage’; //Import Page class
test(‘click on Gmail’,async()=>{
const browser:Browser = await chromium.launch({headless:false, channel:’chrome’});
const page:Page= await browser.newPage();
const gpage= new googlePage(page);
await gpage.NavigateToSite();
await gpage.clickonGmail();
});
Page class: googlePage.ts
import {Locator, Page} from ‘@playwright/test’;
export class googlePage
{
readonly url =”https://www.google.com/”;
readonly page: Page;
readonly txtSrch: Locator;
readonly btnSignin: Locator;
readonly linkGmail:Locator;
constructor(page: Page) //constructor which takes Page as parameter
{ //find the elements using locator’s
this.page = page;
this.txtSrch = page.locator(“xpath=//textarea[@name=’q’]”);
this.btnSignin = page.locator(“xpath=//a[@aria-label=’Sign in’]”);
this.linkGmail= page.locator(“//a[@aria-label=’Gmail ‘]”);
}
//create action methods
async NavigateToSite()
{
await this.page.goto(this.url);
}
async clickonGmail()
{
await this.linkGmail.click();
}
}
