Headless и headful режимы

Puppeteer — это инструмент для автоматизации браузера, построенный на базе Chromium. Он позволяет взаимодействовать с веб-страницами, выполнять тесты, делать скриншоты, генерировать PDF и многое другое. Одной из важных особенностей Puppeteer является поддержка двух основных режимов работы: headless и headful. Различие между ними заключается в том, как браузер отображается и взаимодействует с пользователем в процессе выполнения сценариев.

Что такое headless режим?

Headless режим — это запуск браузера без графического интерфейса. В этом режиме браузер работает в фоновом режиме, не отображая окна и интерфейс, что делает его идеальным для автоматических тестов и обработки данных. Такой режим предоставляет несколько преимуществ, включая:

  • Быстродействие: Без необходимости рендеринга интерфейса браузер работает быстрее.
  • Экономия ресурсов: Отсутствие графической оболочки снижает потребление памяти и процессора, что важно для серверной работы или CI/CD пайплайнов.
  • Поддержка серверных сред: В headless режиме можно запускать браузер на серверах без графического окружения, что особенно полезно для тестирования на удаленных машинах.

При использовании Puppeteer в headless режиме браузер ведет себя так же, как в обычном, но все визуальные элементы остаются скрытыми. Это позволяет выполнить необходимые операции, такие как клики, заполнение форм, навигация по страницам, без того чтобы это было видно пользователю.

Пример работы в headless режиме 

const puppeteer = require(&

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

В данном примере браузер запускается в headless режиме, посещает страницу, делает скриншот и закрывает браузер. Всё это происходит без вывода интерфейса.

Что такое headful режим?

Headful режим, в отличие от headless, запускает браузер с графическим интерфейсом, который отображается на экране. Это полезно, когда нужно видеть, как выполняется сценарий, а также когда требуется визуальная проверка процесса взаимодействия с веб-страницей.

Основные преимущества headful режима:

  • Отладка: При использовании графического интерфейса проще отлаживать тесты и наблюдать за процессом.
  • Проверка визуальных изменений: Если тесты касаются визуального оформления страницы, то headful режим позволяет убедиться в том, как эти изменения отображаются на экране.
  • Интерактивное использование: Режим подходит для выполнения действий, которые требуют вмешательства пользователя, например, когда необходимо заполнять форму или взаимодействовать с элементами страницы.

Headful режим можно использовать и в автоматических тестах, когда важно видеть, как именно происходит взаимодействие с веб-страницей, или когда нужно проверить, как работает пользовательский интерфейс.

Пример работы в headful режиме 

const puppeteer = require('puppeteer');

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

В этом примере браузер запускается с интерфейсом, и можно увидеть, как Puppeteer выполняет действия на странице.

Основные различия между headless и headful режимами

  1. Графический интерфейс:

    • Headless: Браузер работает без визуального интерфейса.
    • Headful: Браузер запускается с графическим интерфейсом, отображая страницу.

  2. Производительность:

    • Headless: Быстрее, так как не тратится время на рендеринг графики.
    • Headful: Замедляется из-за необходимости отрисовывать и отображать интерфейс.

  3. Использование в CI/CD:

    • Headless: Идеален для автоматических тестов и работы на серверах без графического окружения.
    • Headful: Редко используется в CI/CD, но может быть полезен для отладки тестов в локальной среде.

  4. Наблюдаемость и отладка:

    • Headless: Недоступен для визуального контроля, сложно отлаживать, если что-то пошло не так.
    • Headful: Легко отлаживать, можно видеть все взаимодействия с веб-страницей.

  5. Использование для автоматизации и тестирования:

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

Как выбрать между headless и headful режимами?

При выборе между этими режимами стоит учитывать несколько факторов:

  • Задача: Если основная цель — это автоматизация тестов, и важна только функциональность (без визуальной составляющей), то лучше использовать headless режим. Для тестирования интерфейсов или отладки функциональности удобнее выбрать headful режим.
  • Производительность: Если важна высокая скорость выполнения сценариев, например, при запуске большого набора тестов в CI/CD, то headless режим будет предпочтительнее.
  • Отладка: В случае, когда необходимо вручную отслеживать и исправлять ошибки, headful режим предоставит больше информации, так как процесс будет отображаться на экране.

Выводы

Выбор между headless и headful режимами зависит от конкретных требований задачи. Для большинства автоматизированных тестов и серверной работы удобнее использовать headless режим. Однако для процессов, где требуется наблюдать за действиями браузера или отлаживать код, headful режим окажется более полезным. Puppeteer позволяет легко переключаться между этими режимами, что делает его удобным инструментом для различных сценариев тестирования.

Оглавление