如何通过Playwright获取div下<dt>与<dd>元素的文本值

页面结构如下：

<dl class="er-ctrbs-review-totals-list">
   <div data-qa="total-1">
      <dt>Employee Name</dt>
      <dd>Sam</dd>
   </div>
   <div data-qa="total-2">
      <dt>Employer Name</dt>
     <dd>ZenS</dd>
   </div>
</dl>

尝试获取<dt>和<dd>的文本值时，用page.locator通过[data-qa]属性定位仅返回定位器，无法拿到实际值；后续尝试了以下XPath定位方式也无效：

// 第一种XPath尝试
_page.Locator("xpath=//div[@data-qa='total-1']/dt");
_page.Locator("xpath=//div[@data-qa='total-2']/dt");

// 第二种XPath尝试
_page.Locator("xpath=*//div[@data-qa='total-1']/dt");
_page.Locator("xpath=*//div[@data-qa='total-2']/dt");

需要获取的内容为：Employee Name、Sam、Employer Name、ZenS。

解决方案 #

核心问题 #

Locator()方法仅创建定位器对象，并未执行文本提取操作，必须调用对应的文本获取方法（如C#中的TextContentAsync()或InnerTextAsync()）才能拿到实际值。

具体实现方式 #

1. 单个元素精准获取

直接定位目标元素后调用文本方法：

// 获取total-1下的标签和值
string employeeLabel = await _page.Locator("div[data-qa='total-1'] dt").TextContentAsync();
string employeeName = await _page.Locator("div[data-qa='total-1'] dd").TextContentAsync();

// 获取total-2下的标签和值
string employerLabel = await _page.Locator("div[data-qa='total-2'] dt").TextContentAsync();
string employerName = await _page.Locator("div[data-qa='total-2'] dd").TextContentAsync();

2. 批量获取所有目标文本

如果需要一次性拿到所有<dt>和<dd>的文本，可批量定位后提取：

// 获取所有dt文本
var allDtTexts = await _page.Locator(".er-ctrbs-review-totals-list dt").AllTextContentsAsync();
// 获取所有dd文本
var allDdTexts = await _page.Locator(".er-ctrbs-review-totals-list dd").AllTextContentsAsync();

// 合并并按需求整理顺序
var targetTexts = new List<string>();
for (int i = 0; i < allDtTexts.Count; i++)
{
    targetTexts.Add(allDtTexts[i]);
    targetTexts.Add(allDdTexts[i]);
}
// 此时targetTexts为["Employee Name", "Sam", "Employer Name", "ZenS"]

注意事项 #

• 确保元素已加载完成，可提前等待元素可见：

  await _page.Locator("div[data-qa='total-1']").WaitForAsync(new LocatorWaitForOptions { State = WaitForSelectorState.Visible });
  

• 优先使用简洁的CSS选择器，比冗余XPath更易维护。

内容的提问来源于stack exchange，提问作者born2Learn