$ phantomjs
czyli webkitowa przeglądarka w konsoli

Maciej Brencz, Wikia Inc.
AKAI, 8 maja 2012

Szczypta historii: przeglądarka w konsoli kiedyś

$ lynx akai.org.pl

phantomjs: z czym to się je?

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, Canvas, SVG. phantomjs.org

phantomjs: z czym to się je?

phantomjs: krok pierwszy, czyli...

Instalacja

Nasz pierwszy skrypt 

var page = require('webpage').create(),
    url = "http://akai.org.pl";

page.open(url, function (status) {
    console.log(url + " loaded");

    // screenshot do pliku
    page.render("akai.png");

    // zakończ skrypt
    phantom.exit();
});

$ phantomjs example-screeshot.js

Przeglądarko, powiedz... 

var page = require('webpage').create(),
    url = "http://akai.org.pl";

page.open(url, function (status) {
    var title = page.evaluate(function() {
        // jesteśmy w kontekście otwartej strony
        return document.title;
    });
    console.log("Page title: " + title);
    console.log("HTML elements: " + page.evaluate(function() {
        return document.getElementsByTagName('*').length;
    }));
    phantom.exit();
});

$ phantomjs example-pagetitle.js
Page title: AKAI
HTML elements: 175

Detekcja błędów 

var page = require('webpage').create(),
    url = "http://akai.org.pl";

page.onConsoleMessage = function(msg) {
    console.log('LOG: ' + msg);
};
page.onError = function(msg, trace) {
    console.log('ERROR: ' + msg);
    trace.forEach(function(item) {
        console.log('  ', item.file, ':', item.line);
    });
};
page.open(url, function (status) {phantom.exit()});

$ phantomjs example-error.js
ERROR: ReferenceError: Can't find variable: Cufon
   http://akai.org.pl/ : 18
LOG: Please specify a ShareThis Publisher Key
For help, contact support@sharethis.com

phantomjs jako packet sniffer 

var page = require('webpage').create(),
    url = "http://akai.org.pl",
    requests = 0;

// żądanie HTTP zostało wysłane
page.onResourceRequested = function (request) {
    console.log('Request ' + JSON.stringify(request, undefined, 4));
};
// otrzymano odpowiedź od serwera HTTP
page.onResourceReceived = function (response) {
    console.log('Receive ' + JSON.stringify(response, undefined, 4));
    requests++; // zliczajmy wszystkie zapytania HTTP
};
page.open(url, function (status) {
    console.log("Number of request: " + requests);
    phantom.exit();
});

$ phantomjs example-netsniff.js
Number of request: 143

Kręcimy film 

var page = require('webpage').create(),
    // Another World
    url = "http://www.megidish.net/awjs/";

page.viewportSize = {width: 800, height: 400};

page.open(url, function (status) {
    var f = 0;

    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", function() {
        page.evaluate(function() {
            $('p').remove();
        });
    });

    setInterval(function() {
        page.render('movie/movie-' + (f < 9 ? ('0' + f) : f) + '.png');
        console.log('Frame #' + f);

        f++;
        if (f > 80) {
            phantom.exit();
        }
    }, 250);
});

$ phantomjs example-movie.js

Monitorowanie wydajności stron WWW

PerformanceMetrics

phantomjs: o czym należy pamiętać

phantomjs: potencjalne zastosowania

phantomjs.org

Pytania?

http://slides.wikia.net/akai/20120508/phantomjs