1

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?

Pavan Bangalore
  • 9
  • 1
  • 2
  • Is this a duplicate of https://stackoverflow.com/questions/51048880/is-there-a-programmatic-way-to-change-user-agent-in-cypress-io? – Bae Aug 01 '19 at 00:26

2 Answers2

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.

Diogo Rocha
  • 9,759
  • 4
  • 48
  • 52
  • I wasnt clear in the question , the intention is to see only in the mobile web view as on desktop the site is not intended to work , tried using --> const mobileUserAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Mobile Safari/537.36" but isnt workign as cypress treating it as desktop web. is there any piece of code to add t treat as a android device web when it loads – Pavan Bangalore May 10 '19 at 03:31
0

Try by adding following:

  1. In cypress.json file, add =="modifyObstructiveCode": false, "chromeWebSecurity": false

  2. Add user-agent in cy.visit method

    cy.visit('https://www.your_website_url.com/',{ headers: { "user-agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36" } });

This solutions helped me to fix the mweb reload issue.

Priyanka B
  • 101
  • 9