Locators are an essential feature of Playwright that helps to find elements on a webpage at any time. They also enable Playwright to automatically wait and retry locating an element until it becomes available.

To identify webpage elements in Playwright, we use selectors, which come in various types. Below, we will examine these selector categories in more detail..

After finding an element using a selector, we can perform multiple actions on it, such as clicking, typing text, or retrieving its attribute values etc...

Playwright recommends to use below built in locators which are really reliable and good for tests -

Locate by role

You can locate each element by it's implicit role. Many html elements have an implicitly defined role that is recognized by the role selector. You can find all the supported roles here.

Lets consider the following DOM structure : -

<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<a href="/password_reset">Forgot password?</a>
<br/>
<button>Submit</button>
<button>Submit & Save</button>

When locating by role, it's a good idea to include its name along with its type, so you can be sure that locator pinpoints the exact element.

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('link', { name: 'Forgot password?' }).click();

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

To check whether the button is enabled / disabled, Here element is considered as enabled/disabled unless it is a button, select, input or textarea with a disabled property.

const btnDisabled = await page.getByRole('button').isDisabled();
const btnEnabled = await page.getByRole('button').isEnabled();

Playwright uses a contains query if a string is passed as the name. However, in the method described below, the selector used in Playwright matches with both buttons, causing the operation to fail since it cannot determine which button to perform the action on.

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

In order to achive this, you should use 'exact' option which will check case-sensitive and whole-string. Playwright has made 'exact: false' as the default to align with all other locators.

await page.getByRole('button', { name: 'submit', exact: true }).click();

We can also use a regular expression and ignore the case so that the test will pass regardless of if the text it contains has a capital letter or not.

await page.getByRole('button', { name: /submit/i }).click();

For page.getByRole, along with 'name' and 'exact', we have other optional options such as 'checked', 'disabled', 'expanded', 'includeHidden', 'pressed', 'selected' etc.. accepts boolean value.

Locate By label

- Allows locating input elements by the text of the associated label, or aria-labelledby element, or by the aria-label attribute.

For example, this method will find the input by label text "Username or email address" in the following DOM:-

'Seleniumeasy Demo page' - http://demo.seleniumeasy.com/basic-first-form-demo.html

Enter message



Here we use 'aria-label' attribute which defines a string value that labels an interactive element

Here is an other example with Amazon login page -

<label for="ap_email" class="a-form-label">
    Email or mobile phone number
    </label>
await page.getByLabel('Email or mobile phone number').fill('test@testing.com');

Locate by Placeholder
Allows locating input elements by the placeholder text.

For example, consider the following DOM structure of demo.seleniumeasy.com/login.html

<div class="input-field">
    <input type="name" name="username" placeholder="Username" autocomplete="nope">
</div>

<div class="input-field">
    <input type="password" onpaste="return false;" ondrop="return false;" name="password" placeholder="Password" autocomplete="new-password">
</div>

You can fill the input after locating it by the placeholder text. In our example we have placeholders for username and password as 'Username' and 'Password' and we pass string text to locate the element using getByPlaceholder.

await page
    .getByPlaceholder("Username")
    .fill("user");
await page
    .getByPlaceholder("Password")
    .fill("SeleniumEasy");

Similar to page.getByRole, for page.getByPlaceholder also you can use 'exact' option which helps to find an exact match.

Locate by getByText

You can use text selectors to locate elements based on their text content. You can locate by text substring, exact string, or a regular expression.

    await page.goto('https://www.amazon.in');
    await page.getByText('Hello, sign in').click();

Other example with Seleniumeasy demo url

 await page.goto('http://demo.seleniumeasy.com/basic-first-form-demo.html');
    await expect(page.getByAltText('Selenium Easy')).toBeVisible();

Locate by alt text

When you want to locate elements by their alt text, you can use getByAltText.

For example, this method will find the image by alt text "Playwright logo":

<img height="100px" width="100px" src="image_url" alt="Selenium Easy">
await expect(page.getByAltText('Selenium Easy')).toBeVisible();

Locate by title attribute

To locate an element by its title, you can use getByTitle.

Consider the following DOM structure.

<span title='users count'>25</span>

You can check the users count after locating it by the title text 'users count':

await expect(page.getByTitle('users count')).toHaveText('25');

Please check below working examples using getByRole, getByLabel, getByTitle, getByAltText, getByText -

test("Open Seleniumeasy demo ", async ({page}) => {
    await page.goto('http://demo.seleniumeasy.com/basic-first-form-demo.html');
    await expect(page.getByAltText('Selenium Easy')).toBeVisible();
    await page.getByPlaceholder('Please enter your Message').fill('Test message');
    await page.getByRole('button', {name:'Show Message'}).click();
    const textDisplayed = await page.getByTitle('text message').textContent();
    console.log(textDisplayed);
    expect('Test message').toBe(textDisplayed);
});

test("Open Seleniumeasy demo ", async ({page}) => {
    await page.goto('http://demo.seleniumeasy.com/basic-first-form-demo.html');
    await expect(page.getByAltText('Selenium Easy')).toBeVisible();
    await page.getByLabel('Enter a').fill('1');
    await page.getByLabel('Enter b').fill('2');
    await page.getByRole('button', {name:'Get Total'}).click();
    const textDisplayed = await page.locator('span#displayvalue').textContent();
    console.log(textDisplayed);
    expect('3').toBe(textDisplayed);
});

test("amazon login demo",async ({page}) => {
    await page.goto('https://www.amazon.in');
    await page.getByText('Hello, sign in').click();
    await page.getByLabel('Email or mobile phone number').fill('test@testing.com');
    await page.getByRole('button', {name: 'Continue'}).click();
});

Locate by CSS or XPath

If you want to find something on a webpage using CSS or XPath, you can use page.locator().

CSS selector : You can use CSS selectors to locate elements based on their attributes, class, or ID. For example, page.locator('button#submit') will locate the button element with ID submit.

await page.locator('css=button').click();
or simply, we can write as below 
await page.locator('button').click();

XPath selector: You can use XPath selectors to locate elements based on their position or attributes. For example, page.locator('//button[contains(text(), "Submit")]') will locate the button element that contains the text "Submit".

await page.locator('xpath=//button').click();
or simply, we can write as below 
await page.locator('//button').click();