Any way to force CSS media queries to detect mobile

First of all THANK YOU for excellent tool. We (front end developers) have been waiting years for this tool.

There is just one small issue. Using cy.viewport('type-of-mobile-phone') makes testing iframe smaller, but CSS media queries and window.screen.width, height remains the same (since it resolves actual size of screen.

Is there any possible way how to fix this? I was doing some research, and only idea I have is to implement somehow Google Dev Tools protocol, that is able to force Chrome to fake anything.

https://chromedevtools.github.io/devtools-protocol/

[jennifer-shehane]

Related comment on devtools protocol: #311 (comment)

[brian-mann]

That part of the debugger protocol would only work for Chrome and is not cross browser compatible. If we exposed that, it would either have to be restricted to Chrome only.

Can you provide me an example of CSS media queries not working? Those should be bound to the window, not the screen.

I understand that the screen API's don't account for the iframe - but to work around this is fairly trivial, you create wrapper functions around those values and use cy.stub to force them to return what it is you want returned. Then your application reacts as if the screen had those dimensions.

Having some code in regards to what you're doing with screen would also be helpful.

Media query is

@media only screen and ( max-device-width: 736px ) {
...
}

and it is recommended detection of mobile phone. I think cypress works as expected, since media queries are bound to device, not screen.

[brian-mann]

Yeah I can't think of a way around this other than to hide the Cypress UI and then change the width and height of the actual browser window. It's actually possible to do - those API's are exposed to us - but probably not worth the effort.

No problem will find a way

Just now I have tested Facebook, Gmail and Twitter and all of them use media queries based on device-width not a browser window, and by this they decide if they will use mobile or desktop layout. Therefore I think, that forcing cy.viewport to fake device width would be nice addition. I know that this task is very, very, very complicated but trust me, that can be useful as hell. Even when limited to Chrome.

[brian-mann]

Agreed. This is possible to do and we will do this - even if its just for Chrome.

This belongs in the same category as "native events", which is something we can implement. @chrisbreiding is scheduled to start working on cross browser support in December and that's when we'll switch everything over.

We can do this by using the underlying debugger protocol as opposed to the extensions which is how we currently automate chrome. Once we do that, we'll be able to fire any kind of native event, but also expose and even lower level API that would enable you to take advantage of anything that the debugger protocol offers.

If you're curious these other issues talk more detail about the switchover:

• Support chrome --headless  #832
• Support for Native Browser Events #311 (comment)
• Proposal: Support for Cross Browser Testing #310

[ilblog]

Thanx a lot

[thebluick]

Any updates on this? I'm currently running into issues trying to properly spoof mobile devices and its breaking my tests.