title: How does Cypress assert an element is visible when parent element has CSS property: display: none
body: <p>How do I write a cypress visible assertion for an element whose parent has css property hidden?
  I have the following HTMl code</p>
  <pre><code>&lt;td class=&quot;item-total item-total-mobile-hidden&quot;&gt;
  &lt;p class=&quot;mobile-show block-price-text&quot;&gt;Total Price:&lt;/p&gt;
  &lt;span class=&quot;price-total&quot;&gt;
  $699.99
  &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  <p>When I write the following cypress code to assert that the price element is visible</p>
  <pre><code>Cy.get('.price-total').should('be.visible')
  </code></pre>
  <p>I get this error message
  Timed out retrying: expected '&lt;span.price-total&gt;' to be 'visible'</p>
  <p>This element &lt;span.price-total&gt; is not visible because its parent &lt;div.item-total-price-mobile-show&gt; has CSS property: display: none</p>
  <p>I have to tried to debug this on the console (putting the span in a variable $0)</p>
  <blockquote>
  <p>$0<br />
  &lt;span class=​&quot;price-total&quot;&gt;​
  $699.99
  ​&gt; ​
  Cypress.dom.isVisible($0)
  true</p>
  </blockquote>
  <p>Here is shows the span element is isVisible true, but I am unable to assert it.
  I tried the following by invoking the text on the child element, but it didn't work either</p>
  <pre><code>cy.get('.price-total').invoke('text')
        .then((text)=&gt;{
          const divTxt = text;
  expect(divTxt).to.be.visible; })
  </code></pre>
  <p>This did not work, I get the following error because cypress couln't find the hidden element
  Timed out retrying: Expected to find element: .price-total, but never found it.</p>
  <p>What's the best way to assert that the element &lt;span class=​&quot;price-total&quot;&gt;​ is visible?</p>