Phantom js tutorial

Phantomjs is very useful tool for taking screenshot of the webpages.

To take a screenshot of the simple page webpage.

var phantom = require('phantom');

/***take screenshot of url**/
var options = {
    path: "/phantom/bin/"
};

phantom.create(function(ph) {
    ph.createPage(function(page) {
        page.open("http://www.google.com", function(status) {
            console.log("opened page? ", status);
            page.evaluate(function() {
                return document.title;
            }, function(result) {
                console.log('Page title is ' + result);
                page.render('myimage.png');
                ph.exit();
            });
        });
    });
}, options);

To take a screenshot of https ssl url webpages using Phantomjs

 Steps to follow

1 : Need to add "--ignore-ssl-errors=yes", "--ssl-protocol=any" properties in phantom create function like given below

/**Phatomjs takes screenshot https url page **/
var options = {
  path: "/phantom/bin/"
};


phantom.create("--ignore-ssl-errors=yes", "--ssl-protocol=any", function(ph) {
    ph.createPage(function(page) {
        page.open("https://localhost:8080", function(status) {
            console.log("opened page? ", status);
            page.evaluate(function() {
                return document.title;
            }, function(result) {
                console.log('Page title is ' + result);
                page.render('myimage.png');
                ph.exit();
            });
        });
    });
}, options);

To take a screenshot of url webpages with basic authentication or behind nginx reverse proxy server using Phantomjs

Steps to follow

1. Need to get basic authentication user name and password
2. Create basic authentication data object
         var authentication_data = {
          "Authorization": "Basic " + new Buffer("username:password" ).toString('base64')
       };
3. Add a auth data in custom header function
         page.set('customHeaders', authentication_data, function(err) {
            //Page open codes here
          });


/**Phatomjs takes screenshot when url page using basic authentication or behind nginx **/
var options = {
    path: "/phantom/bin/"
};

var username = "guidanz";
var password = "guidanz123";
var userpwd = username + ":" + password;

phantom.create(function(ph) {
    ph.createPage(function(page) {

        var authentication_data = {
            "Authorization": "Basic " + new Buffer(userpwd).toString('base64')
        };

        page.set('customHeaders', authentication_data, function(err) {
            page.open("https://localhost:8080", function(status) {
                console.log("opened page? ", status);
                page.evaluate(function() {
                    return document.title;
                }, function(result) {
                    console.log('Page title is ' + result);
                    page.render('myimage.png');
                    ph.exit();
                });
            });
        });
    });
}, options);

To take a screenshot of https url webpages with basic authentication or behind nginx reverse proxy server using Phantomjs

Steps to follow

1.Need to add "--ignore-ssl-errors=yes", "--ssl-protocol=any" properties in phantom create function         


/**Phatomjs takes screenshot when https url page using basic authentication or behind nginx  **/
var options = {
  path: "/phantom/bin/"
};


var username = "guidanz";
var password = "guidanz123";
var userpwd = username + ":" + password;

phantom.create("--ignore-ssl-errors=yes", "--ssl-protocol=any",function (ph) {
  ph.createPage(function (page) {

      var authentication_data = {
          "Authorization": "Basic " + new Buffer(userpwd).toString('base64')
       };

  page.set('customHeaders', authentication_data, function(err) {
    page.open("https://localhost:8080", function (status) {
      console.log("opened page? ", status);
      page.evaluate(function () { return document.title; }, function (result) {
        console.log('Page title is ' + result);
        page.render('myimage.png');
        ph.exit();
      });
    });
  });
  });
},options);