Understanding and testing JS with PhantomJS

Phantomjs a more accurate phantomjs browser is a "headless browser". Different from the normal browser or use us as Chrome, Firefox ... we will carry out direct operations via the website interface is displayed by the browser ... then with phantomjs we will interact with the website through the statement that you are not interested in the interface. Phantomjs normally is used to test:

• Testing the logic operation of the website not via interface
• Check the website's performance

Now we take a look about advantages and disadvantages with PhantomJS:

Advantages of PhantomJS Here are some advantages of PhantomJs:

• Doesn’t need to be integrated with a third-party service
• Is capable of executing multiple test cases within a record time period
• Serves as a self-contained command-line application
• Consumes fewer resources
• Useful in case of smoke testing the web apps. That means, you can use PhantomJS for testing app as part of app development workflow or in the un-interrupted integration server

Disadvantages of PhantomJS During PhantomJS have a lots of advantage points but it also have disadvantages:

• Running UI Testing for web applications that need to run on multiple web browsers doesn’t yield maximum test coverage
• Doesn’t include an entire ecosystem
• PhantomJS serves as a single version of WebKit- not a good option for web app testers

Installing PhantomJS is actually simple: it's just a single binary that you download and stick in your terminal path. On the PhantomJS download page, choose your operating system and download the correct package. Hello world Let's start with a simple example. Let's create a new file that contains the following the lines below:

console.log('Hello, world!');
phantom.exit();

Save it as exmple1.js and then run it from the command line in terminal.

phantomjs hello.js The output is:

Hello, world!

Page Loading

A web page can be loaded, analyzed, and rendered by creating a web page object. The following loadspeed.js script loads a specified URL (do not forget the http protocol) and measures the time it takes to load it.

var page = require('webpage').create(),
  system = require('system'),
  t, address;

if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the address');
  } else {
    t = Date.now() - t;
    console.log('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

Run the script with the command:

phantomjs loadspeed.js http://www.google.com It outputs something like:

Loading http://www.google.com Loading time 897 msec(my PC)

Screen Capture

Although not directly see the website's interface but can capture photos phantomjs interface through which we can test the interface of the website. Following the small demo of the access and photograph phantomjs website. Create new file screen_capture.js with the following code:

var webpage = require('webpage'),
       page = webpage.create(),
    system  = require('system'),
     webadd = null,
   fileName = ';
if (system.args.length <= 1) {
      console.log('Enter web url');
      phantom.exit();
    }
     webadd = system.args[1];
   fileName = system.args[2];
   // This is the code that captures the website
page.open(webadd,function(status){
if (status === "success") {
    page.render(fileName +'.jpg');
    console.log('Image render is done!');
    phantom.exit();
}
});

and run cmd : phantomjs screen_capture.js http://google.com googleScreenShoot you will get photo of wesite google with name googleScreenShoot As mentioned above, the simulator can phantomjs browser on different environments such as desktop, mobile ... Here will be a demo on the emulator on the iPhone browser Create screen_capture.js file with the following code:

var webpage = require('webpage'),
       page = webpage.create(),
    system  = require('system'),
     webadd = null,
   fileName = ';
if (system.args.length <= 1) {
      console.log('Enter web url');
      phantom.exit();
    }
     webadd = system.args[1];
   fileName = system.args[2];
   //This is Iphone simulator
   page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3";
   // This is the code that captures the website
page.open(webadd,function(status){
if (status === "success") {
    page.render(fileName +'.jpg');
    console.log('iPhone Screen captures is done!');
    phantom.exit();
}
});

and run cmd : phantomjs screen_capture.js http://google.com googleScreenShoot you will get photo of wesite google with name googleScreenShoot with screen as Iphone. Example above I just to show you how phantomjs work, to get more understanding you can visit PhantomJS website.