赛普拉斯：尝试从选择元素中选择任何未禁用的选项答案

【问题标题】：Cypress: trying to choose any non-disabled option from a select element赛普拉斯：尝试从选择元素中选择任何未禁用的选项
【发布时间】：2023-02-09 03:07:12
【问题描述】：

我有一个包含多个子记录的父记录，它们都一起显示在 ViewParentWithChildren 和 EditParentWithChildren 屏幕上。我想编写一个柏树测试，将新的子记录添加到现有的父记录中。当然，每个子记录都在<tr> 中。

问题是，<select> 元素中有许多 <option disabled> 无效选项。我需要选择一个有效的、已启用的，但我事先不知道该选项中的名称/值是什么。我不在乎它们是什么，我只需要选择任何非禁用选项。

我尝试一个标准的：

cy.contains('button', /Add Another Child Record/i).click();
cy.get('[name=child_id_name][value=""]')  // newly added has nothing in the required field
      .parents('tr')
      .within(tr => {
        cy.get('input[name=child_id_name]').type(randomAlpha());
        cy.get('input[name=description]').type(randomAlpha());
        cy.get('select[name=type]').select(?????);  // TODO
      });

Cypress 只允许通过名称、值或索引选择 <option>。按照设计，直接尝试 .select 有效的 <option> 是行不通的。

【问题讨论】：

标签： css-selectors automated-tests cypress

【解决方案1】：

解决方案有点由内而外。首先从该选择中获取所有非禁用选项，然后转到within其中一个，然后“逃生舱口”再次返回到选择，将.text()提供给.select

cy.contains('button', /Add Another Child Record/i).click();
cy.get('[name=child_id_name][value=""]')  // newly added has nothing in the required field
      .parents('tr')
      .within(tr => {
        cy.get('input[name=child_id_name]').type(randomAlpha());
        cy.get('input[name=description]').type(randomAlpha());
        cy.get('select[name=type] option:not([disabled])') // get all its non-disabled options
          .last() // the first option is usually blank for un-selecting, so, .last
          .within(option => {
            cy.root().closest('select').select(option.text());
          });
      });

【讨论】：