SuperPlan(11)Winner Seller Web Client - PhantomJS

SuperPlan(11)Winner Seller Web Client - PhantomJS

13. PhantomJS
13.1 Installation
Download MAC version from here http://phantomjs.org/download.html
And unzip the file to working directory.
>cd /Users/carl/tool/phantomjs-1.9.0-macosx

Create a soft link to the /opt directory
>sudo ln -s /Users/carl/tool/phantomjs-1.9.0-macosx /opt/phantomjs-1.9.0
>sudo ln -s /opt/phantomjs-1.9.0 /opt/phantomjs

Try to modify the path in the system
>vi ~/.profile
export PATH=/opt/phantomjs/bin:$PATH
>. ~/.profile

Verification the installation.
>phantomjs --version
1.9.0

13.2 Quick Start
Hello World Example
>vi hello.js
console.log('sillycat');
phantom.exit();

>phantomjs hello.js
sillycat

It is very important to call phantom.exit at some point in the script, otherwise PhantomJS will not be terminated at all.

Page Loading
>vi pageloading.js
var page = require('webpage').create();
page.open('http://www.google.com', function(){
    page.render('google.png');
    phantom.exit();
});

It is really magic for javascipt functional like that with built-in webkit.

It will visit the google homepage and render to a png file. It is like a screenshot of the page.

>vi loadspeed.js
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 time ' + t + ' msec');
    }
    phantom.exit();
});

>phantomjs loadspeed.js http://www.taobao.com

Code Evaluation
Show the Title of Document
>vi pagetitle.js
var page = require('webpage').create();
var system = require('system');
var url;

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

url = system.args[1];

page.open(url, function(status){
    var title = page.evaluate(function(){
     return document.title;
    });
    console.log('Page title is ' + title);
    phantom.exit();
});

>phantomjs showtitle.js http://www.digby.com

Net Log
>vi netlog.js
var page = require('webpage').create(),
    system = require('system'),
    address;

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

    page.onResourceRequested = function (req) {
        console.log('requested: ' + JSON.stringify(req, undefined, 4));
    };

    page.onResourceReceived = function (res) {
        console.log('received: ' + JSON.stringify(res, undefined, 4));
    };

    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('FAIL to load the address');
        }
        phantom.exit();
    });
}

>phantomjs netlog.js http://www.google.com

And there are a lot of examples for further reading.
https://github.com/ariya/phantomjs/wiki/Examples
https://github.com/ariya/phantomjs/wiki/Headless-Testing
https://github.com/ariya/phantomjs/wiki/Screen-Capture
https://github.com/ariya/phantomjs/wiki/Page-Automation
https://github.com/ariya/phantomjs/wiki/Network-Monitoring

14. Integration(Backbone + Require + Jasmine + Phantom + Grunt + Bootstrap)
First of all, get the sample project
>git clone https://github.com/ghiden/backbone-requirejs-jasmine-phantomjs-grunt-setup.git
>cd backbone-requirejs-jasmine-phantomjs-grunt-setup

It is not running, because the version of grunt. I need to speed more time on that.

come soon...

15. BackBone
come soon…

16. Jasmine
come soon...

References:
https://github.com/mohitjain/learning_basics_backbone
grunt sample
http://gruntjs.com/sample-gruntfile
integration
http://hdnrnzk.me/2013/01/10/backbone-requirejs-jasmine-phantomjs-and-grunt/
https://github.com/ghiden/backbone-requirejs-jasmine-phantomjs-grunt-setup
web page testing
http://www.webryan.net/2013/02/web-page-test-based-on-phontomjs/
phantom
http://phantomjs.org/
https://github.com/ariya/phantomjs/wiki/Quick-Start