Автоматизация браузеров обеспечивает множество преимуществ, включая более быстрое выполнение повторяющихся задач, возможность распараллеливания рабочих нагрузок и улучшенное тестовое покрытие вашего веб-сайта. Недавно Google анонсировала Puppeteer, новый инструмент для автоматизации браузера Chrome.

Примеры кода включены, чтобы вы могли следовать им. Если вы уже знакомы с автоматизацией браузера, смело переходите к разделу «Puppeteer: практический пример», который включает в себя более продвинутое использование Puppeteer.

Здесь мы рассмотрим:

  1. Краткое введение в автоматизацию браузера: как это обычно делается и варианты использования.
  2. Что такое безголовый браузер: чем он отличается от безголового.
  3. Chrome Headless: команда для запуска Chrome в автономной среде.
  4. Puppeteer: Программное управление Chrome.
  5. Кукловод: практический пример (включая код).
  6. Firefox Headless: обновление о поддержке безголового режима.
  7. Вывод: Резюме

Краткое введение в автоматизацию браузера, включая варианты использования

Автоматизация браузера позволяет программно управлять браузером. Например, вы можете сделать некоторые из следующих действий:

  • Следите за обновлениями цен на продукты в интернет-магазине, чтобы определить лучшее время для покупки определенного продукта.
  • Войдите в свою учетную запись онлайн-банкинга, чтобы периодически загружать выписки.
  • Напишите функциональные тесты или приемочные тесты для веб-сайта, который вы разрабатываете, чтобы проверить функциональность пользователя.
  • Заполните длинную и утомительную HTML-форму, которая обычно требует повторного ручного ввода.

Все современные браузеры могут быть автоматизированы, включая Chrome, Firefox, Edge и Safari. Вы также можете автоматизировать мобильные браузеры. В этом посте будет кратко рассказано о Chrome и Firefox.

В большинстве случаев для программного управления браузером следует использовать программное обеспечение для автоматизации браузера высокого уровня. Одним из популярных вариантов является WebDriver, который мы используем для автоматизации функционального тестирования с помощью Intern.

Скорее всего, вы читаете эту статью в браузере. Обратите внимание, что в браузере есть вспомогательные элементы для вашего использования, такие как строка меню, адресная строка и панель инструментов. Эти элементы являются частью GUI (графического пользовательского интерфейса). Безголовый браузер не имеет графического интерфейса и визуальных компонентов. Он работает как процесс и раскрывает механизм, обеспечивающий внешнее взаимодействие с исходным кодом или другими программами.

Чтобы запустить версию Chrome (ночные сборки Canary) в автономной среде, вы можете использовать одну из следующих команд:

Mac OS X:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --headless --remote-debugging-port=9222 --disable-gpu

Линукс:

google-chrome --headless --remote-debugging-port=9222 --disable-gpu

Окна:

chrome.exe --headless --remote-debugging-port=9222 --disable-gpu

Флаг удаленной отладки позволяет вам использовать DevTools для удаленной проверки вкладки безголового браузера.

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

Чтобы программно взаимодействовать с этой безголовой версией Chrome, вы можете отправлять команды по протоколу Chrome DevTools. Используя протокол DevTools, вы можете делать почти все, что делаете в своем обычном браузере DevTools. Вот пример связи по протоколу DevTools через WebSockets для получения URL-адреса текущей страницы с проверяемой страницы:

// Gist: https://gist.github.com/umaar/ebc170660f15aa894fa4880f4b76e77d
// You would use your own URL here
const devtools = new WebSocket('ws://localhost:9222/devtools/page/69990451-aaab-4ef8-87b1-ea77b8101b2a');
devtools.onmessage = ({data}) => {
const {result: {result: {value}}} = JSON.parse(data);
console.log('WebSocket Message Received: ', value)
};
devtools.send(JSON.stringify({
id: 1,
method: 'Runtime.evaluate',
params: {
expression: `'The current URL is: ' + location.href`
}
}));

Как видите, с учетом того, что он делает, приведенный выше код низкоуровневый и многословный. Кукловод предоставляет более лаконичный API для автоматизации операций браузера.

Кукольник

Код автоматизации, который вы пишете с помощью API Puppeteer, на самом деле выполняет вызовы через API протокола DevTools, что и было рассмотрено в предыдущем разделе. Вместо создания полезной нагрузки WebSocket вы можете вызывать такие API, как:

page.goto(‘https://example.com‘)

Как показано в документации Puppeteer, вы можете запустить Puppeteer из кода Node.js следующим образом:

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
browser.close();
})();

Пример выше делает следующее:

  1. Запускает Хром.
  2. Открывает новую вкладку.
  3. Переходит на сайт example.com.
  4. Делает скриншот текущей страницы.
  5. Закрывает браузер.

Puppeteer включает в себя примеры кода и документацию по API.

Кукловод: практический пример

Вы могли бы назвать предыдущий пример (снимок экрана страницы) Hello world автоматизации браузера! Полезно иметь более практичный пример или пример, который использует более широкий набор API, для демонстрационных целей.

Контактная страница SitePen включает контактную форму. После некоторой отладки с помощью DevTools обратите внимание, что поля формы настраиваются из CMS (системы управления контентом), сами поля создаются после запроса JavaScript на стороне клиента.

