CSS media queries and cypress on CI

[DancingCode]

We have a piece of code that utilises CSS media queries to simulate hover/swipe actions based on user's device type which is touch (swipe action) and non-touch devices(hover action). I have tests in Cypress that tests the hover action on desktop which run fine locally. However when this test runs on CI, it fails. The reason being on CI, chrome loads with expected desktop viewport configuration however there is another setting in Chrome dev tool bar called 'Device type' that is set to Mobile by default even if you set the viewport to be 1980pixels. This ends up simulating a touch device and so hover can't be actioned.

Solutions already tried but did not work: cy.viewport, cypress cdp commands like Emulation.canEmulate, Emulation.setEmulatedMedia, Emulation.setTouchEmulationEnabled(tried setting this to false), Emulation.setEmitTouchEventsForMouse, etc.

Hope someone has a solution for it! Thanks.

[fmeyertoens]

We have this issue as well and it seems that it has come up before in #7096