Cypress：如何根据父母的孩子选择父母兄弟姐妹的孩子？

Question

我正在寻找一个标签选择器，即 href="/chlamydia-treatment" 基于 id="dropdown- Sex-health"。

所以基本上是试图为我父母的兄弟姐妹的孩子找到一个选择器。

<li xpath="1">
   <a class="" href="#" aria-expanded="false" aria-haspopup="true" role="button">
      <div class="dropdown-item-menu" id="dropdown-sexual-health">Sexual health
          <span class="boots-icon-ic-boots-chevron-thin-up"></span>
      </div>
   </a>
   <ul class="header-navbar__submenu header-navbar__show-menu-item">
       <li><a class="" href="/chlamydia-treatment">Chlamydia treatment</a></li>
   </ul>
</li>

Answer 1

cy.parent()

可用于查找所选元素的父元素。

cy.get('#dropdown-sexual-health') // yields dropdown element
  .parent('a') // yield the anchor parent element 

cy.siblings()

可用于查询兄弟元素。

cy.get('#dropdown-sexual-health')
  .parent('a')
  .siblings('ul') // yield the unordered list element(s) that are siblings of the above anchor parent

cy.find()

可用于查询子元素的元素。 （

cy.children()

也可以用，但我更喜欢

cy.find()

）

cy.get('#dropdown-sexual-health')
  .parent('a')
  .siblings('ul')
  .find('[href="/chlamydia-treatment"]'); // yields the child anchor element

Answer 2

您可以使用xPath

这就是 xpath 的工作原理：

要从节点到兄弟节点，您应该使用：“followwing-sibling”或“preceeding-sibling” 要从节点转到父节点，您应该使用：parent 要从节点转到子节点，您应该使用：child

所以你的 xPath 看起来像这样：

//your-first-node/parent::your-parent-localiser/preceeding-sibling::your-sibling-localiser/children::your-children-localiser

所以最终的结果可能是这样的

//*[id="dropdown-sexual-health"]/parent::*/following-sibling::*/children::*  

Answer 3

测试代码可能就像您在标题中描述的那样，但我希望您需要等待子菜单的可见性。

cy.get('#dropdown-sexual-health')
  .parent()
  .next()
  .as('subMenu')
  .click()

cy.get('@subMenu')
  .find('[href="/chlamydia-treatment"]')
  .should('be.visible')
  .click()