Member-only story
Fake video capture with Playwright
How to mock the camera for an end-to-end test that requires a video stream capture.
We recently added a QR code reader feature to NNS-dapp, a decentralized application that enables interaction with the Internet Computer’s Network Nervous System. To ensure its maintainability, we created an end-to-end test using Playwright to simulate video capture for automation purposes. As we had to gather information from various sources to make this happen, I decided to share our insights in a single blog post to assist others who may encounter similar challenges.
Demo
This is how one of our tests operates: it opens a modal that utilizes the QR code reader to read and decode the video stream. The decoded result is then parsed into a textarea and ultimately validated using pixel-based screenshot comparison.
Limitations
Before proceeding further, I would like to highlight the various technical limitations that are required to set up such a test. Please note that as of writing this article on April 30th, 2023, Playwright may have evolved since then. Therefore, it is always advisable to double-check the documentation first.
Chrome only
It is not possible to mock the camera in Safari. As documented in this GitHub issue, it is possible to mock the video capture in Firefox, but it is not possible to provide a specific video file. Therefore, it is safe to assume that mocking the camera, the way we intended to do with Playwright, only works in Google Chrome.
YUV4MPEG2
Based on my experimentation, it appears that the only video format that can be used by Chrome to feed a test file to getUserMedia() instead of live camera input is the .y4m file format.
This file format is designed to hold uncompressed frames, so it is also worth noting that the video can be quite large in size.
