Video Recording For Selenium WebDriver
Tags: testing, webdev, tutorial
Published: 2020-07-09 10:47:39

I work as a Software Engineer at [Endtest](https://endtest.io).

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](https://endtest.io) 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](https://ffmpeg.org/).

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](https://ffmpeg.org/ffmpeg-devices.html#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](https://ffmpeg.org/ffmpeg-devices.html#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](https://trac.ffmpeg.org/wiki/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:
```python
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](https://endtest.io) offers video recording for all your test executions. 

![Endtest Results](https://dev-to-uploads.s3.amazonaws.com/i/0qerb1ipwwkays1ycae8.gif)