Recording Laravel Dusk browser tests using ffmpeg and x11grab
Working with Laravel apps I've had the displeasure of debugging Dusk browser tests. In my experience, even the smallest change to the codebase or environment they run in can cause them to start acting up. Sometimes it's useful to see what's actually going on inside the browser when the tests are being executed. In this post I'll show you how to quickly record a video of a running test.
The setup I'm working on consist of two Docker containers:
php:fpm-alpine which runs the test suites and
selenium/standalone-chrome which is a remote WebDriver. The procedure should look almost the same regardless of your environment.
To record our video, we need to make sure headless mode in not enabled in your
$options = (new ChromeOptions)->addArguments([ // '--disable-gpu', // '--headless', '--window-size=1280,720', ]);
Next, open a shell inside the Chrome container and make sure
ffmpeg is installed
apt install ffmpeg
Now, to record our tests we can use the command below, which will use x11grabs as input, set the resolution to 1280x720, instruct x11grabs to use display 99 and screen 0 (this may be different depending on your environment) and save the output to
ffmpeg -f x11grab -s 1280x720 -i :99.0 -s 1280x720 out.mp4
This will start capturing right away. Leave it running and start your tests in the first container. After the tests are done running you can stop the capture with
Ctrl+C. Now all that's left to do is to play the file. I'll usually save the file to my host filesystem using