0

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

我在每个 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()

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

在此处输入图像描述

4

3 回答 3

0

这个序列

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

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

您可能只需要

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

通常，您会看到cy.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>
于 2021-07-16T10:42:02.020 回答
0

您的使用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()
于 2021-07-16T17:09:11.357 回答
0

@KKhan 是正确的，Angular Date Time Picker 在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.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 日期时间选择器是正确的，但也许您有一个旧版本需要.owl-calendar-year.

于 2021-07-22T23:43:02.577 回答