How to Use Playwright Locators: A Detailed Guide

 ​Playwright is a robust automation framework for web applications, offering a variety of locator strategies to interact with web elements effectively. Utilizing the appropriate locator methods enhances test reliability and maintainability.​

Locators in Playwright serve as references to web elements, enabling interactions such as clicks, text entry, and validations. They come with built-in auto-waiting and retry mechanisms, ensuring that actions are performed only when elements are ready.

Playwright, one of the most commonly used frameworks for end-to-end testing, provides various locator strategies to find and interact with Web Elements. In this blog, we will learn various Playwright locators and see how to use them for effective end-to-end testing.

1. Locator Property (using ID locator)

​In Playwright, selecting elements by their id attribute can be accomplished using locator strategies.

Syntax :

await page.locator("id=regUsername").fill("Sumit");

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('Locate Form Element using ID Property', async ({page}) => {

  await page.goto('https://skptricks.github.io/learncoding/selenium-demo/login%20registration%20page/Register.html');
  await page.locator("id=regUsername").fill("Sumit");
  await page.locator("id=regEmail").fill("Sumit@gmail.com");
  await page.locator("id=regPassword").fill("Skptricks");
  await page.locator("[name=submitregistrationform]").click();
  await expect(page.locator("//h1")).toContainText("405 Not Allowed")
 
});

2. CSS Selectors Locator 

Playwright allows the use of CSS selectors for locating elements, offering flexibility when user-facing attributes are insufficient.

By ID :

await page.locator('#submit-button').click();

By Class:

await page.locator('.btn-primary').click();

By Element Type:

await page.locator('input').fill('Sample text');

By Attribute:

await page.locator('[type="submit"]').click();

Syntax :

To utilize CSS locators, prefix your CSS expression with css= .It is not mandatory to mention CSS prefix in locator function in playwright.

await page.locator("css=[id='regUsername']").fill("Sumit");

OR

await page.locator("[id='regUsername']").fill("Sumit");

Example :

// @ts-check
import { test, expect } from '@playwright/test';

test('Locate Form Element using CSS Property', async ({page}) => {

  await page.goto('https://skptricks.github.io/learncoding/selenium-demo/login%20registration%20page/Register.html');
  await page.locator("css=[id='regUsername']").fill("Sumit");
  await page.locator("css=[id='regEmail']").fill("Sumit@gmail.com");
  await page.locator("[id='regPassword']").fill("Skptricks");
  await page.locator("[name='submitregistrationform']").click();
  await expect(page.locator("//h1")).toContainText("405 Not Allowed")
 
});

3. Xpath Locator 

XPath locators enable you to select elements based on their XML path expressions, providing a flexible method for element identification. However, it's recommended to prioritize user-visible locators, such as those based on text or accessible roles, over XPath due to their resilience to page structure changes.

Syntax :

To utilize XPath locators, prefix your XPath expression with xpath= . It is not mandatory to mention Xpath prefix in locator function in playwright.

await page.locator('xpath=//button').click();

OR 

await page.locator('//button').click();

Example :

// @ts-check
import { test, expect } from '@playwright/test';


test('Locate Form Element using XPATH Property', async ({page}) => {

  await page.goto('https://skptricks.github.io/learncoding/selenium-demo/login%20registration%20page/Register.html');
  await page.locator("xpath=//input[@name='username']").fill("Sumit");
  await page.locator("xpath=//input[@name='emailid']").fill("Sumit@gmail.com");
  await page.locator("//input[@name='userpassowrd']").fill("Skptricks");
  await page.locator("//input[@name='submitregistrationform']").click();
  await expect(page.locator("//h1")).toContainText("405 Not Allowed")
 
});

Recommendations:

1. Use CSS Selectors for id Selection: Utilize CSS selectors when selecting elements by their id attribute.
2. Consider Built-in Locators: Explore Playwright's built-in locator methods, such as getByTestId, for selecting elements based on attributes like data-testid.
3. Prioritize User-Facing Locators: Whenever possible, use locators based on user-visible attributes, such as roles or text content, to enhance test reliability.​

By following these practices, you can effectively select elements in Playwright and create robust, maintainable tests.