Testcafe: A correct user agent for Chrome in emulation mode

[LavrovArtem]

What is your Test Scenario?

When I run my test in Chrome with and without emulation mode, user agents are the same:
testcafe chrome,'chrome:emulation:device=iphone X' test.js
 
In the console I see the following agents:

Running tests in:
- Chrome 71.0.3578 / Windows 8.1.0.0
- Chrome 71.0.3578 / Windows 8.1.0.0

The current behavior also affects the --screenshot-path-pattern functionality because the ${USERAGENT} pattern is the same for both browsers.
 

What are you suggesting?

Currently, the user agent pattern is ${BROWSER} ${BROWSER_VERSION} / ${OS} ${OS_VERSION}. I think it should be something like this - ${BROWSER} ${BROWSER_VERSION} / ${OS} ${OS_VERSION} / ${EMULATION_MODE}.

[rob4629]

I'm not sure if this should be a new bug, or might be related... but t.browser.platform also always returns 'Desktop', regardless of running in chrome emulation:

testcafe "chrome:headless:emulation:device=iphone X"
Using locally installed version of TestCafe.
The "browsers" option from the configuration file will be ignored.
 Running tests in:
 - Chrome 78.0.3904.108 / macOS 10.14.6

 Sign Petition as a New User
desktop

_(console.log(t.browser.platform))_

Update:
If I set the user-agent in the CLI, then it updates to mobile:

testcafe "chrome:headless:emulation:device=iphone X --user-agent='Chrome/57.0.2987.133\ Mobile'"
Using locally installed version of TestCafe.
The "browsers" option from the configuration file will be ignored.
 Running tests in:
 - Chrome 57.0.2987.133 / Other 0.0

 Sign Petition as a New User
mobile

It would be useful if we didn't have to explicitly set this though...

[Farfurix]

@rob4629

Hello,

Thank you for the detailed description. I reproduced the issue. Our team will research it and check for a suitable solution.

[Farfurix]

One more related issue: https://github.com/DevExpress/testcafe/issues/5146.
Reason: it is impossible to get the actual t.browser.userAgent value after changing the userAgent browser and use it, for example, in test conditional expressions.

[AndreyBelym]

Feature draft:

When Chrome starts in emulation mode, append "Emulating" + the device name after pretty useragent:

Chrome 81 (Emulating iPhone X)
Chrome 81 (Emulating iPad)
Chrome 81 (Emulating Android)

One more case: "not a specific device".

[lgriotti]

hi, can someone tell me one solution to make the headless mobile work? im trying the @rob4629 solution and it didn't work. Thanks.

[rob4629]

@lgriotti you just need to add Headless to the Chrome name:
testcafe 'chrome:headless:emulation:device=iphone X'

[lgriotti]

@rob4629 yes, but didn't work properly. i realized that if you maximixize the window in mobile headless it comes back to "desktop mode", so that was why it fail.

[rob4629]

if you maximixize the window in mobile headless it comes back to "desktop mode"

Ahhh, that's good to know. Thanks.

When Chrome starts in emulation mode, append "Emulating" + the device name after pretty useragent

Would it also be possible to insert the correct device UA +Mobile (as referenced on Google's User-Agent page)? We're discovering that not ALL of our mobile specific functionality is working, when running in device emulation.

Current:

testcafe 'chrome:emulation:device=iPhone X'
> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36 

Expected:

testcafe 'chrome:emulation:device=iPhone X'
> Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Mobile Safari/537.36 

[arubtsov]

@rob4629

Could you please share an example?

t.browserInfo.userAgent contains the real user agent, but the UA of an emulated device is applied on a test page. You can check this as follows:
console.log(await t.eval(() => navigator.userAgent.toString()))

[rob4629]

Ahhh ok, that shows the correct UA for emulating iPhones. I added the above command as an example, but we are actually using chrome:headless:emulation:width=400;height=600;mobile=true;orientation=vertical;touch=true as part of our CI. (_This is due to some instability of the iPhone emulation on our regression run..._)

The UA for that browser emulation is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/83.0.4103.61 Safari/537.36.

Although we're not emulating a specific device, would it be possible to tag on the Mobile UA to this?

[Farfurix]

@rob4629

Hello,

Thank you for the additional information. I added your case as a link to the above comment. We'll consider this "not a specific device" scenario.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.