javascripttestingautomated-testscypressweb-testing

Cypress runner loading mobile site instead of desktop site

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?

Solution

  • 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.