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

Question

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>

Answer 1

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()