Unable to switch userAgent during test run

Current behavior:

I’m testing an application that, as many these days, has a responsive design. Based on the viewport the layout changes. However, for some parts, it’s also important that the user agent is set to mobile in order to trigger certain functionality. Cypress provides an userAgent option in cypress.json which can be used for this. Since my test suite contains tests for both desktop and mobile scenario’s I would like to set the userAgent option during test runs. By default, I just leave it empty which takes care of the desktop scenarios. When a mobile scenario is run I want userAgent to be set to a mobile one, and switch back once a desktop scenario is encountered again. I’m using Cypress.config('userAgent', 'value') in my spec files in order to do so.

Steps to reproduce:

Test code:

describe('A certain page', () => { 
  describe('on mobile', () => {
    before(() => {
      console.log(Cypress.config('userAgent')); // outputs: null
      Cypress.config('userAgent', 'mobile_value'); // set userAgent
      console.log(Cypress.config('userAgent')); //outputs: mobile_value
      setUp(); //setup function where cookies and viewport (iphone-6) are set and cy.visit is called
    });

    it('should exhibit mobile behaviour', () => {
      cy.get('something').should('be.mobile.functionality');
    });
  });
}); 

Based on the above code I would expect to get the mobile version of my app served, but I’m still getting the desktop version through a mobile viewport. When I set the userAgent in cypress.json directly everything does work as expected (I get the mobile app served). So the functionality is working, but I can’t seem to trigger it during a test run with Cypress.config('userAgent').

[nobleach]

Using npm scripts shouldn’t be a problem. We do it like this:

    "cypress:prod": "CYPRESS_baseUrl=http://localhost:8080 cypress run --env userAgent=mobile",
    "cypress:prod:tablet": "CYPRESS_baseUrl=http://localhost:8080 cypress run --env userAgent=tablet",
    "cypress:ci": "cypress:prod && cypress:prod:tablet",

I’ve used the above suggestion in my plugins/index.js:

module.exports = (on, config) => {
    // create new config settings
    const configOverride = {};
    if (config.env.userAgent === 'mobile') {
        configOverride.userAgent = 'Mozilla/5.0 (Linux; Android 6.0.1; SM-G532G Build/MMB29T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.83 Mobile Safari/537.36';
        configOverride.testFiles = 'mobile/**/*.*';
    } else if (config.env.userAgent === 'tablet') {
        configOverride.userAgent = 'Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10';
        configOverride.testFiles = 'tablet/**/*.*';
    } else {
        configOverride.userAgent = 'none';
    }

    return Object.assign({}, config, configOverride);
};

[luokuning]

Here is another workaround mentioned here, may be useful in some case:

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