如何使用Cypress/JavaScript获取select下所有option的value值

代码仅返回第一个option值的核心原因：.invoke('attr', 'value')作用在多元素集合上时，Cypress默认仅返回集合内第一个元素的属性值，不会遍历所有元素提取属性。
另外代码最外层选择器存在笔误：[data-tab-name-prefix="selectedFonds[0]]末尾多写了一个方括号，和实际DOM的属性值不匹配，会导致元素定位异常。

两种可直接运行的实现方案：

方案1：原生JS遍历映射取值 #

通过遍历匹配到的option元素集合，逐个提取value属性组装为数组，逻辑直观易调试：

// 已修正外层选择器的笔误
cy.get('[data-tab-name-prefix="selectedFonds[0]"]')
  .scrollIntoView()
  .should('be.visible')
  .find('[name="selectedFonds[0][name]"]')
  .find('option')
  .then($options => {
    // 遍历所有option，提取value生成数组
    const allOptionValues = Array.from($options).map(option => option.value)
    cy.log(allOptionValues)
    // 此处可直接对allOptionValues做断言等后续操作
  })

方案2：Cypress链式map遍历 #

更贴合Cypress链式调用风格的写法：

cy.get('[data-tab-name-prefix="selectedFonds[0]"]')
  .scrollIntoView()
  .should('be.visible')
  .find('[name="selectedFonds[0][name]"]')
  .find('option')
  .invoke('map', (_, option) => option.value)
  .then(valueList => {
    const allOptionValues = Array.from(valueList)
    cy.log(allOptionValues)
  })

如果仅需要获取select当前选中的value，不需要遍历所有option，直接对select元素调用.invoke('val')即可拿到结果，上述方案仅适用于获取下拉框下所有选项的value集合场景。

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