What’s the difference between `locator.allInnerTexts()`, `Contents()`, `Text()`, `selectText()`, and `textContent()` in Playwright?

General Discussions
,
1

I’m working on Playwright tests and needed to extract text from a specific <span> element, "span-2" in this example:

<div data-testid="some-div">
  div-1
  <div>div-2</div>
  <span>span-1
    <span>span-2</span>
  </span>
</div>

While exploring Playwright’s documentation, I found several text-related locator methods:

  • allInnerTexts()
  • allTextContents()
  • innerText()
  • selectText()
  • textContent()

I understand innerText() retrieves the visible text of an element, for example:

await page.getByTestId("some-div").innerText(); // returns "hello-1"

However, I’m unclear about how allTextContents() and the other methods differ in behavior, return values, and use cases.

Could someone explain what each method does, ideally with examples, and suggest which one would be best suited to extract the text "span-2" from the nested structure above?

2

I totally remember getting tripped up by this too , all these Playwright text methods sound so similar!

Here’s how I figured it out through trial and error.

  • locator.textContent() gives you the raw text from the DOM, including hidden or extra whitespace.

  • locator.innerText() only returns visible text (what’s actually rendered).

  • locator.allTextContents() collects all raw text values from matching elements.

  • locator.allInnerTexts() does the same but for visible text only.

  • locator.selectText() is used for selecting text in the browser UI (not reading it).

If you just want “span-2”, use await page.locator(‘span span’).textContent() , it’s the cleanest way to get the nested text node using Playwright locator textContent.

3

When scraping values from nested <span> elements, the key difference lies in what each method includes:

  • textContent(): Returns the text as stored in the DOM, including hidden elements and extra spacing.
  • innerText(): Returns the text as visually rendered in the browser, ignoring hidden elements and trimming extra spaces.
  • allTextContents() / allInnerTexts(): Return arrays of all matches, which is useful if multiple elements match your selector.

For example, if you only want "span-2" from nested spans:

const text = await page.locator('span >> nth=1').textContent();
console.log(text); // Outputs: "span-2"

Using textContent() with Playwright locators ensures precise extraction, especially when dealing with nested elements.

4

When I first learned Playwright, I thought innerText() and textContent() were interchangeable , turns out they’re not!

Here’s what I learned the hard way:

  • innerText() → ignores hidden text, respects CSS (like display: none)

  • textContent() → raw DOM text (includes hidden stuff and spacing)

  • allInnerTexts() / allTextContents() → just array versions for multiple nodes

  • selectText() → for selecting text in the page, not fetching it

For your nested spans, I’d go with:

const value = await page.locator('span span').textContent();

It’s reliable, and the Playwright locator textContent approach always gives me the actual string straight from the DOM.