Calender In Cypress

[say2bibhu]

Hi Guys..I am trying to select the date on booking.com using Cypress, but can't find the way. It will be great if someone can help me.

[portyu9]

Hi @say2bibhu

Cypress does not need a special calendar command. You should select the date by targeting the DOM element that represents that date.

The important part is to inspect the calendar cell/button and use a stable attribute, ideally something containing the complete date rather than only the visible day number.

For example, if your calendar renders something like:

<button data-date="2026-12-06">6</button>

then the Cypress test can simply be:

cy.get('[data-date="2026-12-06"]').click()

Using only:

cy.contains('6').click()

is much less reliable because the calendar can contain several elements with the same number, especially when multiple months are visible as in your screenshot.

If the required month is not currently displayed, first click the calendar's next-month button until that month is visible, then select the element representing the complete date.

For an application you control, adding a dedicated attribute such as:

<button data-cy="calendar-day" data-date="2026-12-06">

makes this considerably more reliable.

If you are testing Booking.com itself rather than your own application, keep in mind that its DOM and selectors are controlled by a third party and can change at any time, so there is no permanent Booking.com-specific selector I would recommend.

Please mark this answer as accepted if it helped, thank you.