Cypress - Access Dropdown Options - Detached from DOM

Question

Have already reviewed this post (and a few others but this is the most similar), read through Cypress docs about this error message here. I know it's some kind of race error, but can't for the life of me get it right!

I have a drawer containing a dropdown menu. I want to click the first dropdown menu, and select the first option.

Here's a simplified version of my test: Update: Changed to target content of my elements instead of using antd selectors.

it('Adds new involved party to a case', () => {
    // click button to open drawer that contains dropdown
    cy.contains('Beteiligter')
      .should('exist')
      .click();

    cy.contains('Rolle des Beteiligten')
      .should('exist')
      .parent()
      .children()
      .eq(1)
      .should('exist')
      .click();

  // click submit button to create involvedParty
  cy.contains('Erstellen').click();

  // check that new party has been added to UI
  cy.get('.ant-collapse-header')
    .contains('Cypress Test Company')
    .should('have.length', 1);
  )
}

Timed out retrying: cy.click() failed because this element is detached from the DOM.

...

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.should()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

HTML for form including dropdown(s):

Rolle des Beteiligten 
  
    
      
        
          
            
              Arbeitgeber
            

          
        
      
    
  
Art des Beteiligten

user14903560 · Accepted Answer

The ant-design components are quite complicated to test because of the way semantic source elements are compiled into more complicated html structures to handle things like visibility and transitions.

May be best to avoid using the ant classes as selectors since they are re-used on lots of components. Also a good chance they will change with new release of the library. Instead focus on the content specific to your page elements.

Debugging

This dropdown is hard to debug in dev-tools, because as soon as you inspect an element the dropdown looses focus and disappears, then the inspected DOM changes too. To get around that, I turned off the style that hides the list, in dev-tools

.ant-select-dropdown-hidden {     // select the element with this in dev-tools
  /* display: none; */            // then uncheck this style
}                                 // the list will now stay open for inspection

Your test

it('Adds new involved party to a case', () => {

  // click button to open drawer that contains dropdown
  cy.contains('span', 'Rolle des Beteiligten')  // this is a plain span, used as a label
    .next()               // the next sibling has the Select
    .find('.ant-select')  // move to the select
    .click()              // open it

  cy.get('div[title="Mandant"]') // with the menu open, find the item 
    .click({force: true})        // the menu listbox has display:none
                                 // so use force to make the click work
                                 // (try without force, observe the error)

}

You could add a test id to the source code,

Cypress - Access Dropdown Options - Detached from DOM

Answers (2)

Related Questions