Emulating Mobile Devices (like Chrome Device Toolbar)

[ShiftedDesign]

So I've been trying to get Cypress to emulate mobile, specifically trying to get the media query: @media (hover: none) to work.
We have been using this to detect the difference between a desktop or tablet/mobile device, but I haven't been able to get Cypress to emulate correctly.

I've tried setting the userAgent in the config as well as visitMobile from: https://gitlab.com/nTopus/cy-mobile-commands#readme

Neither of these produce the results I was looking for, I can obviously just trigger the device emulator from chrome's inspector by hand but it would be nice to have desktop and mobile tests running one after another without user intervention.

Does anyone have any info or possible work out?

[dillibabuj]

Hey @ShiftedDesign did you try with viewport ? https://docs.cypress.io/api/commands/viewport.html#Examples
It's the recommended way to emulate mobile testing with cypress. Let me know if that answers your question!

[ShiftedDesign]

Hey dillibabuj, yeah I've been using viewport to control the actual dimensions but it doesn't actually emulate the device.

[dillibabuj]

weird. it even have the presets like i-phone. is there a sample repo that one can take a look ? @ShiftedDesign

[ShiftedDesign]

Unfortunately I dont have anything setup that's public but if you set up a simple object attach the class mobileOnly and the style:
.mobileOnly{ background-color:red; } @media (hover: none){ .mobileOnly{ background-color:blue; } }

You should see that it the object with it will always be red unless you turn on Google Chrome's Device Emulator.

[dillibabuj]

Hey @ShiftedDesign this is interesting., I think with view port we are only simulating the width & height. So I presume @media (hover: none) will never trigger with what are trying.

As far as I see currently we can only launch devtools by default and it's not possible to launch it with device emulation.. I am not sure if there is any work around for it now. @bahmutov / @jennifer-shehane can confirm if this is answers your questions or if there is anything more to it.

[ShiftedDesign]

So, an interested work around would be able to call the devtools during a specific test. Because once you set the dev tools to have emulation on, every time you open dev tools the emulation would be active. So being able to trigger the dev tools on and off during a test would allow you you to in theory emulate a device.