048 PhantomJS

21 Jul 2013

PhantomJS is a headless Webkit. We can make use of it to do some website testing, screen capture, page automating and network monitoring. We will explore all these features of PhantomJS in this episode.

Download video: mp4

Sample code: Github

Version: 1.9.1

Background on PhantomJS

  1. Main website
  2. Github and its Wiki
  3. What is a headless browser - some examples?
  4. API Reference
    1. webpage
    2. system
    3. filesystem
    4. webserver
  5. Examples

Things to learn with PhantomJS

1. install

  1. download
  2. transfer the file bin/phantomjs to an appropriate folder which is in your path

    phantomjs-1.9.1-macosx/bin/phantomjs --version
    
  3. go to the command line and query it

    phantomjs --version
    phantomjs --help
    
  4. start a REPL

    phantomjs
    > console.log('hello');
    
  5. hello world with quick start with Hello World. Create a file 1-hello.js

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

    in command line

    phantomjs 1-hello.js
    

2. take screenshot

  1. new file 2-screenshot.js

    var page = require('webpage').create();
    
    page.open('http://google.com/', function () {
      page.render('google.png');
      phantom.exit();
    });
    
  2. run in command line and check that a new image google.png is created

    phantomjs 2-screenshot.jpg
    

3. load time

  1. new file 3-speed.js

    var page = require('webpage').create(),
      t = Date.now();
    
    page.open('http://flickr.com/', function (status) {
      t = Date.now() - t;
      console.log('Loading time ' + t + ' msec');
    
      phantom.exit();
    });
    
  2. integrate with variable for url, command line arguments, checking for error, etc - example

4. API - webpage

  1. create folder project/index.html

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Hello PhantomJS</title>
    </head>
    <body>
    
    <h1>I'm exploring PhantomJS!</h1>
    <img src="phantomjs-logo.png" alt="PhantomJS Logo">
    
    <button id="color">change color</button>
    
    <script>
    document.getElementById("color").addEventListener("click", function( event ) {
      document.body.style.backgroundColor = 'lightblue';
    }, false);
    </script>
    
    </body>
    </html>
    
  2. new file project.js. explore

    • console Testing + url
    • console log title
    • onConsole
    • render before.jpg
    • bgColor white
    • includeJS and click + after.jpg
    • require('fs') + profect files
    • before.jpg and after.jpg sizes
    var page = require('webpage').create(),
      fs = require('fs'),
      url = 'http://localhost:8000',
      path = '/Users/sayanee/Desktop/phantomjs';
    
    page.viewportSize = { width: 1200, height: 780 };
    
    console.log('Testing on ' + url);
    console.log('Project files: ' + fs.list(path));
    
    page.onConsoleMessage = function (msg) {
      console.log('Page title: ' + msg);
    };
    
    page.open(url, function (status) {
    
      page.evaluate(function () {
        document.body.bgColor = 'white';
        console.log('<title>' + document.title + '</title>');
      });
    
      page.render('before.jpg');
      console.log('before.jpg [' + fs.size(path + '/before.jpg') + ' bytes]');
    
      page.includeJs("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js", function() {
    
        page.evaluate(function() {
          $("#color").click();
        });
        page.render('after.jpg');
        console.log('after.jpg [' + fs.size(path + '/after.jpg') + ' bytes]');
    
        phantom.exit();
      });
    
    });
    

More Resources on PhantomJS

  1. SlimerJS for Gecko
  2. PhantomJS ecosystem
  3. CasperJS - navigation scripting & testing utility
  4. More Tutorial

Build Link of this episode

JavaScript Jabber podcast