HTML отчёты

Protractor — это фреймворк для end-to-end тестирования приложений на Angular и не только, построенный поверх Selenium WebDriver. Одним из ключевых аспектов автоматизированного тестирования является наглядная визуализация результатов тестов. Для этого Protractor поддерживает интеграцию с различными репортерами, которые генерируют HTML отчёты.

Настройка HTML репортера

Для генерации HTML отчётов в Protractor чаще всего используют пакеты:

  • protractor-jasmine2-html-reporter
  • jasmine-reporters
  • protractor-beautiful-reporter

Установка производится через npm:

npm install protractor-jasmine2-html-reporter --save-dev

Интеграция с конфигурацией Protractor

После установки репортера его необходимо подключить в конфигурационном файле protractor.conf.js. Пример подключения protractor-jasmine2-html-reporter:

const Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['specs/*.spec.js'],

  onPrepare: function() {
    jasmine.getEnv().addReporter(
      new Jasmine2HtmlReporter({
        savePath: 'test_reports/',
        screenshotsFolder: 'images',
        takeScreenshots: true,
        takeScreenshotsOnlyOnFailures: true,
        fixedScreenshotName: true,
        cleanDestination: false,
        fileName: 'TestReport'
      })
    );
  }
};

Ключевые параметры репортера:

  • savePath — директория, куда сохраняются отчёты.
  • screenshotsFolder — поддиректория для скриншотов.
  • takeScreenshots — включение захвата скриншотов.
  • takeScreenshotsOnlyOnFailures — сохранять скриншоты только при падении теста.
  • fixedScreenshotName — фиксированное имя скриншота вместо генерации уникальных имён.
  • fileName — имя HTML отчёта.

Особенности работы с HTML отчётами

  1. Автоматическое создание скриншотов HTML отчёты позволяют автоматически прикреплять скриншоты к шагам теста. Это удобно для анализа ошибок и визуального контроля интерфейса.

  2. Структурированное отображение тестов Репортер формирует отчёт в виде таблицы или иерархии, где отображаются:

    • название теста
    • статус (пройден/не пройден/пропущен)
    • ошибки и stack trace
    • скриншоты (если включено)

  3. Фильтрация и сортировка результатов Некоторые HTML репортеры позволяют фильтровать тесты по статусу или времени выполнения, а также сортировать их по имени или дате.

Использование нескольких репортеров одновременно

Protractor поддерживает добавление нескольких репортеров через jasmine.getEnv().addReporter(). Например, можно одновременно вести консольный лог и HTML отчёт:

const Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
const jasmineReporters = require('jasmine-reporters');

exports.config = {
  onPrepare: function() {
    jasmine.getEnv().addReporter(
      new Jasmine2HtmlReporter({
        savePath: 'test_reports/',
        screenshotsFolder: 'images'
      })
    );

    jasmine.getEnv().addReporter(
      new jasmineReporters.JUnitXmlReporter({
        savePath: 'xml_reports/',
        consolidateAll: false
      })
    );
  }
};

Это позволяет одновременно анализировать отчёты в разных форматах — HTML для визуального контроля и XML для CI/CD систем, таких как Jenkins.

Советы по организации HTML отчётов

  • Разделять отчёты по дате или сборке для удобства отслеживания изменений.
  • Включать скриншоты только для упавших тестов, чтобы уменьшить размер отчёта.
  • Использовать понятные имена файлов и папок для лёгкой навигации.
  • При работе в CI/CD интегрировать репортер с Jenkins, GitLab или TeamCity для автоматического открытия отчётов после прогонки тестов.

Особенности работы с Angular приложениями

Для Angular приложений важно учитывать, что Protractor умеет ожидать завершения всех асинхронных операций в Angular ($http, $timeout). Это обеспечивает корректную генерацию HTML отчётов, так как тесты завершаются только после полной загрузки страницы, предотвращая ложные ошибки.

HTML отчёты в Protractor — не только удобный способ визуализации тестов, но и инструмент для анализа стабильности приложения, упрощения дебага и интеграции с CI/CD процессами. Правильная настройка репортера значительно повышает эффективность тестирования и позволяет отслеживать динамику качества приложения с течением времени.

Оглавление