Playwright中Locator文本方法区别及提取span-2文本的方案

先看你提供的HTML结构：

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

一、各文本相关方法的用途与示例 #

1. allInnerTexts() #

批量获取一组元素的innerText值，返回字符串数组。适合一次性提取多个元素的可见文本。
示例代码：

// 获取页面中所有div元素的可见文本
const divTexts = await page.locator('div').allInnerTexts();
// 返回结果类似：['div-1\n  div-2', 'div-2']

2. allTextContents() #

批量获取一组元素的textContent值，返回字符串数组。会包含元素内所有文本（包括隐藏文本、空白字符），不做样式过滤。
示例代码：

// 获取页面中所有span元素的完整文本内容
const spanTexts = await page.locator('span').allTextContents();
// 返回结果类似：['span-1\n  span-2', 'span-2']

3. selectText() #

这是模拟用户选中文本的操作方法，不能直接提取文本，主要用于复制、编辑前的文本选中场景。
示例代码：

// 选中内层span的文本
await page.locator('span >> nth=1').selectText();
// 可配合press('Control+C')模拟复制操作

4. textContent() #

获取单个元素的完整文本内容（包括子元素文本、空白字符），对应DOM原生的textContent属性，不会像innerText那样处理换行和可见性。
示例代码：

// 获取外层span的完整文本
const outerSpanText = await page.locator('span >> nth=0').textContent();
// 返回结果：'span-1\n  span-2'

二、提取"span-2"的可行方案 #

你的需求可以通过多种方法实现，核心是先定位到内层的<span>元素，再提取文本：

方案1：直接定位目标元素提取 #

最精准高效的方式，直接定位到内层span后用innerText()或textContent()提取：

// 方法A：通过父子关系定位
const span2Text = await page.locator('span span').innerText();
// 方法B：用索引定位第2个span
const span2Text = await page.locator('span >> nth=1').textContent();
// 两种方法都能得到 'span-2'

方案2：通过批量方法间接提取 #

如果用allInnerTexts()或allTextContents()，可以先获取所有span的文本数组，再取对应位置的元素：

// 用allInnerTexts()
const allSpanTexts = await page.locator('span').allInnerTexts();
const span2Text = allSpanTexts[1]; // 得到 'span-2'

// 用allTextContents()
const allSpanContents = await page.locator('span').allTextContents();
const span2Text = allSpanContents[1]; // 得到 'span-2'

注意：selectText()无法直接提取文本，不适合你的需求。

内容的提问来源于stack exchange，提问作者utkarsh-k