Most web developers are well-versed in the uses of headless browsers for testing purposes, but are they good for anything else? As with any job, using the right tool can make all the difference.
I’ve recently been working on a project to provide better statistics regarding some of our lead-generation forms. Over the years, we’ve had some rudimentary tracking but not enough to really dig in and figure out how to super-serve our visitors, giving them what they want. Essentially, we were limited to some text descriptions of the experience, and after a while, you forget what they mean. But as another developer on my team noted, a picture is worth a thousand words. Why don’t we capture screen shots and tie them to the reporting data so we know exactly what the customer saw, even years into the future? Bingo.
There’s only one problem: We have dozens of forms, and even more when we consider our responsive designs. It would be such a tedious and time-consuming process to take screen captures of every single one in its various flavors. Enter PhantomJS. This snazzy open-source tool fires up a headless WebKit browser and can do just about anything via a JavaScript API. Better yet, one of the examples shows how to take screen shots, which is exactly what we needed. It’s available as a stand-alone zip file pre-packaged to run on OSX with a few terminal commands.
With a few tweaks, the example was ready to accept parameters for the desired view-port size and save a full rendering of the page using the WebKit engine. I later took the time to whip up a bash script to simplify the process even further. Now it takes only a matter of seconds to grab screens of a given URL at our standard responsive breakpoints, even prepending and appending the resulting file names to match our conventions. The tool can easily be modified in the future to emulate user agent or even script user interaction if need be.
Thanks to PhantomJS, the initial data population for the project, which could have taken hours, was completed in a matter of minutes. And that’s more time for writing code that changes lives.
Have you found any other clever or interesting uses for headless browsers?
