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!