How to Get Text from an Element in Playwright (Complete Guide)

Retrieving text from elements is one of the most common tasks in UI automation. With Playwright, it's quick and reliable.

This guide shows how to get the text content from HTML elements using different Playwright methods, with code examples, comparisons, and pro tips.

✅ Quick Answer

const text = await page.locator('h1').textContent();

Or with innerText:

const text = await page.locator('h1').innerText();

🔍 Differences Between textContent() and innerText()

🧪 Example: Get Text from Element

HTML:

<div id="greeting">Hello <strong>world</strong>!</div>

Playwright:

const text = await page.locator('#greeting').textContent();
console.log(text); // "Hello world!"

🧪 Alternative 1: Using innerText()

const text = await page.locator('#greeting').innerText();
console.log(text); // "Hello world!"

• Ignores invisible elements
• May be affected by CSS (like display: none)

🧪 Alternative 2: Using evaluate()

const text = await page.$eval('#greeting', el => el.textContent);
console.log(text);

• Works without locator()
• You can run custom DOM logic

🧪 Alternative 3: With innerHTML (not recommended for just text)

const html = await page.locator('#greeting').innerHTML();
console.log(html); // "Hello <strong>world</strong>!"

• Use only if you need raw HTML
• Doesn’t strip tags

🧠 Best Practices

• Prefer locator().textContent() for reliability
• Use innerText() if you need to match user-visible text
• Normalize strings (.trim()) if needed

const text = (await page.locator('h1').textContent())?.trim();

🧰 Comparison Table

🧩 Which Should You Use?

🏁 Conclusion

Playwright makes it simple to extract text from elements:

• Use locator().textContent() for most cases
• Use innerText() if visibility matters
• Use $eval() for custom logic

Mastering these options will help you write reliable, readable, and test-friendly scripts.