воскресенье, 25 ноября 2012 г.

Phantomjs. Кратко о webkit консольном браузере.

Отличный браузер, который дает нам дополнительные возможности в программной навигации по вебу. А также позволяет реализовать unit-тестирование javaScript, делать скриншоты страниц и другое. Это браузер позволяет нам работать с DOM так же буд-то мы находимся в самом обычном браузере с GUI. Краткая информация:
У меня лично были некоторые трудности с установкой из исходников. Ах, да совсем забыл Ubuntu :). Значит были сложности, т.к. требуется qt и еще ряд зависимостей, если кто-то хочет попробовать собрать, то подробная инструкция по этому вопросу есть на сайте продукта. Также я поставил изначально из пакетов:
sudo aptitude install phantomjs
Но, как известно, стандартные пакеты славятся отсталостью версий. Как же быть если пакеты в репозиторые старые, а из сырцов поставить не вышло? На официальном сайте есть бинарники. Там вы найдете бинарники для популярных ОС.
Как пользоваться. Очень просто, куда вы распаковали скачанный архив, там находите папку bin а в ней phantomjs, его можно вынести в удобное для вас место. Итак приступим.
Первый самый простой скрипт (hello.js) для нашего phantomjs.
console.log('Hello Phantom!!!');
Для запуска выполним
phantomjs hello.js
Получим сообщение в консоль. Ну, это по-моему очевидно. Далее чуть поинтереснее. Пример получения скриншота посещаемой страницы:

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.render('google.png');
    phantom.exit();
});
 
Тут мы сначала подключаем необходимый нам модуль webpage. А затем открывает необходимую нам страницу, после успешной загрузки которой мы вызовим колбэк функцию. В этой функции мы сохраняем (рендерим) скриншот страницы в файл google.png и закрываем phantomjs.

Ниже приводится пример скрипта, который сможет подсчитать скорость загрузки страницы и вывести значение в консоль.

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

if (system.args.length === 1) {
    console.log('Usage: loadspeed.js ');
    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();
});

Запустив этот скрипт и передав в качестве параметра Web-адрес, мы получим ожидаемый результат, т. е. скорость загрузки страницы.

Гораздо больше примеров есть на официальном ресурсе, который указан вначале статьи. Штука удобная действительно. Я написал обертку на PHP для управления этим браузером, но она "дико" сырая, умеет выполнять только одно, вызывать обработчик phantomjs и делать скриншот в файл. Как будет что показать обязательно обновлю статью и укажу ссылочку на Git хаб.