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.