CODEWITHSUNDEEP
javascriptdomautomationcypress
Barış Can Ateş
Barış Can Ateş

Reputation: 332

Cypress - element is detached from the DOM error

I tested our (nearly all of the components are created by DevExtreme) web application but I have a strange re-rendering problem.

I posted a picture of the error message. As you can see the "element exists" and "element is visible" assertions both pass. The next action command click, type, clear sometimes gives me this error.

I watched the network but there are no suspicious API requests.

How can I fix it?

enter image description here

  cy.get("div.c-title.pe-2.me-2.active")
    .parent()
    .find("[name='Property Unsafe']")
    .parent()
    .find(".dx-item-content")
    .contains("Yes")
    .scrollIntoView()
    .should("be.visible")
    .should("be.exist")
    .click();

enter image description here You can see which components are I working on it. (I get similar errors frequently from every components not just dropdown or text input)

Hello, the issue is still the same. Not working. As you can see the latest updates here: I used Cypress.dom.isAttached($el) I re-queried until the element was attached into dom with Cypress recurse library. Still the result same.


  recurse(
    () =>
      cy.get(
        "#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
      ),
    ($el) => Cypress.dom.isAttached($el),
    {
      debugLog: true,
      log: true,
      limit: 50, // max number of iterations
      timeout: 10000, // time limit in ms
      delay: 250, // delay before next iteration, ms
    }
  ).then(() => {
    cy.get(
      "#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
    ).then(($el) => {
      if (Cypress.dom.isAttached($el)) {
        cy.log("aattacchheeed");
        cy.wrap($el)
          .clear({ force: true })
          .type(variables.meterId, { force: true });
      } else {
        cy.log("NOOOOOOTTTTTTTTTT aattacchheeed");
      }
    });
  });

enter image description here

Upvotes: 0

Views: 456

Answers (1)

Florence.P
Florence.P

Reputation: 167

The Cypress log is saying you have a .click() two lines above the scrollIntoView(), but it is not in the posted test code.

You should split the long command after that first click, it is most likely causing the re-render.

Whatever you selected above click #1 should be selected again after it.

I can't tell what the context is, only a mention of DevExtreme. If you provide more information about the control (select, input, dropdown) it would be more useful.

Also the correct check for attachment is isAttached() not visible or exist.

.then(($el) => {
  expect(Cypress.dom.isAttached($el).to.eq(true)
})

Upvotes: 2

Related Questions