如何在 cypress 中链接 cy.get答案

【问题标题】：How to chain cy.get in cypress如何在 cypress 中链接 cy.get
【发布时间】：2020-11-10 05:41:38
【问题描述】：

我正在尝试到达#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()

提前非常感谢

【问题讨论】：

标签： javascript java css-selectors cypress ui-automation

【解决方案1】：

正如@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 步 - 但看起来具有 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();
  });

【讨论】：

感谢您详细说明如何实施我的建议。
感谢详细的解释，对我帮助很大:)
@Ackroydd 非常感谢，使用 inside() 就像一个魅力！

【解决方案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})

【讨论】：

【解决方案3】：

赛普拉斯文档显示 3 种方式 Children 或 Find 或 Within。

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

【讨论】：