赛普拉斯：无法在日历弹出窗口中找到元素

Question

我无法在 Cypress 测试中与日期选择器（弹出窗口）交互。

我在每个 div class 上都尝试了 .find() 和 .get() 但每次它都说 Timed out retrying after 4000ms: Expected to find element: .cdk-overlay-container, but never found it

这是我的测试代码：

      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()

我尝试增加一些等待时间，但这也无济于事。

Answer 1

这个序列

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

希望在 dateOfBirth 控件中找到 日期弹出窗口。

您可能只需要

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

通常您会看到每个项目 cy.get()，而不是像您所做的那样链接所有的获取。这仍然有效，因为 .get() 总是从 cy.root() 开始搜索，它被 .within().
设置为 #signup-step-pers-details
但是.find()不同，它是从上一个主题开始搜索的，也就是DOB控件。

我应该补充一点，以防您希望日期弹出窗口实际位于 DOB 输入中，当弹出窗口可见时，我会在 <body></body> 的底部添加 cdk-overlay-container标签（在 devtools 中查看）。

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

Answer 2

您使用 contains 的方法很好，但您可以使用 another syntax 来选择日期：

      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()

Answer 3

@KKhan 是正确的，Angular 日期时间选择器在文档底部的 cdk-overlay-container 中打开。

有关布局的更多详细信息：

<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>

使用 cy.get('#signup-step-pers-details').within(() => { 将内部命令限制在 DOM 的那个部分，但 owl-date-time-container 不在那个部分。

你可以使用这种方法

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()
})

注意我使用了 .owl-dt-control-period-button 这对于 Angular 日期时间选择器的当前版本是正确的，但也许你有一个旧版本需要 .owl-calendar-year.

赛普拉斯：无法在日历弹出窗口中找到元素

Cypress: cannot find elements in calendar popup

angularjs

cypress

owl-date-time