title: cypress, looping though visible elements, but getting asserts for hidden as well
body: <p>I have a very strange situation when trying to test a filter selection on the page. I have a list of items and hiding some of them based on the selected filter. The hidden element has a forced style as "display: none", which should be treated to cypress as a non-visible element.</p>
  
  <p>But I'm getting this hidden item checked and as a result my test failing. </p>
  
  <p>I hope some of you came across similar issues and can help to understand what am I doing wrong.
  (I have a suspicion it has something to do with when the element became hidden and cypress not picking up it properly). I'm very new cypress UI testing and UI testing overall.</p>
  
  <p>This is a sample code:</p>
  
  <pre><code>cy.get(".row.uicomponent__devices-block .devices-item-wrapp:not(:hidden)")
      .should("have.length", 14)
      .each(function ($el, index, $list) {
          if ($el.is(":not(:hidden)")) {
              cy.get($el).should('have.attr', 'data-filter-brand', 'apple')
          }
      })
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7yDsq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yDsq.png" alt="enter image description here"></a></p>