An example of how you can solve the problem of web camera recording testing with Cypress
When you want to automate clicks and inputs things are straight forward in the test automation world.
What's happening when you want to simulate access to camera and simulate the Web Camera recording process for your test?
It's obvious that if you want to run a test on your local machine you can use the Web Camera of the machine BUT how this test will run on CI?
We need something that simulates the camera access and produce actual stream of video.
On chromium based browsers you can add some arguments that will do this job for you :
--use-fake-ui-for-media-streamavoids the need to grant camera/microphone permissions.--use-fake-device-for-media-streamfeeds a test pattern togetUserMedia()instead of live camera input.
You can also use another argument to feed the camera your video :
--use-file-for-fake-video-capture=path/to/video
In our case we will use the public website https://webcamtests.com/ to run it on GitHub Actions and we will get as artifacts the video and the screenshot of the test.
- Clone this repository
- Run
cd webcam-testing/to command line to access the folder - Run
npm install - Run
npx cypress open - Select
webcam.cy.jsand press run on cypress runner
Screenshot of the Web Camera recording frame:
Short video with execution:
