- Почему headless
- Какие браузеры могут быть безголовыми
- Предназначение
- Плюсы и минусы
- Кейсы
- Примеры в Playwright, Cypress и Puppeteer
Headless, как следует из названия («безголовый»), означает веб-браузер без пользовательского интерфейса. Такой подход повышает скорость тестирования веб-приложений и упрощает процесс.
Что такое «безголовый» браузер
Мы знаем, что пользовательский интерфейс любого программного обеспечения является его неотъемлемой частью. Поэтому, когда речь заходит о безголовых браузерах (да, вы не ослышались, они называются «безголовыми»), это означает браузер без пользовательского интерфейса или «головы». Когда браузер безголовый, графический интерфейс скрыт от вас. Поэтому вы ничего не видите, когда используете безголовый браузер для доступа к любому сайту. Однако программа работает, в фоновом режиме.
- Если более подробно, то headless-браузер — это такой же браузер, как и любой другой, с той лишь разницей, что на экране ничего не видно.
- При этом безголовый браузер работает так же как обычный, он выполняет такие задачи, как навигация по страницам, переход по ссылкам, загрузка контента и многое другое.
- Но в обычном браузере вы можете проверить каждый свой шаг и продолжить работу с помощью графического интерфейса. В то же время в безголовом для отслеживания изменений вы будете использовать командную строку или консоль.
Примеры headless-браузеров:
- Chromium
- Headless Chrome
- Firefox Headless
- Apple Safari (Webkit)
- Splash
- PhantomJS
- Zombie.JS
- HTML Unit
Важность
Одним из очевидных преимуществ использования headless-браузеров является то что они быстрее обычных, так как вы можете сэкономить все время, затрачиваемое на загрузку CSS и прочего. Но это только одно из преимуществ.
Также:
- Скрапинг веб-сайтов: вы можете скрапить HTML сайта без отрисовки браузера.
- Сокращение времени разработки: проверка изменений кода сайтов из командной строки экономит время и силы разработчиков.
- Мониторинг производительности с помощью headless-скриптов: Вы можете отслеживать производительность сетевых приложений с помощью headless-браузеров. Многие разработчики автоматизируют захват изображения с экрана для проверки макетов своих сайтов.
Преимущества и недостатки
Преимущества безголовых браузеров:
- Эффективность использования ресурсов: Headless-браузеры не требуют ресурсов для рендеринга и отображения веб-контента, то есть графических элементов и анимации. Это делает их подходящими для окружений с ограниченными ресурсами.
- Скорость: без отображения контента headless-браузеры могут загружать страницы и взаимодействовать с ними намного быстрее, чем их браузеры с графическим интерфейсом.
- Масштабируемость: Их легче масштабировать, поскольку они могут работать в фоновом режиме, вовсе не потребляя графических ресурсов.
- Автоматизация: Идеально подходят для автоматизации взаимодействия с веб-страницами, например заполнения форм, нажатия кнопок и навигации по страницам.
Недостатки
- Отсутствие визуальной обратной связи: Одним из наиболее существенных недостатков headless-браузеров является отсутствие визуального интерфейса, что затрудняет отладку и устранение неполадок.
- Ограниченное взаимодействие с JavaScript: Некоторые сложные веб-сайты в значительной степени полагаются на JavaScript для динамической загрузки и отображения контента. Headless-браузеры имеют ограничения в обработке этих динамических взаимодействий, что приводит к неполному или неправильному отображению.
- Проблемы совместимости: Headless-браузеры не способны идеально воспроизводить поведение реальных пользователей и браузеров с графическим интерфейсом. Это может привести к проблемам совместимости, когда веб-сайт функционирует по-другому или ведет себя неожиданно в headless-браузере.
- Обслуживание: Как и любое другое программное обеспечение, они требуют обновлений и обслуживания, чтобы соответствовать изменениям в веб-технологиях и исправлять ошибки или уязвимости.
Разработчики уже давно используют тестирование, ориентированное на пользовательский интерфейс, для обеспечения правильной работы своих программ. Однако существует множество проблем, связанных с тестированием на основе пользовательского интерфейса. Самая большая из них — нестабильность. Иногда UI-ориентированное тестирование не может взаимодействовать с браузером. Другая проблема — время. Если не хватает времени, решение этой проблемы — headless-тестирование.
При headless-тестировании можно проводить полное сквозное тестирование, при котором браузер не загружает пользовательский интерфейс приложения. Таким образом, все работает быстрее, а тесты взаимодействуют со страницей напрямую, снижая вероятность нестабильности. Ваши тесты становятся более надежными, быстрыми и эффективными.
Кейсы
В зависимости от целей тестирования вы можете выбрать headless- тестирование для своего проекта. Оно не требует больших ресурсов, может прекрасно автоматизироваться, относительно легкое в освоении и обеспечивает быстрое выполнение. Более того, вы можете написать UI-тест и встроить его в процесс, вместо того, чтобы проверять всё вручную, что даст лучшие результаты.
- Автоматизация HTML-действий, таких как отправка формы, нажатие кнопки мыши и т.д.
- Обработка выполнения JavaScript
- Скрапинг контента с сайта
- Мониторинг сети
- Обработка Ajax-вызовов
- Создание скриншотов страниц
Это лишь верхушка айсберга, и существует еще множество примеров использования. Однако вы должны знать, что тестирование в headless-браузере имеет свою сферу применения, в то время как обычное тестирование имеет свою. Лучше сочетать оба подхода.
Практика
Подробнее рассмотрим примеры в Selenium, Playwright и Puppeteer (то есть самые популярные фреймворки):
Selenium
Selenium — бесплатный инструмент с открытым исходным кодом. Он поддерживает различные браузеры, работающие на разных операционных системах. Веб-драйвер Selenium обеспечивает расширенную поддержку динамических веб-страниц, а использование Selenium в headless-режиме может дать отличные результаты. Вы можете использовать либо Headless Chrome, либо Headless Firefox для выполнения.
Chrome + Selenium:
Для работы с Chrome вам понадобится Selenium WebDriver, который предоставляет класс под названием ChromeOptions, с headless-конфигурациями для Chrome. Используйте приведенный ниже код, чтобы создать экземпляр ChromeDriver.
ChromeOptions options = new ChromeOptions()
options.addArgument("headless");
ChromeDriver driver = new ChromeDriver(options);
С помощью метода addArgument() запускаем headless-режим из класса ChromeOptions, поставляемого Selenium WebDriver.
Firefox + Selenium:
Процесс аналогичен использованию в Chrome выше. Но здесь мы зададим путь к драйверу Gecko Driver для выполнения headless-режима. В Selenium WebDriver мы пропишем setHeadless (true) класса FirefoxOptions. Используйте приведенный ниже код для запуска headless-режима в Firefox:
FirefoxOptions options = new FirefoxOptions();
options.setHeadless(true);
WebDriver driver = new FirefoxDriver(options);
driver.get("https://demoqa.com/");
System.out.println("Title of the page is -> " + driver.getTitle());
driver.close();
}
}
Playwright
Playwright предназначен для автоматизации с высокоуровневыми API. Прежде чем настраивать Playwright для headless-тестирования, убедитесь, что в вашей системе установлены последние версии Node.js и npm. Создайте пакет для этого проекта с помощью команды:
npm init --yes
Вы получите файл package.json; выполните указанную ниже команду для установки Playwright на вашу систему.
npm install playwright@0.13.0
Теперь рассмотрим скрипт для запуска этого сценария на тестовом сайте.
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto('https://native-land.ca/');
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
Or you can also use the following script-
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
const title = page.locator('.navbar__inner .navbar__title');
await expect(title).toHaveText('Playwright');
});
Выполните следующую команду:
npx playwright test
Мы рекомендуем отключать headless-режим, когда пишете свой первый headless-скрипт, чтобы видеть, что делает ваш скрипт.
Puppeteer
Puppeteer все еще является одним из самых популярных фреймворков с поддержкой headless. Создайте скрипт для перехода на тестовый сайт, используя следующий код:
const puppeteer = require('puppeteer')
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://bstackdemo.com/')
await browser.close()
})()
Заметьте, что Puppeteer работает в headless-режиме по умолчанию, поэтому вы не увидите ничего происходящего в браузере, если запускаете свой обычный UI-сценарий.
Примечание: Вы должны знать, что Playwright и Puppeteer сбрасывают свое состояние в конце каждой сессии, и запуски не будут мешать друг другу.
Вы можете включить headless-тестирование в разных браузерах с помощью определенных команд. Вот пример в Cypress. Если вы хотите запустить headless-режим в Cypress, выполните команду:
cypress run
Если вам нужно запустить только один конкретный файл, вы можете передать его в качестве аргумента, используя команду «cypress run»:
cypress run --spec cypress/integration/example.spec.js
Ниже приведен сценарий:
{
"name": "sample-project",
"version": "1.0.0",
"description": "Sample project for the Pinches of Cypress series",
"main": "index.js",
"scripts": {
"test": "cypress run"
},
"keywords": ['cypress.io', 'testing', 'cypress'],
"author": "Walmyr Filho <wlsf82@gmail.com> (https://walmyr.dev)",
"license": "MIT",
"devDependencies": {
"cypress": "^6.4.0"
}
}
У вас может быть столько угодно скриптов. Например:
"scripts": {
"cypress:open": "cypress open",
"cypress:ci": "cypress run",
"cypress:smoke-test": "cypress run --spec cypress/integration/smoke-test.spec.js"
},
Если приведенные выше команды не являются npm-скриптами, для их выполнения необходимо добавить npx в качестве префикса.
Резюме
Это более быстрый, часто более надежный и эффективный способ тестирования веб-приложений. Однако только реальный браузер обеспечивает реальное представление сайта. Лучше комбинировать headless и обычный режим, по ситуации.