Во-первых, рассмотрим следующий гипотетический сценарий: у нас есть несколько тестов автоматизации браузера, которые переходят на страницу контактов SitePen, заполняют поля формы и отправляют форму. Прежде чем мы обсудим решение, давайте разберемся с потенциальными проблемами.

В сценариях автоматизации браузера, какие потенциальные проблемы могут возникнуть при разрешении загрузки сторонних ресурсов?

Совет: обратите внимание, что некоторые из этих проблем не являются уникальными для сторонних запросов. Представьте, что ваш веб-сайт получает комментарии к сообщению в блоге с вашего собственного сервера через Ajax. Подумайте, какие проблемы, перечисленные ниже, также применимы к этому примеру.

Скорость

Автоматизация браузера общеизвестно медленная. Часто из-за различных факторов, таких как жесткий сон, а не опрос изменений, сторонние скрипты, которые медленно загружаются и медленно изменяют страницу (чего обычно ждут системы автоматизации), и многие другие аспекты.

В этом примере: Скорость сети невелика.

Как вы могли заметить, сама форма появилась на отметке 1,58 секунды, то есть почти через полсекунды после первой отрисовки. Вы можете подумать, что экономия нескольких сотен миллисекунд не имеет большого значения, но учтите, что многие компании часто запускают большие наборы тестов автоматизации браузера в течение дня по мере изменения кодовой базы. Секунды складываются!

Надежность

Сторонние сервисы могут:

  • Спуститесь на техническое обслуживание.
  • Неожиданно возвращать контрольные страницы (например, капчи), когда они обнаруживают высокий трафик с одного и того же IP-адреса.
  • Берите деньги за более высокий, чем обычно, доступ к API.

Эти проблемы могут усложнить работу с настройкой автоматизации вашего браузера.

Последовательность:

Представьте, что ваши скрипты автоматизации нацелены на элементы на странице с помощью селекторов CSS. Если эти же элементы могут появляться или исчезать в зависимости от того, что возвращается из CMS, ваши сценарии автоматизации, скорее всего, потерпят неудачу. С динамическими данными (а не со статическими) может быть сложно работать в сценариях автоматизации, поскольку ваш код должен учитывать несколько сценариев. Это также может увеличить сложность вашей кодовой базы автоматизации.

Обратите внимание, что скорость, надежность и согласованность — это три потенциальные проблемы, которые вы можете решить, подделывая ресурсы сторонним службам. Как правило, ваша цель — манипулировать ресурсом в соответствии с вашим конкретным вариантом использования.

Обратите внимание, что метки полей формы содержат текст «перехвачено».

Вы можете найти полный пример кода, который создает скриншот выше, на GitHub. Пример кода на GitHub делает следующее:

  • Запускает статический веб-сервер для обслуживания фиктивного файла.
  • Включает перехват запросов через Puppeteer.
  • Переход на страницу контактов SitePen.
  • Отслеживает все сетевые запросы.
  • Перехватывает сетевой запрос, который заполняет контактную форму.
  • Направляет запрос на статический ресурс в файловой системе.

Безголовый Firefox

Firefox также предлагает безголовый режим. Кроме того, Mozilla предлагает примеры кода JavaScript и Java для того, чтобы использовать автономный режим Firefox. На момент написания этой статьи Firefox Headless поддерживается только в Windows, и в ближайшем будущем планируется поддержка других платформ. Здесь есть руководство по подключению WebDriver к безголовой версии Firefox.

Вывод

Мы рассмотрели несколько тем:

  • Безголовые браузеры. Chrome и Firefox могут работать без графического интерфейса. Есть больше возможностей для других браузеров (например, Safari и Edge)
  • Протокол DevTools. Предлагает API для управления Chrome через WebSockets. Мы увидели, как можно управлять удаленным браузером с веб-страницы на стороне клиента, используя Интерфейс WebSocket.
  • Chrome Headless: Chrome может работать в безголовой среде. Нативная поддержка для этого появилась недавно.
  • Puppeteer: это программное обеспечение предлагает высокоуровневый API для управления браузером Chrome по протоколу DevTools.
  • Перехват сети с помощью Puppeteer. Чтобы продемонстрировать более интересный вариант использования, мы увидели, как изменять сетевые запросы на лету, чтобы обеспечить стабильную и более быструю настройку автоматизации.
  • Firefox Headless: Firefox также может работать в безголовой среде. Нативная поддержка для этого появилась недавно.

Используя эти методы для автоматизации браузера, мы можем разрабатывать решения для решения проблем, будь то обеспечение качества, повышение производительности или агрегирование данных.

Следующие шаги

Вам нужна помощь в создании стратегии тестирования для вашего следующего проекта? Свяжитесь с нами, чтобы обсудить, как мы можем помочь!

Получите помощь от SitePen On-Demand Development, нашего быстрого и эффективного решения проблем разработки JavaScript любого масштаба.

Есть вопрос? Мы здесь, чтобы помочь! Свяжитесь с нами и давайте посмотрим, как мы можем работать вместе.

Первоначально опубликовано на www.sitepen.com 4 октября 2017 г.