how to use cypress viewport refresh reload

Website is supposed to work only on Mobile web (Shows error message on desktop web), trying to automate the same using cypress viewport.

Manual Test steps: In chrome, We are launching an URL in desktop web application, application display error page. Then change to chrome emulator mode, refresh the application, actual page will be displayed.

Automating using cypress: launching an application, minimizing to mobile view, reloading the application.

expecting, After reloading the page, actual application page should be displayed in the mobile view but error page is displaying in the mobile.

My code looks like below

    cy.visit('url')
    cy.viewport('iphone-6')
    cy.wait(200)

Could anyone help on this?

Solution 1:

After reading your comment, if you want to initialize your test in mobile view, you need to put your cy.viewport() call inside a beforeEach hook.

Something like this:

context('iphone-6 resolution', function () {
    beforeEach(function () {
      // run these tests as if in a mobile browser
      // and ensure our responsive UI is correct
      cy.viewport('iphone-6')
    })

    it('your test logic', function () {
      ...
    })
  })

I do not know if I understood exactly what the issue is, but you can cy.reload() to force a page reload after viewport is changed.

cy.visit('url')
cy.viewport('iphone-6')
cy.reload()

You can find more info about this command in Cypress documentation here.