Playwright: How to Get Element by Class Name (With Examples)

When writing UI automation with Playwright, you’ll often need to select elements using a CSS class name — especially in component-based frameworks like React, Vue, or Angular.

This guide shows you how to get elements by class in Playwright using different methods like locator, page.$, evaluate, and more.

✅ Quick Answer

const element = page.locator('.my-class');

Uses standard CSS selector
Selects elements by class name
Works with any HTML tag that has the class

🧪 Method 1: Using `locator()` with Class Name

const button = page.locator('.btn-primary');
await button.click();

✅ Most common and recommended method
💡 Use await button.first().click() if multiple matches exist

Example: Locate and Read Text

const label = page.locator('.label');
const text = await label.textContent();
console.log(text);

🧪 Method 2: Locate by Tag + Class

const input = page.locator('input.form-control');
await input.fill('Hello!');

✅ More precise
🧠 Use tag + class when class names are reused across elements

🧪 Method 3: Using `page.$()` or `page.$$()`

const elementHandle = await page.$('.my-class');
const text = await elementHandle?.textContent();

Or multiple elements:

const allElements = await page.$$('.item');
for (const el of allElements) {
  console.log(await el.textContent());
}

✅ Works for single/multiple elements
❌ Less powerful than locator() (no auto-waiting)

🧪 Method 4: Evaluate in the Browser Context

const text = await page.evaluate(() => {
  const el = document.querySelector('.my-class');
  return el?.textContent;
});

✅ Low-level access
❗ Use only when locator() or $() is not enough

📦 Match Elements by Multiple Classes

const button = page.locator('.btn.btn-primary.active');
await button.click();

✅ Combine multiple class selectors
❌ Order of classes doesn’t matter in CSS

🧰 Comparison Table

Method	Auto-waits	Best For	Notes
`locator('.class')`	✅ Yes	All-purpose automation	Preferred method
`locator('tag.class')`	✅ Yes	Specific tag + class match	More precise
`page.$('.class')`	❌ No	Single element lookup	Returns ElementHandle
`page.$$('.class')`	❌ No	Multiple elements	Manual loop needed
`page.evaluate(...)`	❌ No	Custom logic or bulk extract	Browser context; less readable

🧠 Pro Tips

Use await locator.count() to get number of matching elements
Use :visible if some elements may be hidden:

const visibleBtn = page.locator('.btn:visible');

Combine with hasText to filter by content:

const alert = page.locator('.alert', { hasText: 'Error' });

🏁 Conclusion

To get an element by class in Playwright, use:

const el = page.locator('.class-name');

This is fast, reliable, and supports additional filters. For more control, consider using tag names, multiple class selectors, or advanced queries like :nth-child() and :has().