Cypress runner loading mobile site instead of desktop site-CodePudding

I am opening the website https://www.vangoghmuseum.nl/nl with cy.visit().

However, the cypress runner is opening the mobile website instead of the desktop website.

Any ideas why and how to change this behavior?

CodePudding user response：

The mobile setting seem to be more like tablet size settings.

You can control the viewport before visiting

it('opens van gogh', () => {
  cy.viewport(1800,1000)
  cy.visit('https://www.vangoghmuseum.nl/nl');    // large screen layout
});

If you open devtools to the right and resize, you will see the breakpoint is around 1025 px wide.

Cypress viewport defaults to 1000 px, so you get the small-screen layout.

If you look at one of the <article> elements, it has breakpoint styling of

@media only screen and (min-width: 64em)

which equates to 1024px for the default pixel size of 16px.