Unable to switch userAgent during test run

[hdjong1]

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').

[basarat]

Verified.

• Following test with cypress.json as {}:

describe('A certain page', () => {
  before(() => {
    console.log(Cypress.config('userAgent' as any)); // outputs: null
    Cypress.config('userAgent' as any, 'mobile_value'); // set userAgent
    console.log(Cypress.config('userAgent' as any)); //outputs: mobile_value
  });

  it('should exhibit mobile behaviour', () => {
    console.log(navigator.userAgent); // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
  });
}); 

• Same test with cypress.json as {"userAgent": "testValue"}:

describe('A certain page', () => {
  before(() => {
    console.log(Cypress.config('userAgent' as any)); // outputs: testValue
    Cypress.config('userAgent' as any, 'mobile_value'); // set userAgent
    console.log(Cypress.config('userAgent' as any)); //outputs: mobile_value
  });

  it('should exhibit mobile behaviour', () => {
    console.log(navigator.userAgent); // testValue
  });
}); 

[mybrainishuge]

Cypress version: 3.1.0

I'm experiencing what seems to be the same behavior as @hdjong1. If I log the userAgent value after setting it inside a test using Cypress.config('userAgent', 'mobile_UA_string'), it logs the mobile UA string as expected, but has no effect on my app. However, if I specify the same UA string in cypress.json and relaunch the Cypress app, the UA detection works as expected. Modifying the userAgent string from inside tests is clearly updating the config value, but it seems like that updated value isn't being passed the app being tested.

[brian-mann]

You cannot change the user agent in the middle of a test. What you can do is split up the mobile tests from the desktop tests and then run those groups separately via a different cypress run --config userAgent=...

The only way for us to be able to change the userAgent on the fly is at the network layer. We could make that work but that's really more applicable to the network stubbing rewrite.

[mybrainishuge]

@brian-mann Thanks for the quick reply and suggestion!

Is this limitation unique to setting the userAgent value or am I misunderstanding the purpose of Cypress.config as a method for modifying config values during tests?

[brian-mann]

Its a limitation that exists for a few different config values - basically anything that's not directly under Cypress's control like things such as timeouts or environment variables, etc.

Cypress.config(...) is a way of modifying the config but certain changes won't be respected because those values have to be applied during different stages sometimes before the browser is even launched.

[mybrainishuge]

I don't see this mentioned in the Cypress.config documentation. Granted, I haven't seen many other people talking about this, so it may be low priority, but some mention of this limitation in the docs could be helpful.

Thanks for your help!

[brian-mann]

It's been talked about in other issues - and I think the general consensus was to freeze or lock properties that cannot be changed so that it would throw and you'd immediately know.

[mybrainishuge]

Makes sense. That would be much quicker than consulting documentation, which would be convenient.

Next time it comes up you can mention the random guy in issue #2100 who supports the freeze/lock and throw idea if you need a tie breaker. In fact, popup my profile pic when it throws with the caption "No."

[nobleach]

So I see above that there might be a way to run cypress run with a config value. Should this work: cypress run --config 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'?

I'm getting a huge error in the UI when I attempt to run that.

[mybrainishuge]

@nobleach The value you're specifying for userAgent contains several characters that aren't being parsed how you want. I'm not sure the best solution, but my kind of hacky solution was to pass a simplified string to the run/open command and check for that string when loading plugins

"cypress:dev:mobile": "cypress open --env configFile=dev,userAgent=mobile",

In the plugins export, if "mobile" is specified, then I add the full user agent string to the config that gets returned

if (config.env.userAgent === 'mobile') {
  data.userAgent =
    'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1';
}

It doesn't feel very pretty, but the user agent needs to be specified before Cypress loads the config and this is what I came up with.

[nobleach]

I suppose that's viable. I'm interested in how others handle it too. An adaptive app that renders a different experience for mobile/tablet/desktop isn't that far outside of reality, is it?

I very much appreciate you sharing your approach, so thank you!

[raul782]

I've been migrating my tests to Cypress and I'm facing this issue where we have 3 platforms and each needs a different user agent among other specific configurations that are caught and injected in our plugin, the same spec is run for each platform, so we do a loop before starting each spec suite. We have a fixture organized by platform, so we can assert easily.

Doing it manually is not a viable solution, I thought I could also move away from gulp and just use npm run scripts, but so far the only way I could accomplish this is to have all the different configs in gulp.

Is there any other approach you can suggest us?

Thanks

[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);
};

[Songyu-Wang]

It would be nice if this can be mentioned in the online docs, it took me a while before figuring out what was wrong

[jpalmieri]

Another bump for clearer documentation on this (or some alert in the UI). It also took me some time to get here and figure out that this isn't possible.

