如何在Testcafe中识别单选按钮组选中项？代码调试求助

核心问题分析 #

你的代码存在三个关键问题：

• 混淆了「单选按钮组容器」和「单个单选按钮」的统计对象，导致总数量统计错误
• 未对Selector的exists属性使用await，异步属性直接判断会导致逻辑错误
• 选中项与文本的关联逻辑不够精准，未正确绑定单选按钮和其对应的标签文本

修正后的完整代码 #

// 1. 统计所有单选按钮的总数量
const allRadioButtons = Selector('.radioBox input[type="radio"]');
const totalRadioCount = await allRadioButtons.count;
console.log('总单选按钮数量:', totalRadioCount);

// 2. 验证第一组默认选中"Yes"并获取文本
const firstRadioGroup = Selector('.radioBox').nth(0);
// 找到第一组中对应"Yes"文本的单选按钮
const firstGroupYesRadio = firstRadioGroup.find('label').withText('Yes').find('input[type="radio"]');
// 验证是否存在且被选中
if (await firstGroupYesRadio.exists && await firstGroupYesRadio.checked) {
  console.log('service question has been asked correctly0');
} else {
  console.log('issue in service question answer');
}

// 3. 遍历所有组，找到所有选中的单选按钮及其关联文本
const radioGroups = Selector('.radioBox');
const groupCount = await radioGroups.count;

for (let i = 0; i < groupCount; i++) {
  const currentGroup = radioGroups.nth(i);
  // 找到当前组中被选中的单选按钮
  const selectedRadio = currentGroup.find('input[type="radio"]').withAttribute('checked');
  
  if (await selectedRadio.exists) {
    // 获取关联的标签文本：优先适配label包裹input的结构
    const radioText = await currentGroup.find('label').filter(node => node.querySelector('input') === selectedRadio()).textContent;
    console.log(`第${i}组选中项文本:`, radioText.trim());
  }
}

关键调试点说明 #

1. 统计总数量：
   原代码统计的是单选按钮组的数量（.radioBox的count），而非单个单选按钮总数。修正后通过.radioBox input[type="radio"]定位所有单选按钮，再统计count。

2. 异步属性必须await：
   Testcafe的Selector属性（exists、checked、count等）都是异步Promise，必须使用await才能获取实际布尔值/数值，否则直接判断Promise对象会导致逻辑错误。

3. 关联选中项与文本：
   若页面使用for属性绑定input和label（如<input id="r1"><label for="r1">Yes</label>），则替换文本获取逻辑为：

   const radioId = await selectedRadio.id;
   const radioText = await currentGroup.find(`label[for="${radioId}"]`).textContent;
   

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