Cypress viewport doesn't accurately reflect the device that's specified

Viewed 281

While attempting to test scripts using either cy.viewport('iphone-x') or cy.viewport(375,812), both render the site the same (incorrectly) but differently than if I open Chrome, go to devtools and specify the same device there. I'm relatively new to Cypress but I haven't been able to figure out why this happens or how to get Cypress to render the website correctly.

Using Devtools
Using Devtools

Using Cypress
Using Cypress

1 Answers

So it looks like this might actually be a code issue within the app. Using devtools, if I inspect the white space it shows height:auto. De-selecting this within devtools makes the screen look like it does when viewing it in Cypress using a mobile viewport. I've logged a bug with my app's development team.

Related