Bug: Cypress hangs when detecting element visibility with Shadow DOM enabled

Current behavior:

It is the same or similar as #7679 (fixed in #7692), except this is with experimentalShadowDomSupport: true and using Ionic (which heavily uses Shadow DOM).

Essentially when Cypress attempts to detect visibility of an Ionic component where there’s a modal backdrop visible, it seems to go into an endless loop of that same find element code path.

Note: Also, notice how it thinks the ion-button is invisible. I think this is a separate regression/issue because I’ve seen this in other tests for Ionic popovers/toasts where it thinks it’s not visible when they really are.

Desired behavior:

Interacting with Ionic components shouldn’t cause Cypress to hang.

I think that while loop may be due for a “max loop” check because it seems like we really don’t want Cypress to totally hang under any circumstances. For example, this bug is causing my CI to generate 7GB video files, unless I force-stop the build/workflow.

Test code to reproduce

https://github.com/kamranayub/junk-bug-cypress-ionic-hang

1. npm install
2. npm run cypress:open
3. Run the spec
4. Notice how Cypress hangs when the popover is shown

It tests against this URL: https://ionic-react-demo.stackblitz.io/app/account and clicks the top right button, then tries to detect visibility.

Versions

• Cypress 4.9.0
• Chrome 83
• Windows 10

Workaround

I think I can safely disable the experiment and rewrite my tests that were using .shadow(). 4.7.0 works with the experiment disabled. 4.8.0 had the other regression with clicking specifically.

[jennifer-shehane]

@kamranayub Thanks for providing a reproducible example!

I can recreate this from the code provided below (or repo above).

• 4.9.0: cy.get() hangs when experimentalShadowDomSupport is true
• 4.9.0: cy.get() does not hang when experimentalShadowDomSupport is false
• 4.8.0: cy.get() hangs when experimentalShadowDomSupport is false or true
• 4.7.0: cy.get() never hangs

cypress.json

{
  "experimentalShadowDomSupport": true
}

it('works', () => {
  cy.visit('https://ionic-react-demo.stackblitz.io/app/account');
  // wait for StackBlitz to boot up server
  cy.get('ion-button', { timeout: 60 * 1000 }).click()
  cy.get('ion-popover').should('be.visible')
})

[cypress-bot[bot]]

Released in 4.10.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to Cypress v4.10.0, please open a new issue.