Cypress: Calendar

Date pickers on Wix forms are custom components. The calendar doesn’t open with a simple input click — instead, it's triggered through a separate button and rendered inside a dynamic popup portal. I had to add wait() calls because there were issues opening the Wix calendar reliably. It’s a dynamic component, and there wasn’t much I could do without access to the page’s internal code. These waits help ensure the calendar is visible and stable before selecting a date.

Test Example: Select Future Date

This test opens the calendar, selects a date 5 days from now, and verifies the selected value in the input.

How This Works

Cypress Feature	Purpose
scrollIntoView()	Scrolls the Date Picker section into the viewport
button[aria-label="Open calendar"]	Opens the calendar (not the input)
wait()	Helps the calendar load completely before interaction
data-testid="calendar"	Targets the rendered popup calendar
aria-disabled="true"	Filters out inactive days
.invoke('val')	Gets the selected value from the readonly input field

Important Notes

• The calendar does not open by clicking the <input> — it’s readonly.

• The popup appears in a portal outside the form structure. That’s why targeting data-testid="calendar" is necessary.

• Selecting dates relies on matching the visible text inside a <td> cell — make sure it’s not disabled.