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 => {
    // ...
});