testcafe running different tests based on browser

Question

I was wondering if there is a way to somehow pass a parameter to let your fixture or even all tests know which browser they are running in.

In my particular case, I would use that parameter to simply assign a corresponding value to a variable inside my tests.

For example,

    switch(browser) {
            case 'chrome':
                chrome = 'chrome.com';
                break;
            case 'firefox':
                link = 'firefox.com';
                break;
            case 'safari':
                link = 'safari.com';
                break;            
            default:
                break;
}

Currently, I was able to achieve something similar by adding a global node variable and it looks something like this:

"chrome": "BROWSER=1 node runner.js"

However, this makes me create a separate runner for every browser (safari-runner, chrome-runner etc.) and I would like to have everything in one place.

So at the end of the day, I would need to make this work:

const createTestCafe = require('testcafe');

let testcafe         = null;

createTestCafe('localhost', 1337, 1338)
    .then(tc => {
        testcafe     = tc;
        const runner = testcafe.createRunner();

        return runner
            .src('test.js')
            .browsers(['all browsers'])
            .run({
                passBrowserId: true // I guess it would look something like this
            });
    })
    .then(failedCount => {
        console.log('Tests failed: ' + failedCount);
        testcafe.close();
    })
    .catch(error => {
        console.log(error);
        testcafe.close();
    });

user_6028639 · Answer

There are several ways to get browser info:

Get navigator.userAgent from the browser using ClientFunction. Optionally you can use a module to parse an user agent string, for example: ua-parser-js.

import { ClientFunction } from 'testcafe';
import uaParser from 'ua-parser-js';

fixture `get ua`
    .page `https://testcafe.devexpress.com/`;

const getUA = ClientFunction(() => navigator.userAgent);

test('get ua', async t => {
    const ua = await getUA();

    console.log(uaParser(ua).browser.name);
});

Use RequestLogger to obtain browser info. For example:

import { RequestLogger } from 'testcafe';

const logger = RequestLogger('https://testcafe.devexpress.com/');

fixture `test`
    .page('https://testcafe.devexpress.com')
    .requestHooks(logger);

test('test 1', async t => {
    await t.expect(logger.contains(record => record.response.statusCode === 200)).ok(); 

        const logRecord = logger.requests[0];

        console.log(logRecord.userAgent);
});

The TestCafe team is working on the t.browserInfo function, which solves the issue in the future.

user_5945119 · Answer

Just to update this question, testcafe has now implemented t.browser, which will allow you to check the browser.name or browser.alias to determine which browser you're running in.

import { t } from 'testcafe';

const browserIncludes = b => t.browser.name.includes(b);
const isBrowserStack = () => t.browser.alias.includes('browserstack');

fixture `test`
    .page('https://testcafe.devexpress.com')

test('is Chrome?', async () => {
    console.log(t.browser.name);
    await t.expect(browserIncludes('Chrome').ok();
    await t.expect(isBrowserStack()).notOk();
});

testcafe running different tests based on browser

2 Answers