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

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

Настройка среды для работы со скриншотами

Для работы со скриншотами в Protractor используется метод browser.takeScreenshot(). Этот метод возвращает строку в формате Base64, представляющую изображение текущего состояния браузера. Чтобы сохранить скриншот в файл, необходимо использовать модуль fs:

const fs = require('fs');

async function saveScreenshot(filename) {
    const png = await browser.takeScreenshot();
    fs.writeFileSync(filename, png, { encoding: 'base64' });
}

Ключевые моменты:

  • Метод takeScreenshot() работает только после полной загрузки страницы и всех её элементов.
  • Сохранение выполняется в формате Base64, что делает его удобным для интеграции с отчётными системами.
  • Имя файла можно формировать динамически на основе времени выполнения теста или названия сценария, чтобы избежать перезаписи.

Интеграция скриншотов в отчёты Jasmine

Protractor из коробки поддерживает Jasmine. Для включения скриншотов в отчёт можно использовать Jasmine Reporter, например jasmine-reporters или jasmine-spec-reporter.

Пример интеграции с jasmine-reporters:

const JasmineReporters = require('jasmine-reporters');

jasmine.getEnv().addReporter(new JasmineReporters.JUnitXmlReporter({
    savePath: 'test-results',
    consolidateAll: false
}));

Чтобы автоматически делать скриншот при падении теста:

afterEach(async function() {
    if (this.currentTest.failedExpectations.length > 0) {
        const testName = this.currentTest.description.replace(/\s+/g, '_');
        await saveScreenshot(`screenshots/${testName}.png`);
    }
});

Важно учитывать:

  • Создание папки для скриншотов необходимо заранее (mkdir -p screenshots или аналог).
  • Названия файлов должны быть валидными для файловой системы.
  • Скриншоты лучше сохранять в структуре, соответствующей структуре тестов, чтобы легко находить ошибки.

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

Для более наглядных отчётов часто используют Allure. Allure позволяет прикреплять скриншоты к шагам теста, что значительно облегчает визуальный анализ. Пример использования с Jasmine:

const { allure } = require('allure-mocha/runtime');

afterEach(async function() {
    if (this.currentTest.state === 'failed') {
        const png = await browser.takeScreenshot();
        allure.attachment('Скриншот ошибки', Buffer.from(png, 'base64'), 'image/png');
    }
});

Преимущества интеграции с Allure:

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

Скриншоты при параллельном запуске тестов

При использовании Protractor с Selenium Grid или protractor.conf.js с multiCapabilities, важно корректно именовать файлы скриншотов:

const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const browserName = browser.capabilities.browserName;
const testName = this.currentTest.description.replace(/\s+/g, '_');
await saveScreenshot(`screenshots/${browserName}_${testName}_${timestamp}.png`);

Рекомендации:

  • Добавление меток браузера и времени предотвращает конфликты файлов.
  • Использование ISO-формата даты обеспечивает сортировку скриншотов по времени.
  • Для больших наборов тестов рекомендуется создавать поддиректории для каждого браузера или сессии.

Дополнительные возможности

  1. Скриншоты частей страницы: С помощью методов element(...).takeScreenshot() можно сделать снимок конкретного элемента, а не всей страницы.

  2. Скриншоты перед и после действия: Для сложных сценариев полезно фиксировать состояние страницы до выполнения критической операции и после, чтобы выявлять визуальные регрессии.

  3. Интеграция с CI/CD: Скриншоты можно автоматически сохранять в артефакты сборки Jenkins, GitLab CI или TeamCity, что облегчает анализ ошибок без локального запуска тестов.

Практические советы

  • Всегда проверять размер и формат изображений, чтобы отчёты оставались читаемыми и лёгкими.
  • Использовать единый стиль именования скриншотов для всех тестов проекта.
  • Для динамически обновляющихся страниц использовать ожидания (ExpectedConditions) перед снятием скриншота, чтобы избежать пустых или некорректных изображений.
  • Сохранять скриншоты только для упавших тестов или критических сценариев, чтобы не перегружать отчёты.

Скриншоты в Protractor обеспечивают визуальный контроль качества, позволяют быстро идентифицировать ошибки интерфейса и интегрируются с любыми системами отчётности. Правильная организация скриншотов и их автоматическое создание делает тестирование более прозрачным и управляемым.

Оглавление