How to test for different platforms on Ionic/Angular using Cypress?

Throughout my app I’m using Platform from @ionic/angular to determine whether they’re a mobile device, tablet, etc and displaying certain UI specifically for those devices, in combination with viewport but not viewport alone to determine what/how to show UI. Now with Cypress it’s easy to change viewport width to test for varying screen sizes, but I haven’t figured out how to mock the Platform from @ionic/angular to tell it to change devices. On Cypress all the tests are run in a web browser, so by default it will tell the Platform API that it’s a desktop web browser.

Anyone else have experience testing Ionic using Cypress? How can I mock the Platform API from @ionic/angular to have Cypress run as a mobile or tablet platform?

Thanks

When you are running cypress tests, there is a global Cypress variable on window. You can check that in your app.module.ts and force the mode you want there.

You can also set global variables with Cypress. So the platform changes.

I figured out how to override Platform in app.module.ts under the imports, but I’m not sure how I can connect this to somehow pull in Cypress variable.

This is leading me to think of this solution: since I’m listening to the Platform API once upon initialization and always referring to a saved variable that tells me the platform, I could on initialization, check if there’s a global window variable set by Cypress and override the platform it detects. I think this could work, but not sure if you meant a different way that may be easier.

In the app Module you can do something like this:


 const ionConfig = Cypress.yourMode ? {mode: Cypress.yourMode} : {}
//...
//..
  IonicModule.forRoot(ionConfig),