Video Recording For Selenium WebDriver

I work as a Software Engineer at Endtest.

In this article, I will show you how to add Video Recording to your Selenium tests.

You can also apply the same techniques for other testing frameworks.

Why is it useful?

A video recording can help you determine what went wrong in your test execution.

In some cases, looking at logs and screenshots might not be enough.

We also offer video recording in our test automation platform and the users seem to love it.

Isn't there a built-in functionality for this?

No. Selenium does not offer a built-in functionality for video recording.

1. The classic way

Instead of reinventing the wheel and building our own screen recording library, we can just use FFmpeg.

FFmpeg is a complete, cross-platform solution to record, convert and stream audio and video.

All you have to do is send the commands to FFmpeg.

Linux

Use the x11grab device:

ffmpeg -video_size 1024x768 -framerate 25 -f x11grab -i :0.0+100,200 output.mp4

This will grab the image from desktop, starting with the upper-left corner at x=100, y=200 with a width and height of 1024⨉768.

macOS

Use the avfoundation device:

ffmpeg -f avfoundation -list_devices true -i ""

This will enumerate all the available input devices including screens ready to be captured.

Once you've figured out the device index corresponding to the screen to be captured, use:

ffmpeg -f avfoundation -i "<screen device index>:<audio device index>" output.mkv

This will capture the screen from <screen device index> and audio from <audio device index> into the output file output.mkv.

Windows

Use a DirectShow ​device:

ffmpeg -f dshow -i video="screen-capture-recorder" output.mkv

But what if we have a headless browser?

In case you're not familiar with the concept, a headless browser is a web browser without a graphical user interface.

That means that when the browser is running, you don't see it on your screen, it's literally invisible.

FFmpeg can only capture what's visible on your screen.

That's why we need a different approach.

2. The alternative way

Selenium allows us to take screenshots of the browser viewport, even if the browser is running in headless mode.

We can use that functionality to generate a video recording.

After all, a video is just a set of frames.

Taking a screenshot with Selenium is easy:

driver.save_screenshot("screenshot.png")

Now, imagine if throughout our test, we would run a parallel thread that takes a screenshot once every 200 milliseconds.

We could then use those screenshots to generate a video with a decent framerate.

And we can generate that video with FFmpeg.

To take a list of images that are padded with zeros (pic0001.png, pic0002.png…. etc) use the following command:

ffmpeg -r 5 -f image2 -s 1920x1080 -i pic%04d.png -vcodec libx264 -crf 25  -pix_fmt yuv420p test.mp4

where the %04d means that zeros will be padded until the length of the string is 4 i.e 0001…0020…0030…2000 and so on. If no padding is needed use something similar to pic%d.png or %d.png.

• -r is the framerate (fps)
• -crf is the quality, lower means better quality, 15-25 is usually good
• -s is the resolution
• -pix_fmt yuv420p specifies the pixel format

The file will be output (in this case) to: test.mp4

3. The smart way

Our automated testing platform offers video recording for all your test executions.