Cypress: cannot find elements in calendar popup

Question

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.

Can you add your html dom ? – Alapan Das Jul 16 '21 at 10:37 — Alapan Das, Jul 16 '21 at 10:37

score 0 · Answer 1 · 2021-07-16T11:02:38.443

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>

Thanks for your input. Sadly I had also tried using get, and cy.get. But neither worked. — SamHeyman, Jul 20 '21 at 12:31

score 0 · Answer 2 · answered Jul 16 '21 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()

score 0 · Accepted Answer · answered Jul 22 '21 at 23:43

@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

3 Answers3