Playwright如何匹配带mat-radio-checked类的mat-radio-button元素并提取文本

问题根因 #

使用page.$$获取的结果并非可直接读取内部文本的DOM元素数组，而是Playwright封装的ElementHandle对象数组。这类对象是对页面DOM节点的引用句柄，不直接承载元素的文本内容，直接打印、通过数组索引读取自然无法得到预期的文本值。

可直接复用的实现逻辑 #

• 批量提取所有匹配元素的文本（最适配断言场景）
  直接使用page.$$eval方法，无需手动处理句柄转换。该方法会在页面浏览器上下文内执行DOM查询逻辑，直接将处理后的结果返回给测试脚本，避免句柄的额外处理成本：

  // 定位所有选中的mat-radio-button，提取并清洗其内部文本，返回字符串数组
  const checkedRadioTexts: string[] = await page.$$eval(
    "mat-radio-button.mat-radio-checked",
    (radioElements) => radioElements.map(el => el.textContent?.trim() ?? "")
  );
  

• 拿到元素句柄后的文本读取
  如果场景需要保留元素句柄做后续交互（比如模拟点击、等待元素状态变更），拿到page.$$返回的句柄数组后，需要逐个调用句柄自带的textContent()方法读取内容，不能直接将句柄对象当DOM元素使用：

  const checkedRadioHandles = await page.$$("mat-radio-button.mat-radio-checked");
  // 遍历句柄数组逐个读取文本
  for (const handle of checkedRadioHandles) {
    const elementText = await handle.textContent();
    console.log(elementText?.trim());
  }
  

断言写法参考 #

拿到清洗后的文本数组后，可直接结合Playwright的断言逻辑做校验，不需要额外转换：

// 场景1：验证页面上选中的单选按钮文本是否完全匹配预期（仅存在1个选中项时）
expect(checkedRadioTexts).toEqual(["Australian Citizen"]);

// 场景2：验证所有选中的单选按钮中是否包含目标文本（存在多个选中项的动态场景）
expect(checkedRadioTexts).toContain("Australian Citizen");

注意：如果提取到的文本存在多余换行、空格，可在$$eval的map逻辑中补充字符串替换规则做清洗，不影响核心选择器的定位准确性。

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