How to use phantomjs to take screen shot with dynamic data visualization

Question

When I follow this tutorial (http://phantomjs.org/screen-capture.html) to do a screen capturing, I got some problem about dynamic data visualization.

In that tutorial, it uses some code like:

var page = require('webpage').create();
page.open('http://localhost:8080/index.html', function() {
  page.render('screenshot.png');
  phantom.exit();
});

But this seems work only with static page. I wonder if I have some some user interaction and make that page changed(like mouse click change color etc.), how can I make that capturing which show current screen?

If phantomjs can not work in this way, could anyone suggest some other solutions?

Answer 1

Sure, just add the functionality you want after page.open() and before page.render().

page.open('http://localhost:8080/index.html', function() {

  /**
   * Add your events and actions here...
   * or call JS functions of the page itself...
   */

  page.evaluate(function() {

    /**
     * Inject a <style text/css> tag in the head,
     * which set the bgcolor
     */  

      var style = document.createElement('style'),
      text = document.createTextNode('body { background: red }');
      style.setAttribute('type', 'text/css');
      style.appendChild(text);
      document.head.insertBefore(style, document.head.firstChild);

  });

  page.render('screenshot.png');
  phantom.exit();
});

Keep in mind that you are working with Javascript here and that you can inject arbitrary helper scripts, like CasperJS or jQuery, and use their functionality on the loaded page.

For inspiration:

• PhantomJS; click an element
• How to retrieve the ajax data whose loading requires a mouse click with PhantomJS or other tools
  • see especially this answer for clicking, screenshot-after-click and ajax stuff: https://stackoverflow.com/a/18274644/1163786
• Browse a bit, then screenshot: https://stackoverflow.com/a/17506213/1163786