Cypress技术问询：如何基于指定id选择父元素兄弟节点的目标子元素

以下是几种基于你提供的DOM结构，在Cypress中定位href="/chlamydia-treatment"的<a>标签的可行方案：

方案一：链式命令逐步定位 #

通过分步定位元素关系，逻辑清晰易维护：

cy.get('#dropdown-sexual-health')  // 定位到id为dropdown-sexual-health的div元素
  .parent('a')                     // 获取该div的父级<a>标签
  .next('ul')                      // 找到父级<a>的相邻兄弟<ul>子菜单
  .find('a[href="/chlamydia-treatment"]')  // 在子菜单中定位目标<a>标签

方案二：CSS复合选择器单步定位 #

利用CSS的:has()选择器直接关联元素层级，写法更简洁：

cy.get('a:has(#dropdown-sexual-health) + ul li a[href="/chlamydia-treatment"]')

• 说明：a:has(#dropdown-sexual-health) 匹配包含目标div的父级；+ ul 选中该的紧邻兄弟
  ；最终定位到
  内的目标标签。

  方案三：XPath选择器定位 #

  如果更习惯XPath语法，可使用以下方式：

  cy.xpath('//div[@id="dropdown-sexual-health"]/parent::a/following-sibling::ul/li/a[@href="/chlamydia-treatment"]')
  

  内容的提问来源于stack exchange，提问作者Mr.Prasad J