Cypress: cannot find elements in calendar popup

Question

Cypress: cannot find elements in calendar popup

933 Views Asked by SamHeyman At 16 July 2021 at 10:26

I cannot interact with the date picker (popup) in my Cypress tests.

I tried .find() and .get() on every div class but each time it says Timed out retrying after 4000ms: Expected to find element: .cdk-overlay-container, but never found it

This is my test code:

      cy.get('#signup-step-pers-details').within(() => {
        cy.get('[name="firstName"]').type(user.firstName)
        .get('[name="surname"]').type(user.lastName)
        .get('#select-gender').click()
        .get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
        .get('#input-dateOfBirth').click()
        .find('.owl-dt-popup').click()
        .get('.owl-calendar-year').contains(2002).click()

I tried adding some wait time but that didn't help either.

Original Q&A

There are 3 best solutions below

AudioBubble On 16 July 2021 at 10:42

This sequence

.get('#input-dateOfBirth').click()
.find('.owl-dt-popup').click()

is expecting to find the date popup within the dateOfBirth control.

You may simply need

.get('#input-dateOfBirth').click()
.get('.owl-dt-popup').click()

Generally you see cy.get() for each item, not chaining all the gets as you have done. That still works because .get() always starts it's search at cy.root(), which is set to #signup-step-pers-details by the .within().

But the .find() is different, it starts it's search at the previous subject, which is the DOB control.

I should add, in case you were expecting the date popup to actually be inside the DOB input, that cdk-overlay-container is added when the popup is made visible, at the bottom of the <body></body> tag (take a look in devtools).

  <div class="cdk-overlay-container">...</div>
</body>

Rosen Mihaylov On 16 July 2021 at 17:09

Your approach of using contains is good but there is another syntax you may use for the purpose of selecting a date:

      cy.get('#signup-step-pers-details').within(() => {
        cy.get('[name="firstName"]').type(user.firstName)
        .get('[name="surname"]').type(user.lastName)
        .get('#select-gender').click()
        .get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
        .get('#input-dateOfBirth').click()
        .find('.owl-dt-popup').click()
        .contains('.owl-calendar-year', '2002').click()

**AudioBubble** · Accepted Answer · 2021-07-22T23:43:02.577000

@KKhan is correct, the Angular Date Time Picker opens in a cdk-overlay-container at the foot of the document.

More detail on the layout:

<body>
  ...
  <div id="signup-step-pers-details>
    ...
    <div id="input-dateOfBirth"></div>
  </div>
  ...

  <div class="cdk-overlay-container">
    <owl-date-time-container>
      ...
    </owl-date-time-container>
  </div>

</body>

Using cy.get('#signup-step-pers-details').within(() => { restricts commands inside to that section of the DOM, but the owl-date-time-container is outside of that.

You can use this approach Cypress how to temporarily escape from a cy.within()

cy.get('#signup-step-pers-details').within(() => {

  // cy.root() === #signup-step-pers-details
  cy.get('[name="firstName"]').type(user.firstName)
    .get('[name="surname"]').type(user.lastName)
    .get('#select-gender').click()
    .get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
    .get('#input-dateOfBirth').click()

  // shift cy.root() to date-time-picker
  cy.document().its('body').find('owl-date-time-container').within(() => {
    cy.get('button.owl-dt-control-period-button').click()
    cy.contains('2002').click()
    cy.contains('Aug').click()
    cy.contains('23').click()
  })

  // back to cy.root() === #signup-step-pers-details
  cy.get('#select-nationality').click()
})

Note I've used .owl-dt-control-period-button which is correct for the current version of Angular Date Time Picker, but perhaps you have an older version that requires .owl-calendar-year.

Cypress: cannot find elements in calendar popup

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in CYPRESS

Related Questions in OWL-DATE-TIME

Trending Questions

Popular # Hahtags

Popular Questions