CODEWITHSUNDEEP
javascripthtmlcypress
Snowy
Snowy

Reputation: 59

Cypress click button fail (detached from DOM), but dom.isDetached is false

My test code is like this:

cy.contains('.InovuaReactDataGrid__cell','CypressWarehouse').siblings().find('button').click(); //fail, detached from the DOM
cy.contains('.InovuaReactDataGrid__cell','CypressWarehouse').siblings().find('button').then(($el)=>{
    assert.isFalse(Cypress.dom.isDetached($el), 'not detached'); //pass
    $el.click(); //not work
});

I don't understand why click() fails because "this element is detached from the DOM", but if I use Cypress.dom.isDetached it returns false.

Also, $el.click() not work, it throw an exception of "ResizeObserver loop limit exceeded" The button I intend to click is an ant dropdown trigger. If I manually click it a dropdown menu will be seen. But neither code above can show me the dropdown menu.

cypress

Upvotes: 0

Views: 556

Answers (2)

Eddy Gilmour
Eddy Gilmour

Reputation: 3140

You may have two click() handlers, one for the row and one for the action button.

Try selecting the row first

cy.contains('.InovuaReactDataGrid__cell', 'CypressWarehouse')
  .parent()
  .click()

// requery in case DOM changed on first click 
cy.contains('.InovuaReactDataGrid__cell', 'CypressWarehouse')
  .parent()
  .find('button')
  .click()

Upvotes: 1

ItsNotAndy
ItsNotAndy

Reputation: 573

Usually with dropdown menus I use realClick() otherwise try $el.click({force: true})

Upvotes: 1

Related Questions