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

user_15077804 0
Viewed 38

does anyone how how to iterate though a structure and look for a specific href using cypress??

Example code:

<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>

Say I wanted to find href="/homepage/events" by iterating though that html structure, and click on it for it to take me to that link.

Is there a way of doing this? Because I've been trying to use find(), each(), should(), contain(), invoke(), but nothing seems to work for me

Any help is appreciated, thanks!

EDIT!

cy.contains('div', 'Live Events').next().click() worked for me so thank you very much for the replies

cypress href testing html
2 Answers

To go directly to it, specify the href as part of the selector

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

In the above selector, a[href="/homepage/events"] is used to specify the <a> element that has href="/homepage/events" as an attribute. It gets the single element you need because href="/homepage/events" is unique.

You could also use the title="Live Events" attribute because it is also unique to your target element.

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

One more option is to search by label

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

You can use each to iterate through the elements and then click on href="/homepage/events"

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