Blog # 3 : - Understanding Locators

 

Introduction to Locators

Locators are an essential part of Playwright as they help identify and interact with elements on a webpage. Playwright provides multiple ways to locate elements efficiently. Some of the most commonly used locators include:

1. ID Locator (#id) – Selects an element by its unique ID.

2. Name Locator ([name=value]) – Selects an element using the name attribute.

3. Class Locator (.classname) – Selects elements by their CSS class.

4. Tag Locator (tagname) – Selects elements by their HTML tag name.

5. CSS Selector (css=value) – Uses CSS rules to locate elements (recommended for flexibility and performance).

6. Text Locator (text=value) – Selects elements based on their visible text.

7. Role-Based Locator (role=value) – Uses ARIA roles for accessibility-based selection.

8. XPath (xpath=value) – Selects elements using an XPath expression.

In this guide, we will focus primarily on CSS locators, as they are efficient and widely used in Playwright automation.

---

CSS Locators in Playwright

CSS selectors allow precise and efficient element selection using styles and structure. Playwright supports a wide range of CSS selectors to interact with elements effectively.

1. Basic CSS Selectors

• ID Selector (#id)

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

• Class Selector (.classname)

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

• Tag Selector (tagname)

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

2. Attribute Selectors

• Exact Match ([attribute="value"])

  await page.locator('input[type="email"]').fill('test@example.com');

• Partial Match

  await page.locator('input[name^="user"]').fill('Martha'); // Starts with
  await page.locator('input[name$="name"]').fill('May'); // Ends with
  await page.locator('button[class*="submit"]').click(); // Contains

3. Combinators (Relationships)

• Parent > Child (>) – Direct child selection

  await page.locator('div.container > p').click();

• Descendant ( ) – Any level descendant

  await page.locator('div.container p').click();

• Adjacent Sibling (+) – Selects the next sibling

  await page.locator('h1 + p').click();

• General Sibling (~) – Selects all next siblings

  await page.locator('h1 ~ p').click();

4. Pseudo-Classes

• First and Last Child

  await page.locator('ul li:first-child').click();
  await page.locator('ul li:last-child').click();

• nth-child / nth-of-type

  await page.locator('ul li:nth-child(2)').click(); // Second list item
  await page.locator('p:nth-of-type(3)').click(); // Third paragraph

5. Advanced Selectors

• :has() (Parent contains Child)

  await page.locator('div:has(button)').click(); // Selects a div containing a button

• :not() (Exclusion Selector)

  await page.locator('input:not([disabled])').fill('Hello');

• :is() (Matches Multiple Selectors)

  await page.locator(':is(button, a)').click(); // Clicks either button or link

---

Recommended Built-in Locators in Playwright

Playwright provides built-in locators that enhance readability and stability of tests. These are the recommended locators:

1. Role Locator (getByRole)

Locates elements by explicit and implicit accessibility attributes.

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

2. Text Locator (getByText)

Locates elements based on visible text.

await page.getByText('Login').click();

3. Label Locator (getByLabel)

Locates a form control by its associated label text.

await page.getByLabel('Username').fill('MarthaMay');

4. Placeholder Locator (getByPlaceholder)

Locates an input field by its placeholder text.

await page.getByPlaceholder('Enter your email').fill('test@example.com');

5. Alt Text Locator (getByAltText)

Locates an image or element by its alt text.

await page.getByAltText('Company Logo').click();

6. Title Locator (getByTitle)

Locates an element by its title attribute.

await page.getByTitle('More Info').click();

7. Test ID Locator (getByTestId)

Locates an element using the data-testid attribute.

await page.getByTestId('username-input').fill('JohnDoe');

---

Conclusion

Locators are crucial for interacting with elements in Playwright. CSS selectors provide an efficient way to select elements, and Playwright's built-in locators improve test readability and maintainability. By mastering these locators, you can build reliable and scalable test automation scripts.