如何检查元素是否为cypress.io中特定父级的子级

Question

我想对一个元素做一些检查，但也要检查它是否位于特定的父元素中。以下是原始代码的一部分：

  it("shows right panel elements", () => {
    cy.get(selectors.rightPanel).find(selectors.logo)
    cy.get(selectors.rightPanel)
      .find(selectors.menuBar)
      .find(selectors.wishlistIcon)
      .closest("a")
      .should("have.attr", "href", selectors.wishlistUrl)
      .should("be.visible")
    cy.get(selectors.rightPanel)
      .find(selectors.menuBar)
      .find(selectors.cartIcon)
      .closest("a")
      .should("have.attr", "href", selectors.cartUrl)
      .should("be.visible")
  })

我的同事告诉我要避免使用find链接，以防止剥落。

我试过在里面使用，但它看起来很难看，特别是当我需要往下走多层的时候。

cy.get(selectors.rightPanel).within($panel => {
  cy.get(selectors.logo)
  cy.get(selectors.menuBar)
  cy.get(selectors.logo)
  cy.get(selectors.wishlistIcon)
    .closest("a")
    .should("have.attr", "href", selectors.wishlistUrl)
    .and("be.visible")
}). 

什么是一个好的解决方案？

Answer 1

我似乎没有从您的代码中完全理解这个问题，但是dom API中的以下命令可能会解决这个问题。

Cypress.dom.isChild(possibleChild, possibleParent);

Answer 2

假设嵌套是这样的

<rightPanel>
  <menuBar>
    <wishlistIcon>

您可以使用它来专门测试子-父关系

cy.get(selectors.wishlistIcon)
  .parents(selectors.menuBar)   // does wishlistIcon have a parent with menuBar selector?

但我看不出有什么不妥

cy.get(selectors.rightPanel)
  .find(selectors.menuBar)       // find within rightPanel
  .find(selectors.wishlistIcon)  // find within menuBar

这是更好的方向，因为你想让href成为故事的一部分。

我不明白为什么find会被认为是flakey。它有一个timeout选项，这意味着它有Cypress重试机制(主要防御剥落)。