Testplane UI

Testplane UI или, как мы его также называем, html-reporter — это проект с открытым исходным кодом, который можно использовать для просмотра результатов тестов или взаимодействия с инструментами, такими как Testplane, Playwright или Jest.

Возможности

Запускайте и отлаживайте свои тесты

Просматривайте шаги теста, воспроизводите их, и когда что-то идет не так, легко находите первопричину.

Превосходные возможности визуального тестирования

Принимайте или отменяйте изменения в визуальных проверках одним кликом. Множество режимов просмотра и специальная вкладка визуальных проверок помогут вам проанализировать различия.

Единый UI для CI и локального использования

Что-то пошло не так в CI? Загрузите отчет и продолжайте устранение неполадок локально.

Мощная аналитика

Находите нестабильные тесты, медленные тесты или другие проблемы с помощью опций "сортировка" и "группировка".

И многое другое

Вот некоторые преимущества HTML Reporter:

• Больше, чем просто отчет: это не статический отчет — вы можете запускать свои тесты, обновлять эталонные изображения, анализировать прогоны тестов и многое другое.
• Экономия времени разработчика: нет необходимости перезапускать отчеты или переключаться между терминалами во время разработки — весь рабочий процесс возможен из UI.
• Нет vendor-lock: все данные ваши, UI имеет открытый исходный код, и все работает локально на вашей машине. Нет подписок и привязки к облаку.
• Оптимизирован для работы в масштабе: неважно, есть ли у вас 100 или 100 000+ тестов в одном отчете — UI будет работать так же плавно. Встроенная поддержка загрузки артефактов на лету в S3 или другое хранилище.
• Множество источников данных: html-reporter может загружать и объединять данные из любого количества источников во время выполнения, или вы можете использовать специальную команду merge-reports.

Демо

Попробуйте HTML Reporter — он доступен по ссылке.

Начало работы

к сведению

В настоящее время html-reporter требует Node v18 или выше и работает с Testplane, Playwright и Jest.

Обратите внимание, что html-reporter не зависит от конкретного инструмента в своей основе, поэтому добавление поддержки нового инструмента — это вопрос реализации новых адаптеров данных. Если у вас есть конкретный инструмент на примете, создайте issue — обсудим, что можно сделать.

1. Установите html-reporter:

   npm i -D html-reporter

2. Включите его в конфиге вашего инструмента:

   Testplane

   testplane.config.ts

   export = {
       // ...
       plugins: {
           'html-reporter/testplane': {
               enabled: true,
               path: 'html-report',
           },
       },
   };

   Playwright

   playwright.config.ts

   // playwright.config.ts
   export default defineConfig({
       // ...
       reporter: [
           ['html-reporter/playwright', {
               enabled: true,
               defaultView: 'failed',
               path: 'html-report',
           }],
       ],
   });

   Jest

   jest.config.ts

   const config = {
       // ...
       reporters: [
           'html-reporter/jest', // Connecting our reporter
           'default' // Built in Jest reporter or any additional reporters you need (optional)
       ],
   };

   If you want to pass configuration options, you may do the following:

   jest.config.ts

   const config = {
       // ...
       reporters: [
           ['html-reporter/jest', {
               path: 'html-report',
           }]
       ],
   };

   warning

   If you are using jest@27 or below, you need to use the following path: html-reporter/build/jest.

3. Запустите ваши тесты и посмотрите отчет:

   npm test
   
   npx serve html-report

4. Попробуйте UI режим для запуска тестов из UI:

   npx html-reporter gui

   Примечание: UI режим доступен только для Testplane и Playwright. Для использования с Playwright добавьте --tool playwright.