How to select the first of many not disabled elements in Cypress

user_11953286 0
Viewed 111

I am writing an automation test that checks user's ability to schedule an appointment via the calendar. Some dates on the calendar are disabled (aria-disabled="true" ), some are enabled and available for selection (aria-disabled="false"). Depending on when the test is running, the disabled/enabled status of each date is going to change. How do I use Cypress to select the first date button that is not disabled?

Here's what the button's HTML look like, just in case:

<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>
cypress
3 Answers

You can filter the buttons

  • as a chained command
cy.get('button.calendar-date')
  .filter('[aria-disabled="false"]')        // buttons not disabled
  .eq(0)                                    // first one
  .click()
  • as part of the selector
cy.get('button.calendar-date[aria-disabled="false"]')     // buttons not disabled
  .eq(0)                                                  // first one
  .click()
user_169977070

An alternative to Fody's is to use .first(), which is just syntactic sugar for .eq(0).

cy.get('button.calendar-date[aria-disabled="false"]')
  .first()
  .click();
user_116258500

An alternative is to use :eq(0) pseudo selector.

There was a :first as well, but it's now deprecated.

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