cypress - 如何选择 Cypress 中许多未禁用元素中的第一个

Question

我正在编写一个自动化测试，用于检查用户通过日历安排约会的能力。日历上的某些日期已禁用 (aria-disabled="true")，某些日期已启用并可供选择 (aria-disabled="false")。根据测试运行的时间，每个日期的禁用/启用状态都会发生变化。如何使用 Cypress 选择第一个未禁用的日期按钮？

以下是该按钮的 HTML 外观，以防万一:

<button class="calendar-date" aria-label="Thursday July 28th, 2022" 
  aria-pressed="false" aria-disabled="false" tabindex="-1" 
  type="button" data-datestring="ThuJul282022">
    28
</button>

Answer 1

另一种方法是使用 :eq(0) 伪选择器。

还有一个:first，但现在已弃用。

cy.get('button.calendar-date[aria-disabled="false"]:eq(0)')
  .click();