DOM Snapshots are blank in ionic app

[pszalanski]

Current behavior:

Our ionic app is tested using cypress and everything works fine so far. But if we hover over a test step in the history, the app preview is blank. Normally, it displays a snapshot of the DOM at that time.

Desired behavior:

The app view should show the rendered DOM at the hovered or pinned point in time.

Screencap of issue:

Versions

Windows 10
Cypress 3.6.1
Ionic 4.11.5
capacitor 1.3.0
Angular 8.1.2

[devinshoemaker]

I have noticed the same behavior with both Ionic Angular and Ionic React.

[jennifer-shehane]

I believe this is due to Ionic using Shadow DOM, which is not fully supported in Cypress. Duplicate of #144

[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.