A Beginner's Guide to Playwright Testing with JavaScript: Understanding Locators

Understanding Locators in Playwright

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('John'); // Starts with await page.locator('input[name$="name"]').fill('Doe'); // 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('JohnDoe');        

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.