Визуальный Репортер - это новая функция, представленная в @wdio/visual-service, начиная с версии v5.2.0. Этот репортер позволяет пользователям визуализировать JSON-отчеты о различиях, генерируемые службой визуального тестирования, и преобразовывать их в удобочитаемый формат. Он помогает командам лучше анализировать и управлять результатами визуального тестирования, предоставляя графический интерфейс для просмотра результатов.

Чтобы использовать эту функцию, убедитесь, что у вас есть необходимая конфигурация для генерации файла output.json. Этот документ проведет вас через настройку, запуск и понимание Визуального Репортера.

Предварительные требования

Перед использованием Визуального Репортера убедитесь, что вы настроили службу визуального тестирования для генерации файлов отчетов JSON:

export const config = {
    // ...
    services: [
        [
            "visual",
            {
                createJsonReportFiles: true, // Генерирует файл output.json
            },
        ],
    ],
};

Для получения более подробных инструкций по настройке обратитесь к документации по визуальному тестированию WebdriverIO или createJsonReportFiles

Установка

Чтобы установить Визуальный Репортер, добавьте его как зависимость для разработки в ваш проект с помощью npm:

npm install @wdio/visual-reporter --save-dev

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

Использование

Создание визуального отчета

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

Использование CLI

Вы можете использовать команду CLI для генерации отчета, выполнив:

npx wdio-visual-reporter --jsonOutput=<путь-к-output.json> --reportFolder=<путь-для-хранения-отчета> --logLevel=debug

Обязательные параметры:

• --jsonOutput: Относительный путь к файлу output.json, сгенерированному службой визуального тестирования. Этот путь указывается относительно директории, из которой вы выполняете команду.
• --reportFolder: Относительная директория, где будет храниться сгенерированный отчет. Этот путь также указывается относительно директории, из которой вы выполняете команду.

Необязательные параметры:

• --logLevel: Установите значение debug для получения подробного журналирования, особенно полезно при устранении неполадок.

Пример

npx wdio-visual-reporter --jsonOutput=/path/to/output.json --reportFolder=/path/to/report --logLevel=debug

Это сгенерирует отчет в указанной папке и предоставит обратную связь в консоли. Например:

✔ Build output copied successfully to "/path/to/report".
⠋ Prepare report assets...
✔ Successfully generated the report assets.

Просмотр отчета

предупреждение

Открытие path/to/report/index.html напрямую в браузере без обслуживания с локального сервера НЕ будет работать.

Для просмотра отчета необходимо использовать простой сервер, например sirv-cli. Вы можете запустить сервер с помощью следующей команды:

npx sirv-cli /path/to/report --single

Это выведет логи, подобные примеру ниже. Обратите внимание, что номер порта может отличаться:

  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Теперь вы можете просмотреть отчет, открыв предоставленный URL в вашем браузере.

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

В качестве альтернативы вы можете запустить следующую команду и ответить на подсказки для генерации отчета:

npx @wdio/visual-reporter

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

Просмотр отчета

предупреждение

Открытие path/to/report/index.html напрямую в браузере без обслуживания с локального сервера НЕ будет работать.

Если вы решили не запускать сервер через интерактивную подсказку, вы все равно можете просмотреть отчет, выполнив следующую команду вручную:

npx sirv-cli /path/to/report --single

Это выведет логи, подобные примеру ниже. Обратите внимание, что номер порта может отличаться:

  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Теперь вы можете просмотреть отчет, открыв предоставленный URL в вашем браузере.

Демонстрация отчета

Чтобы увидеть пример того, как выглядит отчет, посетите нашу демонстрацию на GitHub Pages.

Понимание визуального отчета

Визуальный Репортер предоставляет организованный обзор результатов ваших визуальных тестов. Для каждого прогона тестов вы сможете:

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

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

Интеграции с CI

Мы работаем над поддержкой различных инструментов CI, таких как Jenkins, GitHub Actions и т.д. Если вы хотите помочь нам, пожалуйста, свяжитесь с нами на Discord - Visual Testing.