Cypress中基于选中选项的条件选择逻辑实现求助

你的代码存在几个关键问题，导致无法正常运行，以下是修正后的代码和问题说明：

原代码的问题点 #

1. 选择器错误：cy.get('State')无法正确定位到字段1（State）的选中值元素，Vue Select组件的选中文本通常在.vs__selected类的元素里，需要用对应组件的id或类来定位。
2. 条件判断语法错误：$btn.text().to.equal('France')是Chai断言的写法，不能直接用于JavaScript的if条件判断，应该用标准的字符串比较。
3. 重复代码冗余：打开下拉框的操作在if和else里重复，可提取到条件判断外。

修正后的代码 #

假设字段1（State）是id为vs2的Vue Select组件，字段2（Currency）是id为vs3的Vue Select组件，修正后的代码如下：

// 先定位字段1的选中值文本
cy.get('#vs2__selected').then(($selectedState) => {
  // 去除文本前后空格，避免空格导致判断失误
  const selectedStateText = $selectedState.text().trim();
  
  // 打开字段2的下拉框（提取重复操作）
  cy.get('#vs3__combobox').click();
  
  // 根据选中的State选择对应Currency
  if (selectedStateText === 'France') {
    cy.get('[role="listbox"]').contains('Euro').click();
  } else if (selectedStateText === 'USA') {
    cy.get('[role="listbox"]').contains('Dollars').click();
  }
});

额外优化：先选择State再联动Currency #

如果你的场景是先选择State，再自动选择对应Currency，可以用以下参数化的代码，方便切换测试场景：

// 定义要测试的State值，可替换为'USA'
const testState = 'France';

// 第一步：选择State
cy.get('#vs2__combobox').click();
cy.get('[role="listbox"]').contains(testState).click();

// 第二步：根据选中的State自动选择Currency
cy.get('#vs2__selected').then(($selectedState) => {
  const selectedText = $selectedState.text().trim();
  const targetCurrency = selectedText === 'France' ? 'Euro' : 'Dollars';
  
  cy.get('#vs3__combobox').click();
  cy.get('[role="listbox"]').contains(targetCurrency).click();
});

关键注意事项 #

• 元素定位稳定性：避免使用#dialog-2这类易变的id，Vue Select的下拉选项容器通常带有[role="listbox"]属性，用这个定位更可靠。
• 文本处理：用trim()处理选中文本，避免因前后空格导致判断失败。
• Cypress异步特性：通过.then()回调获取元素文本，确保在元素加载完成后再执行判断逻辑。

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