Capturing a screen with a lazy loaded page using Node.js

Question

I am looking for a way to take a screenshot of a long web page every time it changes. I would like to use Node.js. My question is how to make a full page with images and save it to disk as an image file.

Most of the images on the web page load lazily. Therefore, I assume that you first need to scroll down the page before taking a screenshot.

I tried different tools:

• casperjs
• node-webshot
• phantomjs

They all seem too complicated, if not impossible, even for installation. I did not succeed with any of them.

casperjs seems like a really good choice, but I can't get it to work in Node.js. He continues to complain that casper.start () is not a valid method ...

I had the closest node -webshot , but I was not able to scroll down the page.

This is my code:

var webshot = require('webshot');

var options = {
    shotSize: {
        height: 'all',
        streamType: 'jpg'
    }
};

webshot('www.xx.com', 'xx.com.jpg', options, function(err) {
    // screen shot saved to 'xx.com.jpg'
});

By the way, I am developing on mac. The finished Node application will be on the linux server.

Any comments or impressions appreciated!

Answer 1

It is impossible to help with installing CasperJS, since it works on Windows, just using it npm install casperjs -g.

I created a simple script to take screenshots:

var casper = require('casper').create();
casper.options.viewportSize = {width: 1600, height: 950};
var wait_duration = 5000;
var url = 'http://stackoverflow.com/questions/33803790/capture-screen-shot-of-lazy-loaded-page-with-node-js';
console.log("Starting");
casper.start(url, function() {
    this.echo("Page loaded");
});

casper.then(function() {
    this.scrollToBottom();
    casper.wait(wait_duration, function() {
        casper.capture('screen.jpg');
        this.echo("Screen captured");
    });
});

casper.then(function() {
    this.echo("Exiting");
    this.exit();
});

casper.run();

The code is pretty simple:

• Download URL
• Scroll down
• (wait_duration)
• End

, !

Answer 2

node OSX, test.js node test.js CLI

var webshot = require('webshot');

var options = {
  streamType: 'png',
  windowSize: {
  width: 1024,
  height: 768
},
  shotSize: {
    width: 'all',
    height: 'all'
  }
};

webshot("blablabla.com","bla-image.png",options,(err) => {
  if(err){
    return console.log(err);
  }
  console.log('image succesfully');
});

Answer 3

Selenium, http://webdriver.io/. , , ,

• selenium, , Google Chrome
• , , webdriver.io
• , .

quick way to install selenium with nodejs -> https://github.com/vvo/selenium-standalone