Taking a screenshot of a single page app in with Javascript

Question

Background

I run UI tests on an application I work on by simulating user input with JS. The JS runs a bunch of mouse and keyboard triggers in sequence on an iframe in which the tested app is running and I can watch for breaks. I'd like to set it up so that it can take screenshots of the current state periodically.

Already Considered

I know this is a duplicate question, I'm asking this again now in case there have been any developments in this space recently.

I've looked at http://html2canvas.hertzen.com/ to take screenshots, and while it works for the most part it seems to have trouble when there's a lot of CSS3 and webfonts usage.

I'm also not free to use a server side method because I'm working on a single page backbone app and it doesn't store state based on URLs (for the most part).

I even had a look at the mozilla specific background:-moz-element() property, but that doesn't work when the page you want is in an iframe.

I think what comes closest to what I need is phantomJS which allows you to manipulate the page and take a screenshot. I'd like to avoid this because I'd use the ability to see the test as I'm running it otherwise.

So, does anyone know of anything I could use here? It can even be exclusive to one browser (Firefox or Chrome) as long as it runs on windows. It doesn't need to run on all clients, just on mine so it's ok even if I have to setup a special environment as long as the screenshots can be saved via JS (only on Firefox or Chrome though, so no ActiveX).

TL;DR Need Javascript or HTML5 API to save screenshots of an app running in an iframe. No paid solutions please.

Answer 1

Went with phantomJS in the end. While html2canvas is great for basic usage, it doesn't come through too well when you have a lot of CSS3 and webfonts.

The stable version of phantomJS has some documented problems with webfonts though - https://code.google.com/p/phantomjs/issues/detail?id=592

Thankfully though this user has built a version with font support that works out of the box - http://arunoda.me/blog/phantomjs-webfonts-build.html

Also, it's worth noting that if you're serving web fonts from your own server (locally), it might still fail. Switching to the google hosted url will usually fix this. Might be something to do with the content-type.

Answer 2

It looks like that you need exactly what we have developed. We can create total accurate screenshot from a single page app (including the state).

Take a look at http://usersnap.com

full disclosure: I'm the co-founder of Usersnap.

Answer 3

Since you're OK with a solution that requires a specific browser, you could make a Chrome extension, and use the Tab API's captureVisibleTab method.

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

Source: https://stackoverflow.com/a/4574782/2972

Look at this answer, for information on how to invoke the extension from JavaScript: https://stackoverflow.com/a/8713547/2972