sholsinger.com

Today I was working on integrating product recommendations for emails. The provider of the recommendations engine requires submission of HTML markup. This markup then gets rendered as a dynamic image by their platform. I needed a way to test this in a realistic way. Loading the markup in the browser wasn't going to work.

I had heard of a package called PhantomJS. So I googled, "how to generate screenshots with phantomjs". The first link was Screen Capture | PhantomJS. I knew I had nailed it. So I dug in.

Using rasterize.js I was able to do what I needed within a matter of minutes. The command I ended up using for the recommendation markup was something like this:

$ phantomjs rasterize.js email-recs-a.html email-recs-a.png 136px
$ phantomjs rasterize.js email-recs-b.html email-recs-b.png 100px

For the image shown above of my own site, I ran:

$ phantomjs rasterize.js http://127.0.0.1:4000/ sholsinger.com-as-seen-by-phantomjs.png 1440px*600px

PhantomJS can be used for UI / UX test case running and screenshot the page when the tests fail. There is a WebDriver for PhantomJS to integrate with Selenium. I can't wait to see what we can do with this type of stuff now and in the future.