[urig]

And another bump from me. I'm a paying customer and I wasted several hours till I was directed by someone to this issue.

Issue was reported al,ost a year ago. If you can't change the functionality to match the docs then please change the docs to match the functionality. ---> PR here: https://github.com/cypress-io/cypress-documentation/pull/1681

[flotwig]

Related issue that would make it an error to try to use Cypress.config on a non-overridable property: #3422

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

[JingyulGary]

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

I was trying to use this method to trigger my React frontend to render the mobile page, but it didn't work. Any idea?

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

I was trying to use this method to trigger my React frontend to render the mobile page, but it didn't work. Any idea?

Maybe you should also change the viewport size, such as cy.viewport('iphone-x').

[gianlucabaldin]

same problem for us / annoying not to find this in the official docs but within the issues.

fixed with @luokuning 's solution - thanks a lot

[feliperaul]

I'd like to chime in my + 1. This is a must have feature 😬

I also lost one good hour trying to figure out why neither the second argument for describe or it didn't respect the user agent.

I finally found this issue (and, to be fair, this on the documentation, stating that userAgent would be ignored), but a much better developer experience would to be thrown an error about this, warning that you were trying to change an immutable value during the test run.

It's also confusing in the documentation that if you pass { browser: { userAgent: 'xxx' } you'll get a faded blue test stating "Ignored due to browser", because it's actually conditioning the test run, and not changing browser options.

Regarding workarounds, I managed to set my user agent doing it like this:

cy.visit('/my-url', {
    headers: { 'user-agent': 'mobile' }
});

However, unfortunately that still doesn't cut it for our tests because it will send that header only in the first request, but not honor it on any page redirects; so if your test clicks on a button and gets redirected to another page, the redirect won't have those headers.

Had I known this beforehand, I wouldn't have switched our test suite to Cypress. It's really a big deal for us because we use things like browser.device.mobile? in our Rails app all the time, to conditionally render elements or even alter redirect urls based on the browser's user agent.

The other workaround posted here by @luokuning unfortunately doesn't work in Cypress 6.

[pamo]

@feliperaul @jennifer-shehane any updated recommendations on persisting that user agent header throughout the whole test run?

[melibe23]

On Config I have nothing set as userAgent

On my tests I have: I have

before(() => {
    cy.visit(path, {
      headers: {
        'user-agent': userAgentTablet,
      },
    })
    cy.scrollTo(0, 500)
  })

Still, I don't get iPad userAgent. I get the desktop one. I have my desktop/mobile/tablet split into 3 different specs.

I don't know what else to try.

[melibe23]

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

I don't think will work. This will set the user agent on the browser where the Test Runner is running, no where you visit your app.

[melibe23]

There MUST be a dynamic way to set the user agent rather than thru a command line for each userAgent, isn't it? None of the workarounds mentioned above that uses plugin/index worked for me (maybe I am doing something wrong, of course)... but isn't over there any clear documentation on how to dynamically (based on spec name, relative path, something like this) set a user agent before the run starts?

I am also an enterprise client and this little thing is killing me (I love you tool, but there must be something over there that I am not fully catching) :pray:

[AlvinaMohsin05]

I have used the approached that @luokuning mentioned, but it only seems to be working with the url I have passed with command, for instance, if I navigate to a different screen by clicking on a button or link, I lose the header object and the functionality returns to desktop view. Can someone please guide how to keep the the headers present with every subsequent click?

[Masvi]

You cannot change the user agent in the middle of a test. What you can do is split up the mobile tests from the desktop tests and then run those groups separately via a different cypress run --config userAgent=...

The only way for us to be able to change the userAgent on the fly is at the network layer. We could make that work but that's really more applicable to the network stubbing rewrite.

Any changes in this scenario? or should I go with the split tests approach?

[brobee]

I am unable to change/override userAgent via config file.

my cypress json contains:
env object: {
    "platform" : "mobile"
}

my plugins/index.js

on(config => {
    if (config.env.platform === 'desktop') {
      config.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36'
    } else if (config.env.platform === 'mobile') {
      config.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1'
    }
    return config
  }) 

The error is: Error: You must pass a valid event name when registering a plugin.

I totally get it, I am unable to change it during runtime, but before that via config should work. What did I miss?

[emilyrohrbough]

@brobee Try taking a look at the pluginsFile configuration setup here: https://docs.cypress.io/guides/references/configuration#Plugins

You should be able to slim this down set it up when the plugin is resolved:

// cypress/plugins/index.js
+ module.exports = (on, config) => {
- on(config => {
    if (config.env.platform === 'desktop') {
      config.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36'
    } else if (config.env.platform === 'mobile') {
      config.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1'
    }
    return config
-  }) 
}