Taking a screenshot of a single-page application using Javascript

Background

I am running UI tests in the application I am working on, simulating user input using JS. JS launches a bunch of mice and keyboard triggers sequentially on the iframe in which the application under test runs, and I can observe the interruptions. I would like to configure it so that it can periodically take screenshots of the current state.

Already reviewed

I know that this is a recurring question, I am asking again now if there have been any changes in this space recently.

I looked at http://html2canvas.hertzen.com/ to take screenshots, and although it works for the most part, it seems to be experiencing problems when there is a lot of use of CSS3 and webfonts.

I also cannot use the server-side method because I am working on a single-line base application and it does not save state based on the URL (for the most part).

I even looked at the specific mcilla property background:-moz-element(), but this does not work when the page you want is in the iframe.

I think the closest thing to what I need is phantomJS, which allows you to manipulate the page and take a screenshot. I would like to avoid this because I used the opportunity to see the test, since I run it otherwise.

, - -, ? (Firefox Chrome), . , , , , JS ( Firefox Chrome, ActiveX).

TL; DR Javascript HTML5 API , iframe. , .

+5
3

JS . html2canvas , , CSS3 webfonts.

phantomJS webfonts, - https://code.google.com/p/phantomjs/issues/detail?id=592

, , - http://arunoda.me/blog/phantomjs-webfonts-build.html

, , - (), . URL- google, , . , .

+3

, , . ( ).

http://usersnap.com

: Usersnap.

+4

Since everything is fine with a solution that requires a specific browser, you can create a Chrome extension and use the captureVisibleTab tab API .

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

Source: fooobar.com/questions/104002 / ...

Have a look at this answer to find out how to call an extension from JavaScript: fooobar.com/questions/1149290 / ...

+1
source