How to test webcam functionality in TestCafe?

Question

So basically I want to write an E2E test which involves user's webcam, but I have no idea how to work around giving permission to use webcam or mock it. It's a distant study software for schools and one of main functionalities is that students/teachers can upload files and record videos for school projects and then download the generated.webm file. Currently I can't get the browser to give TestCafe permissions to use webcam.

I've tried giving Chrome these parameters --use-fake-ui-for-media-stream --use-fake-device-for-media-stream

Here's some of my sample code, after 'start video recording' it should grant permission:

    .click(Selector('.assignment-title').withText('Testcafe task'))
    .click(Selector('.uppy-DashboardTab-name').withText('Use camera'))
    .click(Selector('button[title="Start video recording"]'))

And to my understanding it should somehow be possible with navigator.mediaDevices.getUserMedia({video: true}) , but how to migrate this into my code or how does it all come together?

Answer 1

There is an example in the testcafe-examples repository that uses this functionality: Mock Camera/Microphone Access . If the example doesn't help you, please update your question with more details (a minimal project or a public URL with your test code would be of help).