How can I get an aria label from React-Calendar using Cypress

Question

I have a test where I need to set the date on a React-Calendar using their date-picker ( https://www.npmjs.com/package/react-calendar ). The only element in the dom that will let me get the date accurately is the aria-label, which includes the full date, eg, aria-label="August 12, 2020". Since the calendar may not include the date in the current view, I need a conditional test that first finds whether or not aria-label="August 12, 2020" exists in the dom. If not, I need the test to click the next month button and then click the date.

Here is the code I am working with:

 cy.get('.react-calendar').then(($reactCal) => { if ($reactCal.val().includes(`August 12, 2020`)) { cy.get(`abbr[aria-label="August 12, 2020"]`).click() } else { cy.get('.react-calendar__navigation__next-button').click() cy.get(`abbr[aria-label="August 12, 2020"]`).click() } })

Answer 1

cy.get(`[aria-label="August 12, 2020"]`).click()