如何使用Playwright获取无标签开放Shadow DOM的文本内容？

要获取开放Shadow Root内的无标签裸文本，核心是先定位到Shadow Root本身，再读取它的文本内容，具体可以通过以下两种方式实现：

方法一：使用Playwright Locator API穿透Shadow Root #

Playwright的shadowRoot()方法可以获取元素的开放Shadow Root定位器，之后直接调用textContent()就能拿到其中的文本内容：

// 定位到table-cell元素，获取其Shadow Root的locator
const shadowRootLocator = this.page.locator('table-cell').shadowRoot();
// 获取Shadow Root的文本内容，trim去除多余空格换行
const rawText = await shadowRootLocator.textContent();
const targetText = rawText?.trim() || '';

// 断言示例
await expect(shadowRootLocator).toHaveText('Text content', { trim: true });

方法二：通过evaluate直接操作DOM节点 #

如果需要更灵活的DOM操作，可以用evaluate()直接访问元素的Shadow Root属性，读取其文本内容：

const targetText = await this.page.locator('table-cell').evaluate((cellElement) => {
  // 确保Shadow Root存在（开放类型）
  const shadowRoot = cellElement.shadowRoot;
  if (!shadowRoot) return '';
  // 获取Shadow Root下所有文本内容，trim处理
  return shadowRoot.textContent?.trim() || '';
});

// 断言示例
expect(targetText).toBe('Text content');

为什么之前的方法无效？ #

你之前用的innerText()是读取table-cell元素本身的内部文本，但无标签裸文本属于Shadow Root的子节点，并非table-cell元素的直接文本内容。Playwright默认不会自动穿透Shadow Root，必须显式访问Shadow Root后才能读取其中的内容。

内容的提问来源于stack exchange，提问作者Chamath Erandika Rathnayake