Cypress hangs when calling .click() on a web component

[elylucas]

Current behavior:

This appears to be a regression in 4.8. In 4.7 this functions as expected.

When targeting an Ionic web component like so:

cy.contains('ion-button', 'My Button').click()

The call to the click freezes the Cypress test runner. This appears to happen in Chrome 83, but seems to run fine in Firefox 75.

Desired behavior:

The click event should be fired on the targeted web component.

Test code to reproduce

Repo here: https://github.com/elylucas/ionic-react-cypress-4.8-hang

1. npm i
2. npm run start (to start the Ionic React app)
3. npx cypress open
4. Run mytest.spec.js against chrome
5. The first test freezes the runner
6. Skip the first test and see that the second test targeting a plain button runs fine
7. Downgrade to Cypress@4.7.0 and see that both tests run fine

Downgrading to 4.7 seems to run fine, even when targeting Chrome 83.

Versions

MacOS Catalina
Cypress 4.8
Chrome 85
Firefox 75

[jennifer-shehane]

@elylucas Thanks for providing a reproducible example!

Ionic uses Shadow DOM, and we did make some changes in 4.8.0 concerning Shadow DOM, albeit - all effects should have been isolated to setting the experimentalShadowDomSupport flag to true. #7469

But, my suspicions seem to be true in that some of the changes leaked out and is effecting your app even though you have not turned on the experimental feature.

Test passes on commit before Shadow DOM: 7597bf9

Test hangs on Shadow DOM commit: a7ff8fd

The test just hangs forever.

[JessicaSachs]

@chrisbreiding Can you take a look into this?

[cypress-bot]

The code for this is done in cypress-io/cypress#7692, but has yet to be released.
We'll update this issue and reference the changelog when it's released.