Playwright Locators in JavaScript (Complete Guide)

Playwright Locators in JavaScript (Complete Guide)

🎯 Playwright Locators in JavaScript (Complete Guide)

This guide explains each Playwright locator with:

✅ What it is
🕐 When to use
⚙️ How to use it
🎯 Benefits
🧪 Code Examples

🔹 1. Locator by ID

✅ What: Selects an element with a unique id.
🕐 When: Element has a unique id.
⚙️ How: page.locator('#username')
🎯 Benefit: Fast and reliable.

<input id="username" />

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

🔹 2. Locator by Class

✅ What: Selects by class.
🕐 When: Repeated or styled elements.
⚙️ How: page.locator('.password')
🎯 Benefit: Useful for shared styling.

<input class="password" />

await page.locator('.password').fill('12345');

🔹 3. Locator by Text

✅ What: Matches visible element text.
🕐 When: For buttons, links, etc.
⚙️ How: page.getByText('Login')
🎯 Benefit: Human-readable.

<button>Login</button>

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

🔹 4. Locator by Placeholder

✅ What: Uses placeholder text.
🕐 When: For form hints.
⚙️ How: getByPlaceholder()
🎯 Benefit: Clear and targeted.

<input placeholder="Enter username" />

await page.getByPlaceholder('Enter username').fill('admin');

🔹 5. Locator by Role

✅ What: Uses ARIA roles (e.g., button, heading).
🕐 When: For accessible apps.
⚙️ How: getByRole()
🎯 Benefit: Accessibility-friendly.

<button>Login</button>

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

🔹 6. Locator by Label

✅ What: Uses label text for inputs.
🕐 When: For labeled form fields.
⚙️ How: getByLabel()
🎯 Benefit: Strong for forms.

<label for="user">Username</label>
<input id="user" />

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

🔹 7. Locator by Name Attribute

✅ What: Targets elements with name.
🕐 When: Useful for forms.
⚙️ How: locator('[name="email"]')
🎯 Benefit: Common in backend forms.

<input name="email" />

await page.locator('[name="email"]').fill('abc@example.com');

🔹 8. Locator by Data Test ID

✅ What: Uses data-testid.
🕐 When: For stable test targeting.
⚙️ How: locator('[data-testid="xyz"]')
🎯 Benefit: Doesn’t break on UI changes.

<button data-testid="login-button">Login</button>

await page.locator('[data-testid="login-button"]').click();

🔹 9. Locator by Tag + Class

✅ What: Combines element tag and class.
🕐 When: For reusable component patterns.
⚙️ How: locator('li.item')
🎯 Benefit: Precise targeting in groups.

<li class="item">Item 1</li>

await page.locator('li.item').click();

🔹 10. Locator with nth(), first(), last()

✅ What: Picks from multiple matches.
🕐 When: Lists, repeated buttons, etc.
⚙️ How: nth(index), first(), last()
🎯 Benefit: Fine control on lists.

<ul>
  <li class="item">One</li>
  <li class="item">Two</li>
</ul>

await page.locator('li.item').nth(1).click();

✅ Best Practices

Practice	Why
Use `data-testid`	Most stable and intention-specific
Prefer `getByRole` or `getByLabel`	Ensures accessibility
Avoid excessive use of `nth()`	Breaks if DOM order changes
Use text-based locators for user-facing elements	Reflects real user interaction

Need help converting this to a GitHub test project or video tutorial? Let me know!

Comments