23

I have some ad calls that are only made on mobile devices. In Chrome, I can use Device Mode and simulate a mobile device, and the resulting ad call from the server is correctly tailored to mobile. I'm not sure how Chrome does this, except possibly by sending a different user agent.

In the Cypress.io documentation, it says the user agent can be changed in the configuration file (Cypress.json). But, I need to run a test for a desktop viewport and then a mobile viewport with a mobile user agent. Is there a way to change the user agent programmatically?

Stephen
  • 2,410
  • 3
  • 33
  • 57

3 Answers3

17

Update: According to https://github.com/cypress-io/cypress/issues/3873 it is possible since Cypress 3.3.0 use user-agent property in a cy.request() and cy.visit().

If you need, for example, set userAgent as Googlebot:

cy.visit(url, {
    headers: {
        'user-agent': 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
    }
});

Original answer before Cypress 3.3.0

before(() => {
    cy.visit(url, {
        onBeforeLoad: win => {
            Object.defineProperty(win.navigator, 'userAgent', {
                value: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
            });
        },
    });
});
Marek Dorda
  • 1,255
  • 17
  • 19
  • 2
    Thanks, I didn't have luck with the newer answer (even on 3.3.0+). But the old stub worked. – bumsoverboard Mar 12 '21 at 02:51
  • 1
    userAgent is ignored at runtime, neither of solutions worked https://docs.cypress.io/api/cypress-api/config#Notes – Reza Aug 02 '21 at 14:55
  • This is working in my local, but it is not working on staging. on the staging, i am getting fixed user agent each time which is `Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Cypress/12.1.0 Chrome/106.0.5249.51 Electron/21.0.0 Safari/537.36` – Vishal Mar 09 '23 at 15:42
  • The second option is not for me as i am using cy.request – Vishal Mar 09 '23 at 15:45
5

Update as of Aug 12, 2021:

It seems you can't change the user agent anymore: https://docs.cypress.io/api/cypress-api/config#Notes

Old answer:

Now cypress supports passing user agent in the header for cy.visit as well as cy.request:

it('Verify Social Sharing Meta Tags', () => {
  cy.visit(portalURL + '/whats_new/140', {
    headers: {
      'user-agent': 'LinkedInBot/1.0 (compatible; Mozilla/5.0; Apache-HttpClient +http://www.linkedin.com)',
    }
  });

  cy.document().get('head meta[name="og:type"]')
    .should('have.attr', 'content', 'website');
});

https://on.cypress.io/changelog#3-3-0

Daniel
  • 4,949
  • 4
  • 34
  • 50
Malay
  • 635
  • 8
  • 11
2

The other answers do not set the User-Agent header of the underlying HTTP request, just the userAgent property of win.navigator. To set the User-Agent header to a custom value for all HTTP requests, you can set the userAgent configuration option:

{
  // rest of your cypress.json...
  "userAgent": "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
}
Zach Bloomquist
  • 5,309
  • 29
  • 44
  • 3
    Unfortunately the programmatic part doesn't work: see https://docs.cypress.io/api/cypress-api/config.html#Not-all-config-values-can-be-changed-at-all-times – Artem Vasiliev Jul 06 '20 at 10:33
  • 2
    `userAgent` is special and cannot be changed at run time with `Cypress.config()`: https://docs.cypress.io/api/cypress-api/config#Not-all-config-values-can-be-changed-at-all-times – P. Jausions Jul 06 '21 at 12:29