the famous 'failed-because-this-element-is-detached-from-DOM' issue

[gkatsanos]

I've got an unknown number of buttons I want to click. I can target them with get() easily, yet at the first the page re-renders and Cypress can't find the subsequent elements. What's my solution (aside from changing how the page is implemented?)

<div data-v-5c4d7450="" data-v-d7151c42="" class="vis-col ab-test-switch__component vis-col--md-8" data-v-281c7d9c=""><h1 data-v-d7151c42="" data-v-5c4d7450="" class="not-found__title">
          A/B test switch
        </h1> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment"><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment__title"><h2 data-v-d7151c42="" data-v-5c4d7450="">49_aaTest</h2> <div data-v-d7151c42="" class="v-popover" data-v-5c4d7450=""><div class="trigger" style="display: inline-block;"><p data-v-d7151c42="">(detail)</p> </div> </div></div> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__buttons"><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="49_a" data-v-5c4d7450="">
              49_a
            </button><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="49_b" data-v-5c4d7450="">
              49_b
            </button></div></div><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment"><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment__title"><h2 data-v-d7151c42="" data-v-5c4d7450="">52_business_section</h2> <div data-v-d7151c42="" class="v-popover" data-v-5c4d7450=""><div class="trigger" style="display: inline-block;"><p data-v-d7151c42="">(detail)</p> </div> </div></div> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__buttons"><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="old_business_section" data-v-5c4d7450="">
              old_business_section
            </button><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="new_business_section" data-v-5c4d7450="">
              new_business_section
            </button></div></div><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment"><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment__title"><h2 data-v-d7151c42="" data-v-5c4d7450="">53_mobile_banner</h2> <div data-v-d7151c42="" class="v-popover" data-v-5c4d7450=""><div class="trigger" style="display: inline-block;"><p data-v-d7151c42="">(detail)</p> </div> </div></div> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__buttons"><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--secondary button--lg" data-variant="none" data-v-5c4d7450="">
              none
            </button><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--primary button--lg" data-variant="mobile_banner" data-v-5c4d7450="">
              mobile_banner
            </button></div></div> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment"><div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__experiment__title"><h2 data-v-d7151c42="" data-v-5c4d7450="">Traffic split group</h2> <div data-v-d7151c42="" class="v-popover" data-v-5c4d7450=""><div class="trigger" style="display: inline-block;"><p data-v-d7151c42="">(detail)</p> </div> </div></div> <div data-v-d7151c42="" data-v-5c4d7450="" class="ab-test-switch__buttons"><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--primary button--lg" data-v-5c4d7450="">
              explore_a
            </button><button data-v-7fea8896="" data-v-d7151c42="" type="button" class="button ab-test-switch__button button--secondary button--lg" data-v-5c4d7450="">
              explore_b
            </button></div></div></div>

The script (in support/index.js)

  cy.get('.ab-test-switch__buttons > :nth-child(1)').each(($el) => {
    cy.wrap($el).click()
  })
// cy.click() failed because this element is detached from the DOM.
// Cypress requires elements be attached in the DOM to interact with them.

2nd attempt:

before(() => {
  cy.visit('/company_profile_frontend/ab-test-switch')
  cy.get('.ab-test-switch__buttons > :nth-child(1)').click({ multiple: true, force: true })
})

[lucas-foliveira]

I know it isn't the best approach, but have you tried to put an explicit wait between interactions to see if the application works fine? I had the same issue when dealing with radio buttons and after passing explicit waits, I got it working fine. Maybe it is a good thing to help you debugging

[gkatsanos]

before(() => {
  cy.visit('/company_profile_frontend/ab-test-switch')
  // cy.get('.ab-test-switch__buttons > :nth-child(1)').click({ multiple: true, force: true })
  cy.get('.ab-test-switch__buttons > :nth-child(1)').each(($el) => {
    cy.wrap($el).click()
    // eslint-disable-next-line cypress/no-unnecessary-waiting
    cy.wait(1000)
  })
})

I did try it but unfortunately same error.

I think my issue is https://www.cypress.io/blog/2020/07/22/do-not-get-too-detached/ but I cant see how to fix it as I dont do XHR calls client side

[lucas-foliveira]

Could you try waiting before clicking? Maybe the app needs to load before handling elements