Headless тестирование в браузере. Плюсы и минусы
И снова здравствуйте. Данная публикация приурочена к запуску курса «Автоматизация веб-тестирования», который стартует уже на этой неделе. Приятного прочтения!
Что такое Headless тестирование?
Headless тестирование представляет собой запуск в браузере теста на работоспособность каких-либо составляющих UI без отображения этого самого UI. Такое тестирование запускает скрипты в браузере, но не запускает и не показывает сам по себе UI.
Почему вам может понадобиться использовать Headless-браузеры? У этого подхода есть множество плюсов и минусов. Использование headless браузера может быть не очень полезным для серфинга в сети, но для автоматизации задач и тестирования он незаменим.
Почему стоит использовать headless browser?
Следовать за деньгами – это клише, однако я все же считаю, что это ключевой индикатор появления трендов, а следовательно того, на что обязательно надо обратить внимание. Например, Sauce Labs только что выпустила новый сервис под названием Sauce Headless, облачное решение для headless тестирования ваших решений.
Я знаю, что люди в Sause – это умные люди. Они не будут ничего разрабатывать просто так. Им необходимо получить обратную связь от пользователей, чтобы понять, что какой-либо функционал является необходимым.
Я уверен, что они не будут одиноки в своем стремлении развивать headless тестирование.
По мере того, как мы продвигаемся дальше по жизненному циклу разработки программного обеспечения, тестировщикам необходимо быстрее и быстрее выдавать обратную связь разработчикам. Один из способов этого добиться – это проводить быстрые проверки headless браузером.
Автоматизация в разработке программного обеспечения
Я всеми руками «за» автоматизацию, но автоматизация это не только про тестирование.
Это история про все аспекты, которые вы можете автоматизировать, чтобы сохранить время или усилия в жизненном цикле разработки программного обеспечения, контроля качества или тестирования, DevOps или установки. Headless браузеры являются одним из мощных средств автоматизации.
Headless браузеры быстрее обычных браузеров
Одно из важнейших отличий headless браузеров от обычных браузеров – это скорость их работы. Дело в том, что, когда вы загружаете страницу в браузере без GUI, ему не нужно тратить время на загрузку CSS, JavaScript и рендеринг HTML.
Я бы не сказал, что разница будет колоссальной, однако в некоторых случаях можно проследить увеличение скорости в два раза или даже в 15. Таким образом, если вам важна производительность, то headless браузер будет хорошим выбором.
Скрапинг с помощью headless браузера
Другое преимущество headless браузеров заключается в их способности собирать данные с веб-сайтов. Чтобы это сделать, вам не придется вручную запускать браузер. Вы можете использовать headless технологию, чтобы просто скрапить HTML. И рендерить весь браузер совершенно не обязательно.
Скажем, что в вашем кейсе требуется спортивная статистика или сравнение цен на различных сайтах.
Поскольку вам нужны лишь данные, не имеет смысла запускать полноценную сущность браузера и излишне нагружать машину, поскольку чем меньше нагрузка, тем быстрее вы получите результат. Это не обязательно может быть тестирование, просто вам нужно использовать правильный инструмент для работы. Я вообще считаю, что тестировщики зря недооценивают headless браузеры в своем деле.
Таким образом, если вам нужно получить данные с веб-страницы, ее не нужно открывать и давать дополнительную нагрузку, открывая браузер, весь необходимый функционал в состоянии обеспечить headless браузер.
Сохранить время разработчиков
Я знаю, что много разработчиков используют headless браузеры для модульного тестирования своих сайтов и приложений. Возможность использовать его из командной строки без ручного обновления или запуска браузера сохраняет им много времени и усилий. Например, Роб Фризел, автор PhantomJS CookBook в интервью TestTalks пояснил, почему его разработчики используют headless браузер PhantomJS:
«Несмотря на то, что сам по себе PhantomJS не является фреймворком для тестирования, однако он является полезным «лучиком света в угольной шахте», который придает уверенности; если все тесты пройдены, то вы становитесь гораздо увереннее в том, что ваш код действительно хорош.»
Мониторинг производительности с помощью скриптов Headless браузера
Еще один вариант использования headless браузера – это мониторинг производительности сетевых приложений.
Некоторые даже используют их для автоматизации рендеринга и получения скриншотов экрана веб-сайта, чтобы проводить тестирование разметки в автоматизированном стиле.
Я думаю, это одна из причин, по которой Google разработал новый headless Chrome API, который называется Puppeteer. Он нацелен в первую очередь на помощь разработчикам.
Основные идеи Headless браузер тестирования
Помимо предыдущей идеи, есть также и другие варианты использования headless браузеров, о которых я вам сейчас и расскажу:
Конечно же, бывают случаи, когда вам может захотеться использовать полноценный браузер, вместо headless браузера. Например:
Ответ на этот вопрос зависит от целей вашего тестирования.
С одной стороны, люди часто говорят: «Никогда не используйте headless браузеры. Реальный пользователь никогда не будет им пользоваться, так почему вы должны?» Хотя, с другой стороны, мы слышим: «Вам следует всегда использовать headless браузер, поскольку он быстрее, а быстрее в вопросах тестирования – значит, лучше»
Как мы знаем, у каждой позиции найдутся сторонники и найдется оппозиция, однако здесь ставится лишь вопрос выбора правильного инструменты для решения тех или иных задач.
Помните о том, что вы должны использовать оптимальный инструмент для работы и всегда спрашивать себя, как это затронет конечного пользователя, должны спрашивать себя в чем цель тестирования каждый раз, когда делаете выбор между этими двумя точками зрения.
По устоявшейся традиции ждем ваши комментарии, а также напоминаем о том, что уже через несколько часов пройдет день открытых дверей, где можно будет подробно узнать о нашем курсе.
Как обнаружить бота на сайте или определяем загрузку страницы с помощью Chrome Headless
характеру их поведения на сайте. И хотя она все еще находится в разработке, но вы уже можете начать использовать ее. Код библиотеки доступен на Github по ссылке. В настоящее время я тестирую новую технику обнаружения, не стесняйтесь оспаривать ее эффективность и целесообразность работы над ней, а также писать мне.
Что представляет собой headless браузер?
Headless браузер – это браузер без графического интерфейса, который используется для загрузки и обработки содержимого веб-страниц. Им можно программно управлять для автоматизации выполнения различных задач, таких как выполнение тестов или создания скриншотов веб-страниц.
Зачем может понадобится определять загрузку страницы headless браузером?
Помимо этих двух вполне безобидных вариантов использования, упомянутых нами выше, headless браузер также может использоваться для вредоносных целей. Наиболее частым случаем его такого использования это парсинг веб-страниц, увеличение количества показов рекламы или поиск уязвимостей на веб-сайте.
До сих пор одним из самых популярных headless браузеров был PhantomJS. И поскольку он разработан основе платформы Qt, то это подразумевает наличия большого числа отличий от популярных браузеров. Как будет показано в этом посте ниже, его можно обнаружить с помощью некоторых достаточно простых методов.
Начиная с версии 59, Google выпустила headless версию своего браузера Chrome. В отличие от PhantomJS, он основан на обычном Chrome, а не другой платформе, что затрудняет обнаружение его присутствия на сайте.
User agent
Следующий фрагмент кода, позволяет определить присутствие headless Chrome:
Тип пользовательского агента можно также определить из содержимого HTTP заголовков. Однако подменить его наименование злоумышленнику для обоих случаев простая тривиальная задача.
Plugins
Обращение к свойству navigator.plugins возвращает массив подключаемых в браузере плагинов. Обычно в Chrome мы находим плагины в любом случае подключаемые по умолчанию, например, такие как Chrome PDF viewer или Google Native Client. И напротив, в headlessрежиме, возвращаемый массив не содержит ни одного плагина.
Languages
WebGL
WebGL, предоставляет API для отображения результатов 3D-рендеринга на холсте HTML canvas. С помощью этого API можно запросить возможности графического процессора, а также его средств визуализации.
Тем не менее не все Chrome headless будут иметь одинаковые значения для рендера и средства визуализации. Другие сохраняют значения, которые также можно найти в headless версии браузера. Тем не менее, наличие значений Mesa Offscreen и Brian Paul явно указывают на использвание headless версии.
Browser features
Библиотека Modernizr позволяет проверить, присутствует ли в браузере широкий спектр новых возможностей HTML5 и CSS3. Единственная разница, которую мы можем обнаружить между Chrome и headless Chrome, заключается в том, что последний не имеет hairline функциональности, которая определяет поддержку hidpi для retina экранов устройств.
Отсутствующие изображения
И наконец, рассмотрим последний метод для обнаружения ботов, который является, с моей точки зрения, наиболее надежным. Он основан на вычислении браузером Chrome размера изображения, используемого в случае если изображение не может быть загружено.
В случае простого браузера Chrome изображение будет иметь ширину и высоту, которые зависят от масштаба окна браузера, но отличны от нуля. В headless Chrome изображение будет иметь ширину и высоту равную нулю.
Быстрый старт: начало работы с безголовым Chrome в Node.js
Часто в ходе нашей работы мы сталкиваемся с необходимостью снова и снова повторять действия пользователя, чтобы убедиться, что по мере внесения изменений на наш сайт ничего не сломалось. Для систематического и удобного решения этой задачи критически важными являются библиотеки, позволяющие создавать такие тесты. Познакомьтесь с безголовыми браузерами! Это инструменты командной строки, предоставляющие возможность программно создавать сценарии взаимодействия пользователя на сайте с последующей фиксацией их результатов для использования в тестах.
Многие из нас годами пользуются PhantomJS, CasperJS и другими инструментами. Но, как часто бывает с любовью, наши сердца могут быть завещаны другому. Начиная с Chrome 59 (60 для пользователей Windows), Chrome поставляется с собственным безголовым браузером. И хотя в настоящее время он не имеет поддержки для Selenium, он использует Chromium и движок Blink, то есть имитирует актуальный пользовательский интерфейс в Chrome.
Как всегда, код этой статьи можно найти в репозитории GitHub.
Запуск безголового Chrome из командной строки
На Linux всё ещё проще:
Вы также можете взаимодействовать с запрашиваемой страницей, например, для вывода document.body.innerHTML в stdout:
Если вас интересно большее количество возможностей, полный список параметров можно найти здесь.
Запуск безголового Chrome в Node.js
Однако данная статья не о запуске безголового Chrome в командной строке, а об его запуске в Node.js. Для этого нам понадобятся следующие модули:
Затем мы можем настроить нашу среду. Предполагается, что на вашем компьютере установлены Node.js и npm. Если это не так, ознакомьтесь с нашим учебным пособием.
После этого мы хотим создать сессию безголового Chrome. Начнем с создания файла index.js в нашей папке проекта:
Далее нам нужно выявить области ( domains), которые нам нужны для нашего тестирования:
Наиболее важный здесь объект Page : мы будем использовать его для доступа к содержимому пользовательского интерфейса. С его помощью мы укажем, куда мы переходим, с какими элементами взаимодействуем, где мы запускаем наши скрипты.
Изучение страницы
Идем дальше: делаем скриншоты
Запустите скрипт с помощью node index.js и вы получите примерно такой результат:
Вывод
Если вы пишете автоматические тесты, вы должны начать использовать безголовый Chrome. Хотя он по-прежнему не полностью интегрирован с такими инструментами, как Selenium, преимущество имитации движка рендеринга Chrome не следует недооценивать. Это лучший способ полностью воссоздать пользовательский опыт.
Я покину вас, оставив список для дальнейшего чтения:
Опыт 2 миллионов headless-сессий
Опубликовано 4 июня 2018 года в корпоративном блоге browserless
Рады сообщить, что недавно мы преодолели рубеж в два миллиона обслуженных сессий! Это миллионы сгенерированных скриншотов, напечатанных PDF и протестированных сайтов. Мы сделали почти всё, что вы можете придумать делать с headless-браузером.
Хотя приятно достичь такой вехи, но на пути оказалось явно много накладок и проблем. В связи с огромным объёмом полученного трафика хотелось бы сделать шаг назад и изложить общие рекомендации для запуска headless-браузеров (и puppeteer) в продакшне.
Вот некоторые советы.
1. Не используйте headless-браузер вообще
Изменчивое потребление ресурсов Headless Chrome
Никоим образом, если это вообще возможно, вообще не запускайте браузер в режиме headless. Особенно на той же инфраструктуре, что и ваше приложение (см. выше). Headless-браузер непредсказуем, прожорлив и размножается как мистер Мисикс из «Рика и Морти». Почти всё, что может сделать браузер (кроме интерполирования и запуска JavaScript), можно сделать с помощью простых инструментов Linux. Библиотеки Cheerio и другие предлагают элегантный Node API для извлечения данных HTTP-запросами и скрапинга, если такова ваша цель.
Например, вы можете забрать страницу (предполагая, что это некий HTML) и произвести скрапинг простыми командами вроде таких:
Очевидно, скрипт не охватывает все случаи использования, и если вы читаете данную статью, то скорее всего вам придётся использовать headless-браузер. Поэтому приступим.
2. Не запускайте headless-браузер без необходимости
Мы столкнулись с многочисленными пользователями, которые пытаются держать браузер запущенным, даже если он не используется (с открытыми соединениями). Хотя это может быть хорошей стратегией, чтобы ускорить запуск сеанса, но приведёт к краху через несколько часов. Во многом потому что браузеры любят кэшировать всё подряд и постепенно выедают память. Как только вы прекратили интенсивно использовать браузер — сразу закройте его!
В browserless мы обычно сами исправляем эту ошибку за пользователей, всегда устанавливая какой-то таймер на сессию и закрывая браузер при отключении WebSocket. Но если вы не используете наш сервис или резервный образ Docker, то обязательно убедитесь в каком-нибудь автоматическом закрытии браузера, потому что будет неприятно, когда всё упадёт посреди ночи.
3. Ваш друг page.evaluate
В Puppeteer есть много приятных методов вроде сохранения DOM-селекторов и прочего в окружении Node. Хотя это очень удобно, но вы легко можете выстрелить себе в ногу, если что-то на странице заставит мутировать этот узел DOM. Пусть это не так круто, но в реальности лучше всю работу на стороне браузера выполнять в контексте браузера. Обычно это означает загрузку page.evaulate для всей работы, которую надо сделать.
Например, вместо чего-то подобного (три действия async):
Лучше сделать так (одно действие async):
Другое преимущество обернуть действия в вызов evaluate — это переносимость: этот код можно для проверки запустить в браузере вместо того, чтобы пытаться переписать код Node. Конечно, всегда рекомендуется использовать отладчик для сокращения времени разработки.
4. Распараллеливайте браузеры, а не веб-страницы
Лучше сделайте так:
5. Очередь и ограничение параллельной работы
Лучший и самый простой способ — взять наш образ Docker и запустить его с необходимыми параметрами:
6. Не забывайте про page.waitForNavigation
Например, такой console.log не срабатывает в одном месте (см. демо):
7. Используйте Docker для всего необходимого
А чтобы избежать процессов-зомби (обычное дело в Chrome), то лучше для правильного запуска использовать что-то вроде dumb-init:
Если хотите узнать больше, взгляните на наш Dockerfile.
8. Помните о двух разных средах выполнения
Полезно помнить, что здесь две среды выполнения JavaScript (Node и браузер). Это отлично для разделения задач, но неизбежно происходит путаница, потому что некоторые методы потребуют явной передачи ссылок вместо замыканий или подъёмов (hoistings).
Таким образом, вместо ссылки на selector через замыкания:
