Is there a programmatic way to change user agent in Cypress.io?

Question

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 corre

Answer 1

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

Answer 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)"
}

You've mentioned that you don't want to use cypress.json. The user agent can be set programmatically, per spec-file, by using Cypress.config():

Cypress.config('userAgent', 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)')

Answer 3

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)',
            });
        },
    });
});

Answer 4

Since Cypress tests are written in Javascript you can set the user agent using the Object.defineProperty() method, for example:

Object.defineProperty(navigator, 'userAgent', {
    get: function () { return 'Mozilla/5.0 (Windows NT 6.2; WOW64; 
    rv:28.0) Gecko/20100101 Firefox/28.0)'; }
});

Then, to change the viewport you can use the cy.viewport() command. In the Cypress documentation here you can find examples on how to organize your desktop vs mobile tests separately and how to dynamically test multiple viewports.