Что, почему и как нужно тестировать при помощи безголового браузера и Node.js

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

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

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

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

Безголовые браузеры быстрые

Безголовые браузеры обычно быстрее, чем настоящие браузеры. Поскольку вы не загружаете графический интерфейс браузера, вы можете пропустить время, необходимое реальному браузеру для загрузки CSS и JavaScript и отображения HTML.

Когда не использовать Headless Browser

Вот несколько причин, по которым вы можете не использовать браузер без монитора.

  • Вам нужно подражать реальным пользователям. Когда вы запускаете безголовые тесты, вы на самом деле не имитируете реальный пользовательский опыт. Вы просто нажимаете и наводите указатель мыши, чтобы убедиться, что код работает должным образом.
  • Ваши конечные пользователи или клиенты не используют безголовый браузер. Вы не хотите сосредотачиваться на ошибках, которые возникают только в режиме без головы.
  • Если вам нужно много отлаживать браузер, отлаживать безголовый режим может быть довольно сложно.

Есть несколько решений для написания тестов браузера без монитора. Сегодня мы заглянем в библиотеку Драматург.

Зачем нужен драматург?

Playwright - это библиотека Node.js для автоматизации Chromium, Firefox и WebKit с помощью единого API. Библиотека Playwright создана для того, чтобы обеспечить постоянную, функциональную, надежную и быструю кроссбраузерную веб-автоматизацию.

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

Вот что входит в библиотеку драматургов

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

Начиная

Предположим, у вас установлен Node. (Если нет, ничего страшного, перейдите на официальный сайт Node.js, скачайте и установите его.)

Затем давайте создадим папку для нашего проекта и инициализируем новый проект Node внутри папки.

mkdir playright-example && cd playright-example && npm init -y

После того, как мы настроили наш проект Node, давайте приступим к написанию тестов для автономного браузера. Для этого нам нужно установить библиотеку Playwright и создать файл с именем index.js, в который мы напишем код для теста.

touch index.js && npm i -D playwright

При этом будут установлены двоичные файлы Playwright и браузера для Chromium, Firefox и WebKit. После установки вы можете импортировать библиотеку Playwright.

Написание теста безголового браузера

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

whatsmyuseragent.org - это веб-сайт, на котором отображается версия и данные вашего пользовательского агента, а также ваш IP-адрес.

Вот пример кода того, как мы можем автоматизировать процесс перехода на веб-сайт и создания снимка экрана.

Browser относится к экземпляру Chromium, Firefox или WebKit. Сценарии драматурга обычно начинаются с запуска экземпляра браузера и заканчиваются его закрытием.

Экземпляры браузера могут быть запущены в режиме без заголовка (без графического интерфейса пользователя) или в режиме заголовка.

const { chromium } = require('playwright');  // Or 'firefox' or 'webkit'.

Обратите внимание, как мы используем все три основных браузерных движка: WebKit, Firefox и Chromium.

Запуск теста безголового браузера

Чтобы выполнить тест, все, что нам нужно сделать, это запустить файл с помощью Node. Запустите следующий код в терминале.

node index.js

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

Обратите внимание, как в проекте появились три новых файла. Эти три файла представляют собой снимки экрана для каждого теста браузера: example-chromium.png, example-webkit.png и example-safari.png.

И если тесты прошли успешно, мы должны увидеть следующие скриншоты.

У каждого движка браузера есть свои особенности для рендеринга HTML и рисования CSS на экране. Представьте себе, насколько полезными могут быть автоматизированные тесты браузера, если мы хотим убедиться, что макет приложения работает на всех устройствах и в разных браузерах.

Если вам интересно, вот исходный код для примера.