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 — обсудим, что можно сделать.

Установите html-reporter:
```
npm i -D html-reporter
```

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

Testplane
Playwright
Jest

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

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

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.

Запустите ваши тесты и посмотрите отчет:
```
npm test

npx serve html-report
```
Попробуйте UI режим для запуска тестов из UI:
```
npx html-reporter gui
```
Примечание: UI режим доступен только для Testplane и Playwright. Для использования с Playwright добавьте --tool playwright.

Возможности​

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

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

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

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

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

Демо​

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