Headless браузер что это
Обновлено: 02.07.2024
Используйте параметр headless_browser для запуска бота с использованием интерфейса командной строки. Этот способ отлично работает при запуске сценариев на локальном компьютере или для развертывания на сервере. Нет графического интерфейса GUI и соответственно меньше нагрузка на процессор. Пример.
Предупреждение: некоторые пользователи не рекомендуют использовать эту функцию, поскольку Instagram может распознать работу браузера в headless режиме !
(Альтернативный вариант) Если используемый вами веб-драйвер не поддерживает headless режим (или работа в headless режиме становится очень заметна), вы можете использовать параметр nogui , который отображает окно вне поля зрения экрана. Имейте в виду, что этому параметру тем не менее не хватает поддержки и простоты использования, он поддерживается только операционными системами на базе Linux (или теми, у которых есть программное обеспечение для отображения Xvfb, Xephyr и Xvnc).
Обход системы обнаружения подозрительных попыток входа
InstaPy автоматически определяет, активен ли запрос кода безопасности Security Code Challenge, и если да, то попросит ввести его через терминал.
Код безопасности из Instagram отправляется на вашу электронную почту или по SMS , электронная почта является вариантом выбранным по умолчанию, но вы также можете выбрать вариант с SMS, используя следующие значения параметров: bypass_security_challenge_using='sms' или bypass_security_challenge_using='email' .
Двухфакторная аутентификация
InstaPy автоматически определяет, защищена ли учетная запись с помощью двухфакторной аутентификации. Если да, то пользователю InstaPy необходимо передать в конструктор, текущего сеанса работы коды безопасности. Для корректной работы требуется ввести хотя бы один код.
Коды безопасности можно найти в Instagram по следующему пути: Settings -> Security ->Two-Factor-Authentication->Backup Codes.
Используем прокси
Вы можете использовать InstaPy через прокси, указав адрес сервера, порт и/или учетные данные для аутентификации на прокси сервере. Этот способ работает как с опцией headless_browser , так и без нее.
Пример простой настройки прокси:
Настройка прокси с примером аутентификации:
Проверяем состояние интернет-соединения
InstaPy может выполнить несколько типов проверок соединения, включая состояние вашего соединения, а также доступность серверов Instagram. Эти проверки иногда не проходят, потому что Instapy использует сторонние сервисы для их выполнения. Для этого вы можете переопределить настройки проверок с помощью опции want_check_browser .
Значение want_check_browser по умолчанию принято False , но вы можете установить его в True при запуске текущего сеанса работы. Рекомендуем сделать это, если вы хотите осуществлять дополнительные проверки подключения к сети и серверам Instagram .
Запуск сеансов в отдельных потоках
Если вы запускаете InstaPy в отдельных потоках и получите сгенерированное исключение вида ValueError: signal only works in main thread , то вам необходимо корректно завершить сеанс работы. Вы можете сделать это двумя способами.
Завершить сеанс в контексте smart_run :
Завершить сеанс вызвав метод end :
Выбираем версию браузера
Если, например, в вашей системе установлено несколько версий Firefox или если вы используете его portable версию, вы можете указать InstaPy использовать определенную версию браузера с помощью опции browser_executable_path при инициализации экземпляра класса.
Пример с операционной системой Windows (с соответствующими путями также будет работать в Linux и macOS).
Часто в ходе нашей работы мы сталкиваемся с необходимостью снова и снова повторять действия пользователя, чтобы убедиться, что по мере внесения изменений на наш сайт ничего не сломалось. Для систематического и удобного решения этой задачи критически важными являются библиотеки, позволяющие создавать такие тесты. Познакомьтесь с безголовыми браузерами! Это инструменты командной строки, предоставляющие возможность программно создавать сценарии взаимодействия пользователя на сайте с последующей фиксацией их результатов для использования в тестах.
Многие из нас годами пользуются PhantomJS, CasperJS и другими инструментами. Но, как часто бывает с любовью, наши сердца могут быть завещаны другому. Начиная с Chrome 59 (60 для пользователей Windows), Chrome поставляется с собственным безголовым браузером. И хотя в настоящее время он не имеет поддержки для Selenium, он использует Chromium и движок Blink, то есть имитирует актуальный пользовательский интерфейс в Chrome.
Как всегда, код этой статьи можно найти в репозитории GitHub.
Запуск безголового Chrome из командной строки относительно прост. На Mac вы можете установить алиас для Chrome и выполнить его с помощью параметра командной строки --headless :
На Linux всё ещё проще:
Вы также можете взаимодействовать с запрашиваемой страницей, например, для вывода document.body.innerHTML в stdout:
Если вас интересно большее количество возможностей, полный список параметров можно найти здесь.
Однако данная статья не о запуске безголового Chrome в командной строке, а об его запуске в Node.js. Для этого нам понадобятся следующие модули:
- chrome-remote-interface: JavaScript API, обеспечивающее простую абстракцию для команд и уведомлений
- chrome-launcher: позволяет нам запускать Chrome из Node.js кроссплаторменно
Затем мы можем настроить нашу среду. Предполагается, что на вашем компьютере установлены Node.js и npm. Если это не так, ознакомьтесь с нашим учебным пособием.
После этого мы хотим создать сессию безголового Chrome. Начнем с создания файла index.js в нашей папке проекта:
Во-первых, мы рекваирим наши зависимости, а затем создаем самовызывающуюся функцию, которая будет порождать экземпляр сессии Chrome. Обратите внимание, что флаг --disable-gpu требуется на момент написания этой статьи, но может оказаться не нужен, когда вы будете читать это, поскольку это всего лишь обходной путь (в соответствии с рекомендацией Google). Мы будем использовать async / await , чтобы гарантировать, что наше приложение ожидает запуск безголового браузера перед выполнением следующих шагов.
Примечание: Мы будем работать с функциями, требующим окончания определенных действий перед переходом к последующим шагам. Например, отрисовки страницы или завершения ряда взаимодействий. Многие из этих шагов не блокирующие, поэтому нам нужно использовать промисы для приостановки исполнения. Подробнее об async -функциях можно прочитать на Mozilla Developer Network или на SitePoint.
Далее нам нужно выявить области (domains), которые нам нужны для нашего тестирования:
Наиболее важный здесь объект Page : мы будем использовать его для доступа к содержимому пользовательского интерфейса. С его помощью мы укажем, куда мы переходим, с какими элементами взаимодействуем, где мы запускаем наши скрипты.
После того, как мы инициализировали нашу сессию и определили наши области, мы можем начать навигацию по сайту. Для выбора точки входа мы используем домен Page , который мы включили выше, и переходим к:
Этот код загрузит страницу. Затем, используя метод loadEventFired , мы определяем шаги, которые хотим осуществить в нашем приложении для воспроизведения сценария взаимодействия пользователя. В этом примере мы просто получаем содержимое первого абзаца.
Если вы запустите скрипт с помощью node index.js , вы увидите что-то вроде этого:
Мы так же легко можем заменить код в script1 на любой другой, например, на нажимающий на ссылки, заполняющий поля форм или запускающий серию взаимодействий с помощью query -селекторов. Каждый шаг может быть сохранен в конфигурационном JSON-файле и загружен в ваши скрипты на Node.js для выполнения последовательно. Результаты этих сценариев могут быть проверены с использованием платформы тестирования, такой как Mocha, что позволяет удостовериться, что полученные значения соответствуют требованиям UI / UX.
В дополнение к вашим тестовым сценариям вы, вероятно, захотите сделать скриншоты своих страниц при навигации по сайту. К счастью, выбранная область (Page) имеет функцию captureScreenshot , которая именно этим и занимается.
Флаг fromSurface - еще один флаг, требуемый для поддержки кроссплатформенности на момент написания этой статьи и может не понадобиться в будущем.
Запустите скрипт с помощью node index.js и вы получите примерно такой результат:
Если вы пишете автоматические тесты, вы должны начать использовать безголовый Chrome. Хотя он по-прежнему не полностью интегрирован с такими инструментами, как Selenium, преимущество имитации движка рендеринга Chrome не следует недооценивать. Это лучший способ полностью воссоздать пользовательский опыт.
характеру их поведения на сайте. И хотя она все еще находится в разработке, но вы уже можете начать использовать ее. Код библиотеки доступен на Github по ссылке. В настоящее время я тестирую новую технику обнаружения, не стесняйтесь оспаривать ее эффективность и целесообразность работы над ней, а также писать мне.
Что представляет собой headless браузер?
Headless браузер – это браузер без графического интерфейса, который используется для загрузки и обработки содержимого веб-страниц. Им можно программно управлять для автоматизации выполнения различных задач, таких как выполнение тестов или создания скриншотов веб-страниц.
Зачем может понадобится определять загрузку страницы headless браузером?
Помимо этих двух вполне безобидных вариантов использования, упомянутых нами выше, headless браузер также может использоваться для вредоносных целей. Наиболее частым случаем его такого использования это парсинг веб-страниц, увеличение количества показов рекламы или поиск уязвимостей на веб-сайте.
До сих пор одним из самых популярных headless браузеров был PhantomJS. И поскольку он разработан основе платформы Qt, то это подразумевает наличия большого числа отличий от популярных браузеров. Как будет показано в этом посте ниже, его можно обнаружить с помощью некоторых достаточно простых методов.
Начиная с версии 59, Google выпустила headless версию своего браузера Chrome. В отличие от PhantomJS, он основан на обычном Chrome, а не другой платформе, что затрудняет обнаружение его присутствия на сайте.
User agent
Начнем с пользовательского агента, который является атрибутом, значение которого обычно используется для определения ОС, а также браузера пользователя. И может принимать следующее значения: Mozilla/5.0 (X11; Linux x86_64) , AppleWebKit/537.36 (KHTML, like Gecko) , HeadlessChrome/59.0.3071.115 , Safari/537.36 .
Следующий фрагмент кода, позволяет определить присутствие headless Chrome:
Plugins
Обращение к свойству navigator.plugins возвращает массив подключаемых в браузере плагинов. Обычно в Chrome мы находим плагины в любом случае подключаемые по умолчанию, например, такие как Chrome PDF viewer или Google Native Client. И напротив, в headlessрежиме, возвращаемый массив не содержит ни одного плагина.
Languages
WebGL
WebGL, предоставляет API для отображения результатов 3D-рендеринга на холсте HTML canvas. С помощью этого API можно запросить возможности графического процессора, а также его средств визуализации.
В Linux с обычным Chrome я получаю следующие значения для средства визуализации и рендера: Google SwiftShader и Google Inc. . В headless режиме используется Mesa OffScreen , технология, применяющаяся для рендеринга без использования какой-либо window system, и Brian Paul , программа с открытым исходным кодом, которая запускает графическую библиотеки Mesa .
Тем не менее не все Chrome headless будут иметь одинаковые значения для рендера и средства визуализации. Другие сохраняют значения, которые также можно найти в headless версии браузера. Тем не менее, наличие значений Mesa Offscreen и Brian Paul явно указывают на использвание headless версии.
Browser features
Библиотека Modernizr позволяет проверить, присутствует ли в браузере широкий спектр новых возможностей HTML5 и CSS3. Единственная разница, которую мы можем обнаружить между Chrome и headless Chrome, заключается в том, что последний не имеет hairline функциональности, которая определяет поддержку hidpi для retina экранов устройств.
Отсутствующие изображения
И наконец, рассмотрим последний метод для обнаружения ботов, который является, с моей точки зрения, наиболее надежным. Он основан на вычислении браузером Chrome размера изображения, используемого в случае если изображение не может быть загружено.
В случае простого браузера Chrome изображение будет иметь ширину и высоту, которые зависят от масштаба окна браузера, но отличны от нуля. В headless Chrome изображение будет иметь ширину и высоту равную нулю.
It can be tricky to do functional tests on web applications. There are a lot of frameworks on the market to do that (Selenium…) but it generally comes with a lot of configuration and unexpected behavior.
In this article, I will show you how to test very easily and without any configuration your application with Jest and Puppeteer, two strong new comers in the jungle of web frameworks.
For this article, we will use React Create App to start quickly with a new and functional application. You can do the same by installing it with the following command:
Then, create the app:
You can now access our app by typing this command in the terminal:
In one hand I have Puppeteer, a Node Library that can control a Headless Chrome browser by writing actions in Javascript files. In the other hand, I have Jest, a “Delightful JavaScript Testing” framework with zero configuration. It will launch our tests written with Puppeteer and show us which tests succeed or fail.
Install Jest with the following command:
For this first test, we will start with an easy one. We will check if the application is really online by looking if “Welcome to React” is present.
We can see in the inspector that this title is contained in a h1 tag with a class named “App-title”.
First, we create a __tests__ folder and a file named first_test.js in it. Your files should now look like that:
Delete the App.test.js is the src folder. Jest is designed to search all files containing the word “test” in their name, and we don’t want it to launch this one.
Next, let’s write our first test:
Let’s explain this script…
We start by importing Puppeteer, then we write the test function. This function is declared by Jest and tells him to start a test.
We declare a browser and a page variable that tell to Puppeteer to launch the browser and get a new page. The “headless: false” option is indicated so that we can see the browser while testing.
Once the selector is display, we capture the content of the selector in a “html” variable and tell to Jest we want the content to be “Welcome to React”.
Finally, the browser is closed and the test ends.
We can now start the test ! Just write this command in your terminal:
And the magic begins…
You can also edit your package.json as follows (add a test script):
and launch the tests in your terminal:
We saw how easy it is to write headless tests for any web application with zero configuration and two simple frameworks.
This example was very simple but you can do very advanced tests with this tools. E. g., you can simulate a user navigating on your website and check that everything corresponds to the expected behavior. We will see how to implement such advanced tests with puppeteer in another incoming post.
In between, I strongly encourage you to look at their very well detailed documentation:
Читайте также: