遍历 html 结构并在 a 中找到特定的 href

Question

有人知道如何使用 cypress 遍历结构并查找特定的 href 吗？

示例代码：

<div class="navigation_outer">
   <div class="navigation">
      <div class="navitem ">
         <div class="glyph">
            <i class="fa fa-hashtag"></i>
         </div>
         <div class="label">Homepage</div>
            <a href="/homepage/" title="Homepage"></a>
         </div>
      <div class="navitem ">
         <div class="glyph">
            <i class="fa fa-hashtag"></i>
         </div>
         <div class="label">Live Events</div>
            <a href="/homepage/events" title="Live Events"></a>
         </div>
      <div class="navitem ">
         <div class="glyph">
            <i class="fa fa-hashtag"></i>
         </div>
         <div class="label">Filler</div>
         <a href="/homepage/filler" title="Filler"></a>
      </div>
   </div>
</div>

假设我想通过遍历 html 结构来找到 href="/homepage/events"，然后单击它以将我带到 link。

有办法吗？因为我一直在尝试使用 find()、each()、should()、contain()、invoke()，但似乎对我没有用

感谢任何帮助，谢谢！

编辑！

cy.contains('div', 'Live Events').next().click() 为我工作所以非常感谢你的回复

Answer 1

您可以使用 each 遍历元素，然后单击 href="/homepage/events"

cy.get('a').each(($ele) => {
  if ($ele.attr('href') == '/homepage/events') {
    cy.wrap($ele).click()
  }
})

Answer 2

要直接转到它，请将 href 指定为选择器的一部分

cy.get('.navitem a[href="/homepage/events"]').click()

在上面的选择器中，a[href="/homepage/events"] 用于指定具有 href="/homepage/events" 作为属性的 <a> 元素。它获取您需要的单个元素，因为 href="/homepage/events" 是唯一的。

您也可以使用 title="Live Events" 属性，因为它对于您的目标元素也是唯一的。

cy.get('.navitem a[title="Live Events"]').click()

另一种选择是按标签搜索

cy.contains('div', 'Live Events')
  .next()                          // next element is <a>
  .click()

遍历 html 结构并在 a 中找到特定的 href

Iterate through an html structure and find a specific href in an a

html

testing

href

cypress