Cypress中cy.select()无法选择年份选项的问题求助

问题场景 #

使用Cypress v12.14.0编写测试脚本时，遇到无法选择下拉框年份的问题，相关讨论未解决该问题。其他下拉框用相同逻辑可正常工作，且cy.get('#actual_year').contains(actualYear)能正常验证选项存在。

HTML结构 #

<select id='actual_year' name='akt_year' class='form-select form-control-lg' onchange='aktion_changed(2)'>
  <option value='-1' selected>Please choose a year</option>
  <option  value = '2025'>2025</option>
  <option  value = '2024'>2024</option>
  <option selected value = '2023'>2023</option>
</select>

测试代码 #

objectFile.js #

selectYear(yearYYYY){
  cy.get('#actual_year').select(yearYYYY)
}

testFile.js #

let actualYear = new Date().getFullYear();
onFormPage.selectYear(actualYear)

报错信息 #

Timed out retrying after 4000ms: cy.select() failed because it could not find a single with value, index, or text matching: 2023

问题原因及解决办法 #

原因分析 #

1. 类型不匹配：new Date().getFullYear()返回数字类型的年份（如2023），而<option>的value属性是字符串类型（'2023'）。Cypress的select()方法匹配时会严格校验类型，数字与字符串不匹配导致查找失败。
2. contains()方法可正常找到选项，是因为它会自动做类型转换，而select()的匹配逻辑更严格。

解决办法 #

有两种可行修复方式：

• 调用时转换类型：将数字年份转为字符串后传入方法

  let actualYear = new Date().getFullYear().toString();
  onFormPage.selectYear(actualYear)
  

• 方法内部统一处理：在selectYear方法内将参数转为字符串，避免外部调用的类型问题

  selectYear(yearYYYY){
    cy.get('#actual_year').select(yearYYYY.toString())
  }
  

• 可选：确保元素就绪（若存在加载延迟）
  先验证下拉框可见再执行选择操作：

  selectYear(yearYYYY){
    cy.get('#actual_year').should('be.visible').select(yearYYYY.toString())
  }
  

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