After listening to @hugs talk about automating screencasts, and his belief that iphone-like commercials are the future of testing and marketing, I decided to take action and find a way to integrate the missing piece that would allow users to create audience-oriented videos using Selenium.

Surprisingly, it took only a few minutes of hacking to come up with a usable javascript extension that transforms the standard setContext Selenium command into a more descriptive and visual message, making videos recorded by Sauce OnDemand way more useful for external watchers.

What this code does is rewrite the original setContext browser side javascript to create and inject a semi-transparent div on top of the application window. All you have to do is tell your story using setContext while your test is running. After a few seconds, a fadeout function is called to take care of removing that div in a visually attractive way.

Here’s an example video of this feature. You can also check the job results page in Sauce and the source code of the test used to record it.

If you’d like to use this cool feature in your own OnDemand tests, just add the following JSON key to your browser string and start using setContext in them:

"user-extensions-url": "http://saucelabs.com/ext/setContext.js",

You can also change the styling of the message pretty easily. Just fork the gist, start playing around, and please share your updates with the rest in the comments section!