Can not access text inside Shadow DOM using playwright

Question

I am trying to use playwright to assert text like below which is inside open shadow root which has no tags associated to that specific text. These texts are inside table cells.

<div>
<table-cell>
  #shadow-root (open)
  "Text content"
</table-cell>

I am trying to assert "Text content" which is under shadow DOM. I was able to uniquely locate but can not get the text inside it. It always return an empty string or object depends on the method I tried to retrieve the text. Example typescript code I tried is below,

const text = this.page.locator('table-cell').innerText();

I was able to get other texts which are inside shadow root which has a tag associated with that text. But in this case this specific text line don't have any tag associated to that so the methods aren't working as for other scenarios.

How do I get the contents of #shadow-root if it only contains the text, without any tags ?

Answer 1

innerText is a property on HTMLElement

A shadowRoot is not a HTMLElement and does not have an innerText property.

It does have a innerHTML property: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

let text = document.querySelector("your-element").shadowRoot.innerHTML

Gets you the text