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.
Commentscomments powered by Disqus