PhantomJS — Webkit в консоли.

PhantomJS — Webkit в консоле

    Сегодня пойдет речь об еще одном интересном инструменте — PhantomJS. Что это такое и с чем его едят?
    PhantomJS — это браузер в консоле на основе Webkit, позволяющий посредством JavaScript производить управление им для серфинга  и автоматизация действий в сети Интернета. Распространяется данная программа под лицензией — BSD License. Официальный сайт — http://phantomjs.org/. К сожалению скудная документация и к тому же только на англ. языке находится у них на сайте — http://phantomjs.org/documentation/.     Скачать данную программу можно не посредственно с их сайта — скачать, либо отсюда.  После долгой разработки PhantomJS был опубликован Ariya Hidaya 23 января 2011 .  Как же собственно пользоваться данной программой?
    Для начала Вам необходимо написать программу по управлению PhantomJS на JavaScript, а уже затем передать ее в качестве аргумента исполняемого файла. Рассмотрим простейший пример по работе с PhantomJS:

1. Создаем файл — google.js и помещаем в него следующий текст программы:

// Инициализируем модуль по работе с закладкой браузера
var webPage = require('webpage');
// Создаем пустую закладку
var page = webPage.create();
// Открываем в закладке сайт: https://www.google.com/
page.open('https://www.google.com/', function(status)) {

// Выводим в консоль статус получения страницы с сайта ("success" при успехе и "fail")
console.log('Status: ' + status);
// Завершение работы программы PhantomJS
phantom.exit();
});

2. Затем запускаем PhantomJS с аргументом google.js:

phantomjs google.js

    При успешном выполнении скрипта и успешном ответе сайта — google.com, получаем следующий ответ:

Status: success

    Вот так достаточно просто можно ходить по сайтам и выводить в консоль результат работы. PhantomJS так же позволяет получить «снимок окна браузера» и сохранить его в файл. Для этого в наш скрипт необходимо добавить:

// Задаем размеры окна браузера (width - ширина, height - высота)
page.viewportSize = { width: 800, height: 600 };
// Создание снимка и сохранение в файл - screenshot.jpeg
page.render('screenshot.jpeg');

    Надо отметить, что в скрипте команды разделяются на две категории:

  • управление браузером
  • манипуляции DOM или содержимым HTML

    Выше мы использовали команды для управления PhantomJS, для манипуляции DOM используется следующая конструкция:

// помещаем данные в переменную - text, переданные из "песочницы" и полученные при выполнении анонимной функции
var text = page.evaluate(function(){

// Получение текста внутри тега - BODY
return document.querySelector("BODY").innerText;
});

    Еще одна возможность данной программы принимать дополнительные аргументы и передавать их скрипту:

// Инициализируем модуль - system
var system = require('system');
// Проверяем кол-во переданных аргументов (0 - имя самого скрипта)
if(system.args.length>1){

// Выводим первый аргумент после имени скрипта
console.log('Получен аргумент - '+system.args[1]);};

    Теперь рассмотрим некоторые сложности и способы решения этих проблем. Во-первых, возникает вопрос как передать нажатие клавиш в страничку Web браузера? Для этого используем следующее:

// Функция по определению размера элемента
function getSize(tag){

// Возвращаем данные из "песочницы" браузера
  return page.evaluate(function(tag){

// Находим элемент (тэг) в DOM
    var el = document.querySelector(tag);

// Получаем размеры этого элемента
    return el.getBoundingClientRect();
  }, tag);
};

// Функция по определению координат элемента и производит "клик" по этому элементу
function clkEl(tag){

// Устанавливаем значение по умолчанию
 var ret = false;
 try{

// Получаем размеры элемента
  var size = getSize(tag);

// Находим середину элемента по оси - Х
  var x = size.left+(size.right-size.left)/2;

// Находим середину элемента по оси - У
  var y = size.top+(size.bottom-size.top)/2;

// Производим "клик" по заданным координатам (середины элемента)
  page.sendEvent('click', x, y);

// Устанавливаем значение, что операция была выполнена
  ret = true;
 } catch(e){};
 
// Возвращаем признак успешности операции
 return ret;
}

// Функция по эмуляции ввода текста в поле ввода
function Input(text, tag){

// Задаем значение по умолчанию
var ret = false;
// Проверяем был ли передан селектор элемента DOM и выполняем пользовательскую функцию ("clkEl") щелчка по этому элементу
if(typeof(tag)!='undefined' && clkEl(tag)){

// Вводим текст в поле ввода
try{

  page.sendEvent('keypress', text);
  ret = true;

 } catch(e){};}
// Возвращаем успех или не успех выполнения операции
return ret;};

    Для того, что бы произвести ввод в поле ввода, вначале вызываем функцию «клика» по этому полю. В этой функции происходит поиск середины элемента и «клика» туда. Таким образом происходит эмуляция : «клика» и «ввода с клавиатуры».

    Пожалуй это все, на чем стоит обратить внимание. Для более подробной информацией о возможностях PhantomJS обращайтесь в раздел API и быстрый старт — на официальном сайте программы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *