Fun way of labeling segments on video recordings on Sauce

I've been using SauceLabs for running my tests on different browsers.  However, it's very hard to debug tests on browsers I don't have installed, and with so many tests running that's reusing the same browser instances when possible to reduce start-up times.  I get very long video recordings with no breaks in between and no idea which segments corresponds to which tests.

Clapper Boards

In the movie industry, how they keep track of which segments and clips relate to which assets, they use a simple clapper board so the directors and producers can figure out where to clip the film and tag their clips.

Implementing one in Selenium

Doing the same with a selenium test is pretty simple with a little JavaScript.  You can simply create an element on the dom, apply a URI encoded image as a background, and set some text with styling over it.  Then after a short delay, just remove the element from the dom.

Here's a the code: https://gist.github.com/dlai0001/6027310#file-show_clapper-py

When you run a selenium test, you can start off with a simple call to the clapper board function, and you'll get a nice clapper board image that you can use to separate you selenium video recording clips.

Voila! Now you can find which clips correspond to which tests in a sea of recorded video footage.