How to click a calendar element using cypress?

Issue

I'm writing an e2e test that is attempting to click a calendar element on the page. Cypress is actually clicking a number once I open the calendar, but it won't click the Done button afterwards.

Here's the inspected element:

Here's the date picker:

Here is the code:

      <div style="text-align: center;">
        <ion-datetime presentation="date" *ngIf="showPicker" display-format="MM/DD/YYYY" min="1900-01-01"
          placeholder="*Enter your date of birth" formControlName="dateOfBirth" (ionChange)="dateChanged($event)"
          showDefaultButtons="true" (ionCancel)="showPicker = false;">
        </ion-datetime>
      </div>

I've tried using the default ID on the confirm button shown in the screenshot.

This didn't work: cy.get('ion-datetime').find('#confirm-button').click(); nor cy.get('#confirm-button').click();

Any help would be greatly appreciated.

Solution

If you have other elements which require traversing Shadow DOM then it's a good practice to write includeShadowDom: true in your cypress config file.

Then You can directly use the command:

cy.get('#confirm-button').click()

Answered By - Alapan Das