如何使用Playwright根据问题与答案文本选择单选按钮？

问题背景 #

Playwright官方文档里介绍了通过答案标签选择单选按钮的方法，但我需要完成一系列是/否问卷的自动填写，不同问卷的问题会变化，不想依赖ID、aria-labelledby这类HTML内部属性，希望仅通过问题文本和答案文本来定位并选择单选按钮。以下是目标问卷的HTML结构：

<!DOCTYPE html>
<html lang="en">
  <body>
    <legend>
      <h4> 
        <span>22.</span>
        <span>Do you have wifi?</span>
      </h4>
    </legend>
    <div class='question-body'>
      <div>
        <div class='answer'>
          <div class='radio-container'>
            <input type='radio' aria-labelledby="yes_radio">
            <label for="yes_radio">
              <span>Yes</span>
            </label>
          </div>
        </div>
        <div class='answer'>
          <div class='radio-container'>
            <input type='radio' aria-labelledby="no_radio">
            <label for="no_radio">
              <span>No</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

实现方案 #

完全可以通过问题文本和答案文本定位单选按钮，下面提供两种实用的Playwright实现方式：

方法1：使用XPath定位

XPath可以直接通过文本内容关联问题和对应的答案，逻辑清晰，适配这种结构：

// 定义要匹配的问题文本和答案文本
const questionText = "Do you have wifi?";
const answerText = "Yes";

// 找到对应问题下的目标单选框并勾选
await page.locator(`xpath=//h4[span[text()="${questionText}"]]/../../following-sibling::div[@class='question-body']//div[@class='answer']//span[text()="${answerText}"]/../preceding-sibling::input`).check();

方法2：结合CSS选择器和文本过滤

先定位到包含目标问题的区域，再在该区域内筛选对应答案的单选框：

const questionText = "Do you have wifi?";
const answerText = "No";

// 先找到问题对应的question-body容器
const questionContainer = page.locator(`h4:has-text("${questionText}")`).locator("..").locator("..").locator("+ .question-body");

// 在容器内找到对应答案的单选框并勾选
await questionContainer.locator(`.answer:has-text("${answerText}") input[type='radio']`).check();

说明 #

• 两种方法都不依赖固定的HTML属性，只通过问题和答案的文本内容定位，适配问题变化的场景
• 可以把逻辑封装成函数，传入不同的问题和答案文本，批量处理问卷

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