- Jul 05, 2026
- admin
- 0
Locators in Playwright
import { test, expect,Page, Browser, Locator, chromium } from ‘@playwright/test’;
//Find Element By Xpath
test(‘Findelement By xpath’,async({})=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const page2:Page=await browser.newPage();
await page2.goto(‘https://www.google.com’);
const txtSrch:Locator=await page2.locator(“//textarea[@name=’q’]”);
await txtSrch.fill(“India”);
await page2.screenshot({path:’googlesearch.jpeg’});
const text1:Locator= await page2.locator(‘xpath=//div[contains(text(),”Google offered in:”)]’);
console.log(“google text visible:” + await text1.isVisible());
});
//Findelement By classname
test(‘Findelement By classname’,async({})=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const page2:Page=await browser.newPage();
await page2.goto(‘https://www.google.com’);
const txtSrch:Locator=await page2.locator(‘textarea.gLFyf’);
await txtSrch.fill(“India”);
});
//Findelement By text
test(‘Findelement By text’,async({})=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const page2:Page=await browser.newPage();
await page2.goto(‘https://www.amazon.in’);
const giftcards:Locator=await page2.getByText(“Amazon Pay”).first();
await giftcards.click();
});
//Findelement By css selector
test(‘Findelement By css selector’,async({})=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const page2:Page=await browser.newPage();
await page2.goto(‘https://www.google.com’);
const txtSrch:Locator=await page2.locator(“css=textarea[name=’q’]”); //tagname[attribute=value]
await txtSrch.fill(“Techturorielaz”);
});
//Findelement By Testid
test(‘Findelement By Testid’,async({})=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const page2:Page=await browser.newPage();
await page2.goto(‘https://www.google.com’);
const prodLink:Locator= await page2.getByTestId(‘products’);
await prodLink.click();
//console.log(await page2.getByRole(‘div’).filter(hasText:’Google offered in: ‘).isEnabled());
});
//Find Element GetbyRole
test(‘Learn GetbyRole’,async()=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const rsPage:Page=await browser.newPage();
await rsPage.goto(“https://rahulshettyacademy.com/AutomationPractice/”);
//const chk1:Locator= await rsPage.locator(‘css=input[id=”checkBoxOption1″]’); //working
//const chk1:Locator= await rsPage.locator(‘input[id=”checkBoxOption1″]’); //working
//const chk1:Locator= await rsPage.locator(‘input#checkBoxOption1’); //working
await rsPage.getByRole(“textbox”).first().fill(‘India’);
await expect(rsPage.getByRole(“button”,{name:’Mouse Hover’})).toBeVisible(); //working
await rsPage.getByRole(“button”,{name:’Mouse Hover’}).click(); //working
//await chk1.click();
});
test(‘Get by Role or title google search’,async({page})=>{
await page.goto(“https://www.google.com”, {
waitUntil: “domcontentloaded”
});
//await page.waitForTimeout(2000);
await page.waitForLoadState(“networkidle”); //wait until pageload
const textboxes = await page.getByRole(“combobox”).all();
console.log(“Textbox count:”, textboxes.length);
await page.getByRole(“combobox”, { name: “Search” }).fill(‘India’); //working fine
await page.getByRole(“combobox”, { name: “Search” }).press(“Enter”); //working fine
// await page.getByTitle(“Search”).fill(“India”); //working fine
// await page.getByTitle(“Search”).press(“India”); //working fine
/*
✅ getByRole(‘combobox’, { name: ‘Search’ })
✅ getByLabel(‘Search’)
✅ getByTitle(‘Search’)
✅ locator(‘textarea[name=”q”]’)
❌ locator(‘#APjFqb’) (avoid relying on dynamic IDs)
*/
});
//Find Element getByTestId
//it will look for data-testid attribute
test(“get by TestID”, async ({ page }) => {
await page.goto(“https://www.google.com”, {
waitUntil: “domcontentloaded” });
await page.waitForLoadState(“networkidle”);
const textboxes = await page.getByTestId(“APjFqb”).all();
console.log(“Textbox count:”, textboxes.length); // should give 0 coz no data-testid
await page.getByTestId(“APjFqb”).fill(“India”); //wont work coz no data-testid attribute
await page.getByTestId(“APjFqb”).press(“Enter”);
});
//it will look for data-testid attribute
test(“get by TestID in amazon site”, async ({ page }) => {
await page.goto(“https://www.amazon.in”, {
waitUntil: “domcontentloaded” });
await page.waitForLoadState(“networkidle”);
const volControl = await page.getByTestId(“DesktopFlexWatchNowOverlayTemplate”).all();
console.log(“Textbox count:”, volControl.length);
await page.getByTestId(“VolumePlayPanel”).click();
await page.waitForTimeout(30000);
});
//not working
test(‘getbyText’,async({page})=>{
await page.goto(“https://www.google.com”, {
waitUntil: “domcontentloaded”
});
await page.waitForLoadState(“networkidle”);
const searchResults = await page.getByText(“Search”);
await searchResults.click();
});
//Find Element getByLabel
test(‘getbyLabel’,async({page})=>{
await page.goto(“https://www.google.com”);
//await page.waitForLoadState(“networkidle”);
await page.waitForTimeout(2000);
const txtSrch:Locator=await page.locator(“css=textarea[name=’q’]”); //tagname[attribute=value]
await txtSrch.fill(“Techturorielaz”);
const searchResults = await page.getByLabel(“Google Search”);
console.log(“searchResults count:”, await searchResults.count());
if(await searchResults.count() > 0)
{
await searchResults.first().click(); // Click the first element if it exists
}
test(‘Find element using attribute’,async()=>{
const browser:Browser=await chromium.launch({headless:false, channel:’chrome’});
const gpage:Page=await browser.newPage();
await gpage.goto(‘https://www.google.com’);
const txtSrch:Locator=await gpage.locator(‘[name=”q”]’);
await txtSrch.fill(“USA”);
// await gpage.keyboard.press(‘Enter’);
});
