Присоединение скриншотов к задачам

В процессе автоматизированного тестирования часто возникает необходимость прикрепить скриншоты к задачам для лучшего анализа проблем или подтверждения результатов тестов. WebdriverIO предоставляет несколько способов для захвата и прикрепления скриншотов в рамках тестов. Этот процесс может быть полезен как для тестировщиков, так и для разработчиков, поскольку скриншоты могут служить наглядным доказательством ошибок или успешных шагов в тестах.

WebdriverIO предлагает встроенную команду browser.saveScreenshot(), которая позволяет сделать снимок экрана на любом этапе теста. Эта команда сохраняет изображение в указанный файл, что важно для дальнейшего анализа.

Пример использования:

it('Тест с сохранением скриншота', () => {
    browser.url('https://example.com');
    // Сделать скриншот текущего состояния страницы
    browser.saveScreenshot('./screenshots/example.png');
});

Команда saveScreenshot() сохраняет снимок в формате PNG по указанному пути. Путь может быть как абсолютным, так и относительным, но следует убедиться, что у WebdriverIO есть разрешение на запись в директорию.

Кроме того, WebdriverIO поддерживает создание скриншотов в различных форматах, включая PNG и JPEG, что удобно для использования в различных системах и инструментах.

Скриншоты в случае ошибки

Одним из наиболее распространённых случаев использования скриншотов является захват изображения в случае ошибки в тесте. Это помогает анализировать причины сбоя. WebdriverIO предоставляет механизм для этого через обработчики ошибок, например, с использованием hooks (хуков), таких как afterTest.

Пример:

afterTest: function (test) {
    if (test.error) {
        const filePath = './screenshots/' + test.title + '.png';
        browser.saveScreenshot(filePath);
    }
}

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

Организация хранения скриншотов

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

Пример организации хранения:

const testName = test.title.replace(/[^a-zA-Z0-9]/g, '_'); // заменяем символы для безопасности
const dir = `./screenshots/${testName}`;
if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
}
const filePath = `${dir}/${testName}.png`;
browser.saveScreenshot(filePath);

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

Интеграция с системой управления задачами

Для автоматического прикрепления скриншотов к задачам можно использовать различные плагины и API-интерфейсы для популярных систем управления задачами, таких как Jira, GitHub Issues или другие. Важно, чтобы ваш процесс тестирования включал шаг, в котором после выполнения теста скриншоты отправляются в систему для дальнейшего анализа.

Пример интеграции с Jira с использованием REST API:

const axios = require('axios');

afterTest: async function (test) {
    if (test.error) {
        const filePath = './screenshots/' + test.title + '.png';
        browser.saveScreenshot(filePath);

        const formData = new FormData();
        formData.append('file', fs.createReadStream(filePath));

        const response = await axios.post('https://your-jira-instance.com/upload', formData, {
            headers: {
                'Authorization': 'Basic ' + Buffer.from('username:password').toString('base64'),
                ...formData.getHeaders(),
            }
        });

        // Пример создания комментария с ссылкой на скриншот
        const issueId = 'TASK-123';
        const commentData = {
            body: `Скриншот ошибки: ![error_screenshot](${response.data.url})`,
        };

        await axios.post(`https://your-jira-instance.com/rest/api/2/issue/${issueId}/comment`, commentData, {
            headers: {
                'Authorization': 'Basic ' + Buffer.from('username:password').toString('base64'),
            }
        });
    }
}

Этот код загружает скриншот в Jira и добавляет ссылку на него в комментарий к задаче. Для этого используется REST API Jira и библиотека axios для выполнения HTTP-запросов.

Работа с видеозаписями

Если задача требует не только скриншотов, но и видеозаписей процесса тестирования, WebdriverIO поддерживает интеграцию с различными инструментами для захвата видео. Одним из таких инструментов является wdio-video-reporter. Этот плагин позволяет записывать видео всех тестов и сохранять их для дальнейшего анализа.

Для установки и настройки плагина можно использовать следующий код:

npm install wdio-video-reporter

Затем в конфигурации WebdriverIO добавляем плагин:

exports.config = {
    reporters: ['dot', ['video', {
        saveAllVideos: true,  // сохраняем все видео, а не только с ошибками
        videoSlowdownMultiplier: 1.5,  // ускоряем видео, если необходимо
        videoPath: './videos',  // путь для хранения видео
    }]],
};

Этот плагин автоматически создает видеофайлы для каждого теста, которые можно прикрепить к задачам.

Использование скриншотов в отчётах

В WebdriverIO можно интегрировать различные отчётные системы, такие как Allure Reporter, для более удобного просмотра результатов тестирования. В таких отчетах можно добавить ссылки на скриншоты, что позволяет тестировщикам и разработчикам быстро ознакомиться с результатами теста.

Для добавления скриншотов в отчёт с использованием Allure Reporter нужно использовать API Allure:

import allure from '@wdio/allure-reporter';

it('Тест с прикреплением скриншота в отчет', () => {
    browser.url('https://example.com');
    browser.saveScreenshot('./screenshots/example.png');
    allure.addAttachment('Example Screenshot', fs.readFileSync('./screenshots/example.png'), 'image/png');
});

В этом примере скриншот будет прикреплён к отчёту Allure, и его можно будет просматривать непосредственно в интерфейсе отчёта.