赛普拉斯如何存储 <select> 元素中的所有选项文本？答案

【问题标题】：Cypress how to store all option texts from a <select> element?赛普拉斯如何存储 <select> 元素中的所有选项文本？
【发布时间】：2020-09-01 20:25:05
【问题描述】：

我想存储下拉字段中的所有选项文本。应用代码是

<select id="regionSelect" onchange="setRegionalManagerInfo()" data-val="true" data-val-required="The Region field is required." name="RegionalInfo.RegionId" class="form-control input-validation-error">
   <option selected="selected" value="" data-regionalmanageremail="" data-regionalmanagerphonenumber="" data-regionalmanagerphonenumberextension="">— Select —</option>
   <option value="1" data-regionalmanageremail="user1@gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 1</option>
   <option value="2" data-regionalmanageremail="user2@gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 2</option>
   <option value="5" data-regionalmanageremail="user3@gmail.com" data-regionalmanagerphonenumber="">Region 3</option>
</select>

【问题讨论】：

您能发布您尝试过的代码以及您遇到的任何错误吗？
以什么方式存储选项以及用于什么目的？
@ArildAndreassen 我的应用程序中有一个日期字段，当我选择过去日期时，此下拉字段将显示一些选项，当我选择未来日期时，下拉菜单将显示不同的选项。我需要验证这种行为。
@AlapanDas 我从赛普拉斯 gitter 频道获得了以下代码。它只返回第一个选项元素 cy.get('select[title="Select month"]').find('option').each(function ($el, index, $list) { cy.log($el [0].label); });

标签： select dropdown cypress

【解决方案1】：

    let array = []
    cy.get('select option').each(($option, index )=> {
        array.push(Cypress.$($option).text())
        console.log(array[index]);               
    })

是一种更简单的获取数据的方法。现在这些数据存储在数组中，因此您可以访问each 内部和外部的内容。

【讨论】：

该代码正在为这个特定的选择元素打印第一个选项“—选择—”的文本。但是当我尝试另一个选择元素时，它正在打印所有选项的文本。
代码现在运行良好。我的应用程序代码中有 onchange/onblur JS，这导致问题获取所有选项文本

【解决方案2】：

使用.then() 和.map() 的组合更容易做到这一点，

cy.get('select option').then($options => {
  return  [...$options].map(option => option.innerText)
})

【讨论】：