Identify the Browser and Platform
TestCafe allows you to obtain information about the current user agent in test code. These data identify the operating system, platform type, browser, engine, etc.
Use the t.browser
property to access user agent data.
import { Selector } from 'testcafe';
fixture `My fixture`
.page `https://example.com`;
test('My test', async t => {
if (t.browser.name !== 'Chrome')
await t.expect(Selector('div').withText('Browser not supported').visible).ok();
});
t.browser
exposes the following properties:
Property | Type | Description | Example |
---|---|---|---|
alias | String | The browser alias string specified when tests were launched. | firefox:headless |
name | String | The browser name. | Chrome |
version | String | The browser version. | 77.0.3865.120 |
platform | String | The platform type. | desktop |
headless | Boolean | true if the browser runs in headless mode. |
false |
os | Object | The name and version of the operating system. | { name: 'macOS', version: '10.15.1' } |
engine | Object | The name and version of the browser engine. | { name: 'Gecko', version: '20100101' } |
userAgent | String | The user agent string. | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/77.0.3865.120 Safari/537.36 |
prettyUserAgent | String | Formatted string with the browser's and operating system's name and version. | Chrome 77.0.3865.75 / macOS 10.14.0 |
Properties #
alias #
The browser alias string specified when tests were launched.
For locally installed browsers, this property contains the short browser name:
{
alias: 'chrome'
}
For portable browsers, alias
returns the path:
prefix followed by the path to the browser executable:
{
alias: 'path:C:\Program Files (x86)\Firefox Portable\firefox.exe'
}
Browser alias flags (:headless, :emulation, etc.) and command line parameters are included in the alias string:
{
alias: 'chrome:headless --no-sandbox'
}
{
alias: 'firefox:headless:disableMultiprocessing=true'
}
For cloud testing services and browsers acessed through browser providers, the alias
property value is a string with all the specified browser, operating system and device parameters:
{
alias: 'saucelabs:Samsung Galaxy S9 Plus WQHD GoogleAPI Emulator@8.1'
}
name #
The short browser name.
{
name: 'Safari'
}
{
name: 'Internet Explorer'
}
If the browser cannot be detected automatically, the name
property is set to 'Other'
.
version #
The browser version.
{
name: 'Chrome',
version: '77.0.3865.120'
}
{
name: 'Firefox',
version: '69.0'
}
The version
property is set to '0.0'
if the browser version cannot be determined.
platform #
Identifies the platform type. This property can have the following values:
desktop
mobile
tablet
other
(identifies other platforms, or indicates that the platform cannot be detected)
{
name: 'Firefox',
platform: 'mobile'
}
headless #
Specifies if the browser is in headless mode.
{
alias: 'chrome:headless',
name: 'Chrome',
headless: true
}
os #
Provides the operating system's name
and version
.
{
os: {
name: 'Windows',
version: '10'
}
}
If the operating system cannot be detected, the os.name
property is set to 'Other'
. The os.version
property defaults to '0.0'
if TestCafe is unable to determine the OS version.
engine #
Provides the browser engine's name
and version
.
{
engine: {
name: 'WebKit',
version: '605.1.15'
}
}
If the browser engine cannot be detected, the engine.name
property is set to 'Other'
. The engine.version
property defaults to '0.0'
if TestCafe is unable to determine the engine version.
userAgent #
The user agent string.
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/77.0.3865.120 Safari/537.36'
}
prettyUserAgent #
The formatted name and version of the browser and operating system. This string is displayed on the TestCafe loading screen and in the status bar.
{
prettyUserAgent: 'Firefox 69.0 / Windows 10'
}
{
prettyUserAgent: 'Chrome 77.0.3865.120 / macOS 10.15.1'
}
The prettyUserAgent
property is set to an empty string if TestCafe cannot parse the user agent.
Examples #
Create a Browser-Specific Hook #
The following example shows how to create a beforeEach hook that runs for only particular browser engines.
import { Selector } from 'testcafe';
fixture `My fixture`
.page `https://example.com`
.beforeEach(async t => {
if (t.browser.engine.name === 'Blink')
return;
// ...
});
Generate the Screenshot File Path #
This example shows how to generate the screenshot path based on the browser name. This prevents screenshots taken with t.takeElementScreenshot in different browsers from being overwritten.
import { Selector } from 'testcafe';
fixture `My fixture`
.page `https://example.com`;
test('My test', async t => {
const loginButton = Selector('div').withText('Login');
await t.takeElementScreenshot(loginButton, `auth/${t.browser.name}/login-button.png`);
});
Verify the Installer Version #
The following example verifies that the website detects the user's platform correctly and offers to download the right installer. This test uses the t.browser.os.name property to determine the operating system and check the installer name.
import { Selector } from 'testcafe';
fixture `My fixture`
.page `https://example.com`;
const downloadButton = Selector('a').withText('Download');
test('Check the installer platform', async t => {
let installerName;
switch (t.browser.os.name) {
case 'Windows':
installerName = 'myapp-win.exe';
break;
case 'macOS':
installerName = 'myapp-mac.dmg';
break;
default:
installerName = 'myapp-linux.tar.gz';
break;
}
await t.expect(downloadButton.getAttribute('href')).contains(installerName);
});
Handle Ads on Mobile Devices #
The following example uses the t.browser.platform property to determine the platform and attach a request mock that blocks ad requests if the test runs on a mobile device.
import { RequestMock } from 'testcafe';
const mobileAdMock = RequestMock()
.onRequestTo(/bannernetwork.com/)
.respond((req, res) => { res.statusCode = '404'; });
fixture `My fixture`
.beforeEach(async t => {
if (t.browser.platform === 'mobile')
await t.addRequestHooks(mobileAdMock);
await t.navigateTo('https://mysite.com/tested/page/');
});
test('My test', async t => {
// ...
});