How to click and enter date in a date form control in cypress test

D.Hodges 0
Viewed 48

I'm trying to select the date using a cypress test to no avail. I've tried using the xpath and also the input field but it's not working.

Here's the HTML:

    <ion-card>
      <div>
        <ion-item class="item-content">
          <ion-label style="color: black;" position="stacked">Start Date</ion-label>
          <input required formControlName="startDate" type="Date" />
          <div>
            <ion-note slot="error" *ngIf="(startDate.touched && startDate.errors)">Start date is required and must be
              before end date.
            </ion-note>
          </div>
        </ion-item>
      </div>
      <div>
        <ion-item class="item-content">
          <ion-label style="color: black;" position="stacked">End Date</ion-label>
          <input required formControlName="endDate" type="Date" />
          <div>
            <ion-note slot="error" *ngIf="(endDate.touched && endDate.errors)">End date is required.
            </ion-note>
          </div>
        </ion-item>
      </div>
    </ion-card>

When I inspect the element:

enter image description here

Cypress test: cy.get('body > app-root > ion-app > ion-router-outlet > app-add-itinerary > ion-content > form > ion-card:nth-child(3) > div:nth-child(1) > ion-item > input').click()

I've also tried cy.get(input).click() but that doesn't work either.

I'm using "cypress": "^10.3.0",

Any help would be appeciated.

cypress javascript
1 Answers

You will need to enable search inside the shadow-root(s).

Add the option to the test config, or global config (cypress.config.js).

it('tests inside shadow DOM', {includeShadowDom: true}, () => {

  cy.get('ion-card:nth-child(3) input[formControlName="startDate"]')
    .type(myDate)

})
Nichola Walker0
Related