Browser capabilities in TestCafe

Question

I have been using a web app in chrome (a meeting client) which makes use of webRTC (Need mic and camera access) while trying to use locally installed chrome browser for executing tests.

Chrome instance triggered by Testcafe is not allowing the access of mic and camera. Is there a way to pass chrome capabilities as we do for Selenium and Protractor?

There are some alternatives for browserstack plugins provided however we are looking at implementing it for the locally installed browser where we can enable the mic and camera access.

Workaround tried: Tired to feed fake media stream using chrome browser related arguments such as --use-fake-ui-for-media-stream --use-fake-device-for-media-stream. (Unsuccessful)

Test Code:

import {Selector, t} from 'testcafe';

fixture(`Test Page`)
    .page('XXXXXXXXXXXXXX');

test('Validating Sanity of WebApp', async t => {
    await t
    .click(Selector('#create_meeting_btn1'));
});

Command line trigger code:

testcafe chrome test.js

Answer 1

Chrome doesn't allow calling the getUserMedia API from insecure origins. You need to run TestCafe over HTTPS. See the step-by-step instruction in this comment as mentioned below.

1. Specify localhost as the hostname when starting TestCafe:

   testcafe --hostname localhost ...
   

2. Obtain a valid SSL certificate or register a self-signed certificate as a valid in your operating system and enable HTTPS mode in TestCafe:

   testcafe --ssl pfx=/path/to/cert.pfx ...
   

I've tried the following example and it worked for me with --hostname localhost:

fixture `WebRTC`
    .page`https://webrtc.github.io/samples/src/content/getusermedia/canvas/`;

test(`test`, async t => t.wait(30000));