Cypress: Ionic app isn't fully supported

[Yohandah]

Current behavior:

When looking at dom snapshots on a ionic app the app isn't in full screen and in a weird state.
It also cause weird behavior like Cypress is clicking on a menu item after it scrolled but it doesn't navigate.

Desired behavior:

When tests are over and my app is displayed in Cypress, it's in a "normal" state with full of the screen taken, clicking on menu is working, etc.

Test code to reproduce

Clone this repo (it's just a Ionic starter app with cypress added) : https://github.com/Yohandah/cypress_ionic_bug

Install dependencies : yarn
Run the Ionic app : ionic serve
Open cypress : yarn cypress open

Open bug.spec.js in Cypress, then navigate to the snapshots, you'll see the app in a weird state with half of the screen taken.

The written test doesn't pass, the click on the menu didn't work.

Versions

Cypress 3.8.3
Windows 10
Chrome 79
Ionic 4

[jennifer-shehane]

I believe this is due to Ionic using Shadow DOM, which is not fully supported in Cypress. Which would be a duplicate of https://github.com/cypress-io/cypress/issues/144

But I can't get the repo to run. I get this error running yarn:

error An unexpected error occurred: "https://si-devops-zhb-nexus.edf.fr/repository/npmjs/@angular/forms/-/forms-8.1.3.tgz: getaddrinfo ENOTFOUND si-devops-zhb-nexus.edf.fr si-devops-zhb-nexus.edf.fr:443".

[Yohandah]

@jennifer-shehane oops yes ! Delete the yarn.lock and relaunch yarn install! I’ll update the repo asap

[Yohandah]

@jennifer-shehane I've updated the repo please let me know if you can reproduce. I tried to use a cypress plugin that supports Shadow Dom but couldn't get it to work either.

The click fails, but only if the menu is scrollable, if you try removing some of the items the click works, but in the snapshots the app still looks weird.

If you do not support Ionic maybe you should put it out of your FAQ (https://docs.cypress.io/faq/questions/general-questions-faq.html)

[oneumyvakin]

@Yohandah May this package help you https://www.npmjs.com/package/cypress-shadow-dom ?

[Yohandah]

@oneumyvakin No it doesn't I've already looked into that, but maybe I did not take enough time to understand it all.

In the end I've decided to use Selenide to e2e my Ionic project as Cypress doesn't feel really reliable for a Ionic project, and I can't use the snapshot functionality as the dom is not okay and not rendered properly :/.

[mvandebunt]

I'm able to test my ionic app using https://www.npmjs.com/package/cypress-shadow-dom

But I still have this issue: #5776 DOM Snapshots are blank
Snapshot of last test is displaying, but snapshots of other tests are blank

[jennifer-shehane]

We've added experimental shadow DOM support through the experimentalShadowDomSupport configuration option.

To use it, update to Cypress 4.8.0 and pass the following to your configuration file or however you pass in configuration.

{
  "experimentalShadowDomSupport": true
}

See the Experiments for more information including how to use the new .shadow() command and includeShadowDom option.

This is still experimental, so we'd like your help working through any bugs or unexpected behavior before releasing into the main product. If you encounter any issues using the new experimental shadow DOM feature, please open a new issue, filling in the issue template and providing a reproducible example.