Detect the Client Browser and Platform

TestCafe allows you to obtain information about the current user agent in test code. This data identifies 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 are 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 and operating system's name and version. Chrome 77.0.3865.75 / macOS 10.14.0

Examples

Create a Browser-Specific Hook

The following example shows how to create a beforeEach hook that runs for particular browser engines only:

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