slacki.io

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 DuskTestCase class.

$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 out.mp4.

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 docker cp