title: Access element whose parent is hidden - cypress.io
body: <p>The question is as given in the title, ie, to access element whose parent is hidden. The problem is that, as per the <a href="https://docs.cypress.io/guides/overview/why-cypress.html" rel="noreferrer">cypress.io docs</a>  :</p>
  
  <blockquote>
    <p>An element is considered <strong>hidden</strong> if:</p>
    
    <ul>
    <li>Its width or height is 0.</li>
    <li>Its CSS property (or ancestors) is visibility: hidden.</li>
    <li><strong><em>Its CSS property (or ancestors) is display: none.</em></strong></li>
    <li>Its CSS property is position: fixed and it’s offscreen or covered up.</li>
    </ul>
  </blockquote>
  
  <p>But the code that I am working with requires me to click on an element whose <strong><em>parent is hidden, while the element itself is visible</em></strong>.</p>
  
  <p>So each time I try to click on the element, it throws up an error reading :</p>
  
  <blockquote>
    <p>CypressError: Timed out retrying: expected
    '&lt; mdc-select-item#mdc-select-item-4.mdc-list-item>' to be 'visible'</p>
    
    <p>This element '&lt; mdc-select-item#mdc-select-item-4.mdc-list-item>' is
    not visible because its parent
    '&lt; mdc-select-menu.mdc-simple-menu.mdc-select__menu>' has CSS property:
    'display: none'</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/dMXNl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dMXNl.png" alt="enter image description here"></a></p>
  
  <p>The element I am working with is a <code>dropdown item</code>, which is written in <code>pug</code>. The element is a component defined in <a href="https://github.com/trimox/angular-mdc-web" rel="noreferrer">angular-mdc-web</a>, which uses the <code>mdc-select</code> for the dropdown menu and <code>mdc-select-item</code> for its elements (items) which is what I have to access.</p>
  
  <p>A sample code of similar structure :</p>
  
  <pre><code>//pug
  mdc-select(placeholder="installation type"
              '[closeOnScroll]'="true")
      mdc-select-item(value="false") ITEM1
      mdc-select-item(value="true") ITEM2
  </code></pre>
  
  <p>In the above, <code>ITEM1</code> is the element I have to access. This I do in <code>cypress.io</code> as follows :</p>
  
  <pre><code>//cypress.io
  // click on the dropdown menu to show the dropdown (items)
  cy.get("mdc-select").contains("installation type").click();
  // try to access ITEM1
  cy.get('mdc-select-item').contains("ITEM1").should('be.visible').click();
  </code></pre>
  
  <p>Have tried with <code>{force:true}</code> to force the item click, but no luck. Have tried to select the items using <code>{enter}</code> keypress on the parent <code>mdc-select</code>, but again no luck as it throws : </p>
  
  <blockquote>
    <p>CypressError: cy.type() can only be called on textarea or :text. Your
    subject is a: &lt; mdc-select-label
    class="mdc-select__selected-text">Select ...&lt; /mdc-select-label></p>
  </blockquote>
  
  <p>Also tried using the <a href="https://docs.cypress.io/api/commands/select.html#Usage" rel="noreferrer"><code>select</code> command</a>, but its not possible because the Cypress engine is not able to identify the element as a <code>select</code> element (because its not, inner workings are different). It throws :</p>
  
  <blockquote>
    <p>CypressError: cy.select() can only be called on a . Your
    subject is a: &lt; mdc-select-label
    class="mdc-select__selected-text">Select ...&lt; /mdc-select-label></p>
  </blockquote>
  
  <p>The <strong>problem</strong> is that the <code>mdc-select-menu</code> that is the parent for the <code>mdc-select-item</code> has a property of <code>display:none</code> by some internal computations upon opening of the drop-down items.</p>
  
  <p><a href="https://i.stack.imgur.com/KDdNI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KDdNI.png" alt="enter image description here"></a></p>
  
  <p>This property is overwritten to <code>display:flex</code>, but this does not help.</p>
  
  <p><a href="https://i.stack.imgur.com/oTvsq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oTvsq.png" alt="enter image description here"></a></p>
  
  <p>All out of ideas. This works in <code>Selenium</code>, but does not with <code>cypress.io</code>. Any clue what might be a possible hack for the situation other than shifting to other frameworks, or changing the UI code?</p>