С момента своего выпуска PhantomJS стал одним из основных продуктов в работе многих инженеров JavaScript. В статье под названием «Безголовый WebKit и PhantomJS» Колин Ириг представил концепцию «Безголовый WebKit» и написал несколько слов о PhantomJS. С более чем 11 000 звезд на GitHub, PhantomJS стал инструментом для разработчиков, особенно когда имеешь дело с тестированием их кода. Тем не менее, есть еще много разработчиков, которые вынуждены воздерживаться от внедрения этого инструмента в своих проектах из-за недостатка знаний о том, что это такое.
Чтобы помочь восполнить этот пробел, в этой статье я объясню основные концепции PhantomJS и попытаюсь объяснить некоторые сложности, которые часто приводят разработчиков в замешательство. Прочитав эту статью, вы поймете, что такое PhantomJS и почему он считается таким мощным инструментом.
«Что без головы?»
На сайте PhantomJS технология объясняется следующим образом:
PhantomJS — это автономный сценарий WebKit с JavaScript API. Он имеет быструю и встроенную поддержку различных веб-стандартов: обработка DOM, селектор CSS, JSON, Canvas и SVG.
Очевидно, что те из вас, кто плохо знаком с PhantomJS, вероятно, столкнутся с некоторыми трудностями при рассмотрении ряда иностранных терминов. Это описание может ошеломить начинающих разработчиков и заставить новичков в технологиях поверить, что это только для очень опытных разработчиков. Тем не менее, я могу заверить вас, что эти концепции довольно просты для понимания. PhantomJS — это веб-браузер, который существует только в скриптах. Здесь нет графического интерфейса, а есть браузер без головы, который может автоматизировать различные процессы с помощью JavaScript.
Давайте посмотрим на некоторые преимущества, которые приходят с этим инструментом прямо из коробки. Прежде чем объяснять тему, я рекомендую вам установить PhantomJS на ваш компьютер, если у вас его еще нет. Его можно установить через npm
npm install phantomjs -g
После установки у вас будет доступ к команде phantomjs
Основные понятия PhantomJS
Давайте углубимся в детали его основных концепций.
Автоматизация страницы
PhantomJS позволяет разработчикам получать доступ к DOM API браузера. В конце концов, PhantomJS по-прежнему является браузером, даже если у него нет графического интерфейса. Разработчики могут написать код JavaScript, который будет оцениваться по указанной странице. Хотя это может показаться не очень важным, это позволяет нам автоматизировать любые виды взаимодействия с веб-страницей без необходимости открывать браузер (операция, которая сэкономит вам огромное количество времени). Это особенно полезно при использовании PhantomJS для запуска тестов, и вскоре мы узнаем об этом подробнее.
А пока давайте посмотрим на пример ниже с веб-сайта проекта. Он показывает, как можно использовать функциюvaluate для возврата различных объектов со страницы. В этом случае evaluate()evaluate()textContextmyagent Все, что нам нужно сделать, чтобы запустить этот пример, — запустить файл phantomjs userAgent.js
//userAgent.js
var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function(status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
var ua = page.evaluate(function() {
return document.getElementById('myagent').textContent;
});
console.log(ua);
}
phantom.exit();
});
Скриншот
Используя WebKit, PhantomJS позволяет отображать любой контент на веб-странице и сохранять его в виде изображения. Поэтому его можно использовать для автоматизации процесса захвата скриншотов веб-страниц, которые разработчики могут проанализировать, чтобы убедиться, что все выглядит хорошо. Эти изображения могут быть сохранены в нескольких форматах, таких как PNG, JPEG, PDF и GIF.
Код ниже взят из документации PhantomJS относительно захвата экрана . phantomjs github.js
//github.js
var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
PhantomJS также позволяет разработчикам настраивать размер этих скриншотов и указывать точные области, которые мы хотим захватить. Ниже мы можем увидеть пример этого, который является просто модифицированной версией нашего скрипта github.js
var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//the rest of the code is the same as the previous example
page.open('http://example.com/', function() {
page.render('github.png');
phantom.exit();
});
тестирование
PhantomJS помогает разработчикам автоматизировать процесс запуска тестов без необходимости какого-либо графического интерфейса. PhantomJS использует свой браузер без головы для обработки различных модульных тестов и использует командную строку, чтобы сообщить разработчикам, где они сталкиваются с ошибкой.
Нет сомнений в том, что PhantomJS прежде всего известен своим использованием в тестировании; Тем не менее, стоит отметить, что это не среда тестирования. В разработке PhantomJS используется для запуска различных сред тестирования, таких как Karma . Посетив страницу документации о тестировании без монитора, вы можете увидеть, какие фреймворки были созданы для поддержки PhantomJS, а также список фреймворков, к которым можно получить доступ через внешний тестер , такой как плагин PhantomJS Runner QUnit .
PhantomJS также используется в системах непрерывной интеграции. Для тех, кто не знаком с процессом непрерывной интеграции, он имеет дело со способом мониторинга вашего приложения. Разработчики могут интегрировать PhantomJS с CI-системами (такими как Travis CI ), чтобы запускать тесты для любого нового кода, добавляемого в проект, перед тем , как фактически нажать на код. В результате разработчики могут обнаруживать проблемы в коде, как только они возникают, и исправлять их, таким образом гарантируя, что в проект не будет вставлен сломанный код.
Мониторинг сети
Еще одной ключевой особенностью PhantomJS является его способность контролировать сетевое соединение. Как определено в документации:
Поскольку PhantomJS позволяет проверять сетевой трафик, он подходит для проведения различного анализа поведения и производительности сети.
Это означает, что PhantomJS может быть запрограммирован для сбора различных данных о производительности веб-страницы. В сочетании с PhantomJS YSlow может выводить результаты этих тестов, используя разные форматы (например, TAP). При реализации TAP обеспечивает связь между модульными тестами и проводкой тестирования, которая в этом случае будет PhantomJS. Кроме того, PhantomJS и YSlow используют протокол TAP в системах непрерывной интеграции и отслеживают производительность нового кода, добавляемого в проект. Таким образом, разработчики могут быть проинформированы о любом снижении производительности до того, как код будет запущен.
Выводы
Надеюсь, к настоящему времени у вас есть четкое понимание того, что такое PhantomJS, как он работает и насколько он действительно мощный. Если вы новичок в PhantomJS и тестируете в целом и хотите узнать больше об этих темах, вот список ресурсов, которые вы могли бы найти очень полезными для этой цели:
- Введение в PhantomJS и CasperJS
- Автоматизация с PhantomJS
- Web Scraping & Automation с PhantomJS и CasperJS
- Автоматизация с помощью jQuery, PhantomJS, на узле
Я надеюсь, вам понравилась эта статья. Если у вас есть вопросы или сомнения, не стесняйтесь комментировать в разделе ниже.