cypress:在日历弹出窗口中找不到元素

jhdbpxl9 于 2021-09-29 发布在 Java

关注(0)|答案(3)|浏览(813)

我无法在cypress测试中与日期选择器（弹出窗口）交互。
我在每个div类上都尝试了.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()

我试着增加一些等待时间，但也没用。

angularjs cypress owl-date-time

来源：https://stackoverflow.com/questions/68407439/cypress-cannot-find-elements-in-calendar-popup

3条答案

按热度按时间

r8uurelv1#

@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 这是不可能的。
您可以使用这种方法来帮助cypress如何临时从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()
})

注意我用过 .owl-dt-control-period-button 这对于当前版本的angular date-time picker是正确的，但是您可能有一个需要 .owl-calendar-year .

赞(0）回复(0）举报 2021-09-29

brjng4g32#

这个序列

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

希望在dateofbirth控件中找到日期弹出窗口。
你可能只需要

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

大体上你看 cy.get() 对于每个项目，不要像您所做的那样链接所有的get。这仍然有效，因为 .get() 总是从开始搜索 cy.root() ，设置为 #signup-step-pers-details 由 .within() .
但是 .find() 不同的是，它从上一个主题开始搜索，这是dob控件。
我要补充的是，如果您希望弹出的日期实际上在dob输入中，那么 cdk-overlay-container 在弹出窗口可见时添加，位于 <body></body> 标记（在devtools中查看）。

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

赞(0）回复(0）举报 2021-09-29

093gszye3#

你的使用方法 contains 很好，但是您可以使用另一种语法来选择日期：

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

赞(0）回复(0）举报 2021-09-29

我来回答

cypress:在日历弹出窗口中找不到元素

3条答案

相关问题

热门标签

最新问答