What Are Locators in Playwright?

A locator in Playwright is a way to identify and interact with elements on a web page. It tells Playwright which button, input field, checkbox, or link should be used during automation.

Key Points

  • Locators are smart queries that identify elements on a web page.
  • They automatically handle dynamic elements.
  • They include built-in auto-waiting.
  • They improve test stability by waiting until elements are ready before interaction.

Common Locator Types

CSS Selector

 
page.locator('input#username')
 

Text Selector

Advertisement
 
page.locator('text=Login')
 

XPath Selector

 
page.locator('//button[text()="Submit"]')
 

Role Selector

 
page.getByRole('button', { name: 'Submit' })
 

Common Actions Performed Using Locators

  • click()
  • fill()
  • type()
  • hover()
  • check()
  • uncheck()

Why Locators Matter

Without proper locators:

  • Tests become flaky.
  • Dynamic elements are difficult to identify.
  • Manual waits increase execution time.
  • SPA and AJAX applications become difficult to automate.
  • Scripts become harder to maintain.

Playwright locators automatically wait for elements to become ready before performing actions, making tests cleaner and more reliable.

The recommended locator strategy in Playwright is to use Role Selectors and Test IDs first, followed by Text Selectors, while using CSS or XPath only as a last resort.

Role Selectors (getByRole)

Best for accessibility-friendly elements such as:

  • Buttons
  • Links
  • Checkboxes
  • Form controls

Test IDs

Examples include:

  • data-testid
  • Custom testing attributes

These remain stable even when the application's UI changes.

Text Selectors

Use text selectors when Role Selectors or Test IDs are unavailable.

CSS or XPath Selectors

Use CSS or XPath only as a last resort because UI changes can easily break these locators.

Role Selectors and Test IDs provide:

  • Better stability
  • Better readability
  • Reduced flaky tests
  • Improved cross-browser reliability
  • Easier maintenance

According to your project notes, relying only on CSS or XPath caused flaky automation whenever UI changes occurred. Real-world projects therefore prioritize Role Selectors and Test IDs for modern applications such as SPAs and e-commerce websites.

Role Selectors: getByRole()

The getByRole() locator identifies elements using their ARIA role together with an optional accessible name.

It is one of the most reliable locator strategies for modern applications.

Examples

Button

 
page.getByRole('button', { name: 'Login' })
 

Link

 
page.getByRole('link', { name: 'Forgot Password?' })
 

Checkbox

 
page.getByRole('checkbox', { name: 'Remember Me' })
 

Clicking a Button

 
await page.getByRole('button', { name: 'Submit Transfer' }).click();
 

Project Usage

"I used Role Selectors (getByRole) for buttons, links, and checkboxes, which significantly reduced flaky tests compared to CSS and XPath selectors."

Clicking, Typing, and Clearing Text Fields

Clearing a text field means removing the existing value before entering new input.

Using fill()

Playwright automatically clears existing text before entering the new value.

 
await page.locator('#username').fill('newUser');
 

Clearing a Field Explicitly

 
await page.locator('#username').fill('');
 

Alternative Method

You can also use keyboard shortcuts:

  • Ctrl + A
  • Backspace

Why Clearing Fields Is Important

If fields are not cleared:

  • Previous data remains.
  • Unexpected concatenated values appear.
  • Automation behaves differently from real users.
  • Data-driven tests become unreliable.

Clearing ensures:

  • Fresh input for every execution.
  • Correct form validation.
  • Reliable negative testing.
  • Consistent data-driven testing.

Interview Answer

"In Playwright, we clear a text field using fill(''). It automatically removes the existing value before entering new data. I commonly use this approach during data-driven testing."

Handling Dropdowns: Standard vs Custom

Real-world applications generally contain two types of dropdowns.

Standard Dropdown (<select>)

Standard dropdowns contain <option> elements and support Playwright's built-in selectOption() method.

Example:

 
await page.selectOption('#country', {
  label: 'India'
});
 

Values can be selected using:

  • Label
  • Value
  • Index

Custom Dropdown

Custom dropdowns are typically developed using:

  • div
  • li
  • React
  • Angular

Since they do not use the <select> tag, they require manual interaction.

Example:

 
await page.click('#countryDropdown');

await page.click('text=India');

await expect(page.locator('#country')).toHaveText('India');
 

"I first identify whether the dropdown is a standard or custom dropdown. For standard dropdowns, I use selectOption() by label, value, or index. For custom dropdowns, I manually click the dropdown and select the required option. Finally, I verify that the selected value has been applied successfully."

Testing Checklist

Verify:

  • Default selected value
  • All available options
  • Sorting order
  • Duplicate values
  • Mandatory field behavior
  • Dependent dropdowns (Country → State)
  • Backend or API response after selection, when applicable

Real Project Example

Selecting a Country triggered an API that dynamically loaded the State dropdown.

Automation validated:

  • The selected Country.
  • The loaded State values.
  • The corresponding backend API response.

FAQs

What are locators in Playwright?

Locators are smart queries used to identify and interact with elements on a web page. They support built-in auto-waiting and include CSS, Text, XPath, and Role Selectors.

Use locators in the following order:

  • Role Selectors
  • Test IDs
  • Text Selectors
  • CSS or XPath (last resort)

This provides better stability and maintainability.

How do you use getByRole()?

Example:

 
page.getByRole('button', { name: 'Login' })
 

It identifies elements using their ARIA role and accessible name.

How do you clear a text field in Playwright?

Use:

 
fill('')
 

Playwright automatically clears the existing value before entering new text.

How do you handle a standard dropdown?

Example:

 
await page.selectOption('#country', {
  label: 'India'
});
 

Values can be selected using label, value, or index.

How do you handle a custom dropdown?

Click the dropdown, select the required option manually, and verify the selected value.

Example:

 
await page.click('#countryDropdown');

await page.click('text=India');

await expect(page.locator('#country')).toHaveText('India');