Jasmine предоставляет несколько способов вывода результатов тестирования, и один из самых популярных — это HTML-репортер. Этот формат отчёта позволяет наглядно отображать результаты выполнения тестов в виде веб-страницы, что особенно удобно для мониторинга состояния тестов в реальном времени или после выполнения в CI/CD процессе.
Для того чтобы включить HTML-репортер в Jasmine, необходимо использовать специализированную библиотеку, такую как jasmine-html-reporter. Эта библиотека добавляет функциональность вывода результатов в формате HTML. Чтобы интегрировать HTML-репортер, выполните следующие шаги:
Установка пакета
Для начала, нужно установить пакет с помощью npm:
npm install jasmine-html-reporter --save-devНастройка репортера
После установки, нужно настроить репортер в конфигурационном файле
Jasmine (обычно это jasmine.json или
spec/support/jasmine.js). Пример настройки:
const Jasmine = require('jasmine');
const jasmine = new Jasmine();
const JasmineHtmlReporter = require('jasmine-html-reporter');
jasmine.loadConfigFile('spec/support/jasmine.json');
jasmine.addReporter(
new JasmineHtmlReporter({
savePath: 'test/reports',
cleanDestination: true,
fileName: 'test-report',
fileExtension: '.html',
screenshotsFolder: 'screenshots',
takeScreenshots: false
})
);
jasmine.execute();В этом примере конфигурации:
savePath указывает путь, куда будет сохранён
HTML-отчёт.cleanDestination отвечает за удаление старых отчётов
перед генерацией новых.fileName задаёт имя для выходного HTML файла.fileExtension указывает расширение отчёта.screenshotsFolder и takeScreenshots
позволяют настраивать захват скриншотов при сбоях тестов.Запуск тестов
После настройки репортера достаточно запустить Jasmine, и результаты тестирования будут автоматически сохранены в указанную папку в формате HTML. Это можно сделать командой:
jasmineHTML-репортер в Jasmine имеет несколько ключевых особенностей, которые делают его удобным для анализа результатов тестирования:
Графический интерфейс
После выполнения тестов, HTML-репортер создаёт страницу, на которой представлена информация о каждом тесте, группе тестов (describe блоках) и их статусе (пройден, не пройден, с ошибками). Страница включает в себя:
Интерактивность
Отчёт поддерживает интерактивность — можно сворачивать и разворачивать блоки с тестами, что позволяет быстро ориентироваться в большом количестве тестов. Это особенно полезно в случае большого набора тестов, так как упрощает поиск нужных результатов.
Цветовая маркировка
Результаты тестов визуализируются с использованием цветовой маркировки. Пройденные тесты отображаются зелёным цветом, а неудачные — красным, что позволяет быстро определить, какие тесты не прошли.
Поддержка скриншотов
При использовании параметров для захвата скриншотов, репортер может автоматически прикреплять изображения, сделанные при возникновении ошибок в тестах. Это особенно полезно при тестировании интерфейсов и визуальных компонентов, так как позволяет наглядно продемонстрировать проблему.
HTML-репортер предоставляет гибкую настройку внешнего вида и поведения отчётов. В дополнение к базовым параметрам, существует ряд опций, которые могут быть полезны в различных ситуациях.
cleanDestination — очищает целевую
папку перед сохранением нового отчёта. Это предотвращает накопление
старых отчётов в процессе тестирования.
savePath — путь, куда будут
сохраняться файлы отчётов. По умолчанию используется текущая директория,
но можно указать любой другой путь.
fileName — имя файла отчёта без
расширения. Важно, что при указании имени будет автоматически добавлено
расширение .html.
takeScreenshots — если установлено
в true, при возникновении ошибок будут сделаны скриншоты.
Для этого необходимо дополнительно настроить драйвер браузера или
тестовую среду.
screenshotsFolder — папка, в
которой будут храниться скриншоты при настройке параметра
takeScreenshots.
fileExtension — расширение для
файла отчёта. По умолчанию используется .html, но можно
указать и другое расширение, если это необходимо.
showColors — включает цветовую
маркировку для результатов тестов. Эта опция помогает быстро визуально
воспринимать результаты.
После выполнения тестов и настройки репортера, создаётся HTML-страница с результатами. В отчёте будет отображён список всех тестов, их статусы, а также дополнительные метки и комментарии (если они предусмотрены в тестах).
Пример страницы отчёта может выглядеть так:
Заголовок с названием теста.
Сводка по тестам (например, “10 из 12 тестов пройдено”).
Список всех тестов с цветной маркировкой:
Детали ошибок с трассировкой стека для неудачных тестов.
Удобство для анализа результатов — HTML-формат отчёта предоставляет структурированную информацию, которая легко воспринимается как для разработчиков, так и для менеджеров. Благодаря наглядному интерфейсу и цветовой маркировке можно быстро оценить состояние тестов.
Поддержка автоматизации — HTML-репортер интегрируется с инструментами автоматизации, такими как Jenkins или Travis CI. Это позволяет автоматически генерировать отчёты и публиковать их в интернете или хранить в хранилищах артефактов.
Подробности ошибок — отчёт помогает понять, почему тест не прошёл, с точным указанием места возникновения ошибки и трассировки стека, что облегчает процесс отладки.
Гибкость в настройке — возможность настроить путь сохранения отчётов, формат файлов и другие параметры позволяет адаптировать использование репортера под различные условия и требования проекта.
Визуализация данных — для больших проектов отчёты в HTML-формате становятся удобным инструментом для наглядного отображения результатов и быстрого реагирования на неудачные тесты.
В процессе использования HTML-репортера важно помнить, что его можно интегрировать в цепочку CI/CD, чтобы автоматически генерировать отчёты после каждого запуска тестов. Например, в Jenkins можно настроить задачу, которая будет запускать тесты Jasmine и генерировать HTML-отчёты, которые затем можно будет просмотреть через веб-интерфейс.
Для интеграции с CI/CD-процессом можно использовать:
Это позволяет эффективно отслеживать качество кода и реагировать на проблемы в тестах, минимизируя время, затрачиваемое на анализ результатов.