如何在赛普拉斯中链接 cy.get

Question

我正在尝试到达#1 元素然后到达#2 元素以单击#3 元素。

但我无法在 Cypress 中获得正确的 CSS 选择器。

如何为此编写测试脚本？

我试过了 cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').contains('Delete yield').click() 但不起作用。

有没有办法先得到#1，然后#2 达到#3？这不是真正的代码，而是类似这样的代码。

cy.get('.yield-event__date-and-text--container').contains('10kg')
cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').click()
cy.get('.item.fr-dropdown__option').contains('Delete yield').click()

非常感谢

Answer 1

Cypress 文档展示了 3 种方式 Children or Find or Within。

我个人使用 .within，当我想在元素的范围内工作时和 .find - 当我希望能够在范围内和外部工作时。

Answer 2

您可以使用 find():

编写类似的内容

cy.get('.yield-event__date-and-text--container').contains('10kg')
cy.get('.yield-event__date-and-text--container').find('i[class*="fr-dropdown__icon"]').click({force: true})
cy.get('.yield-event__date-and-text--container').find('Delete yield').click({force: true})

Answer 3

正如@RosenMihaylov 所说，您可能会发现使用遵循 HTML 结构的赛普拉斯“关系”命令比 CSS 选择器更容易。

此外，我认为您需要点击两次 - 一次打开菜单，第二次调用删除操作。

第 1 步 - 看起来文字 devEnv_admin 标识了您想要的卡片

cy.contains('div', 'devEnv_admin')

这给了你第 7 个 div。

第 2 步 - 您需要单击的下拉菜单是上面的第二个兄弟

.siblings('div.note-event__dropdown')  // list of siblings matching the selector
.eq(0)                                 // take the first (and only)

它为您提供了下拉按钮的父项。

第 3 步 - 但看起来具有 class button 的子元素可能具有点击事件处理程序（您可能必须在此处进行试验，因为具有事件处理程序的元素有时很难找到)

.children('div.button')   // list of children matching the selector
.eq(0)                    // take the first (and only)
.click();

应该会打开菜单，但可能需要几毫秒才能显示

第 4 步 - 等待 div 收到您需要的文字

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

综上所述，

cy.contains('div', 'devEnv_admin')
  .siblings('div.note-event__dropdown')  // list of siblings matching the selector
  .eq(0)                                 // take the first (and only)
  .children('div.button')                // list of children matching the selector
  .eq(0)                                 // take the first (and only)
  .click();

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

还有其他路径可以通过 DOM 元素和您可以使用的其他选择器，例如 .next() 和 .parent()。

很大程度上取决于事件处理程序的附加位置，通过查看源代码最容易找到。

或者，使用 within()

cy.contains('.yield-event__date-and-text--container', 'devEnv_admin')  // pick the card
  .within(() => {  // restricts commands below to this card
    cy.get('div.button.dropdown').click();
    cy.contains('span', 'Delete yield').click();
  });

如何在赛普拉斯中链接 cy.get

How to chain cy.get in cypress

javascript

java

css-selectors

ui-automation

cypress