如何在cypress中链接cy.get

Question

我试图到达 #1 element 然后到达 #2 element 点击 #3 element 。

但是我在 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 文档显示了Children或Find或Within 的3 种方式。

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

Answer 2

正如@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();
  });

Answer 3

您可以使用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})