Управление качеством и форматом скриншотов

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

Захват скриншотов

В WebdriverIO для получения скриншота используется метод saveScreenshot(). Он позволяет сохранять текущее состояние браузера в файл:

browser.saveScreenshot('./screenshots/homepage.png');
  • Путь может быть абсолютным или относительным.
  • Файл создается автоматически, если указанный каталог существует.

Для работы с отдельными элементами используется метод saveScreenshot() на элементе:

const loginButton = await $('#login');
await loginButton.saveScreenshot('./screenshots/login-button.png');

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

Контроль качества изображения

WebdriverIO поддерживает настройку качества изображений при сохранении в форматах, поддерживающих сжатие, таких как JPEG. Для этого можно использовать сторонние библиотеки, например, sharp, после получения скриншота в виде буфера:

const buffer = await browser.takeScreenshot();
const sharp = require('sharp');

await sharp(Buffer.from(buffer, 'base64'))
  .jpeg({ quality: 80 })
  .toFile('./screenshots/homepage-high-quality.jpg');
  • quality регулирует степень сжатия JPEG (0–100).
  • Сжатие уменьшает размер файла без потери ключевых деталей визуального теста.

Работа с различными форматами

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

  • PNG — лучше всего подходит для элементов с прозрачностью и мелкими деталями.
  • JPEG — уменьшает размер файла при сохранении основного визуального качества.
  • WebP — современный формат с высоким сжатием и поддержкой прозрачности.

Пример конвертации в WebP:

await sharp(Buffer.from(buffer, 'base64'))
  .webp({ quality: 90 })
  .toFile('./screenshots/homepage.webp');

Разделение скриншотов по папкам и времени

Для упорядочивания скриншотов рекомендуется использовать структуру каталогов по датам и времени:

const date = new Date().toISOString().replace(/:/g, '-');
await browser.saveScreenshot(`./screenshots/${date}/homepage.png`);
  • replace(/:/g, '-') используется для корректного именования файлов.
  • Такая организация упрощает анализ ошибок и автоматическую интеграцию с CI/CD.

Захват скриншотов при ошибках

WebdriverIO позволяет автоматически сохранять скриншоты при падении теста через хуки в конфигурации:

afterTest: async (test, context, { error }) => {
  if (error) {
    const timestamp = new Date().toISOString().replace(/:/g, '-');
    await browser.saveScreenshot(`./screenshots/failures/${timestamp}-${test.title}.png`);
  }
}
  • Скриншоты помогают анализировать причины падений без необходимости повторного запуска теста.

Объединение и сравнение изображений

Для визуального регрессионного тестирования часто используется сравнение скриншотов. WebdriverIO совместим с библиотеками, такими как pixelmatch или looks-same:

const fs = require('fs');
const pixelmatch = require('pixelmatch');
const PNG = require('pngjs').PNG;

const img1 = PNG.sync.read(fs.readFileSync('baseline.png'));
const img2 = PNG.sync.read(fs.readFileSync('current.png'));
const { width, height } = img1;
const diff = new PNG({ width, height });

const mismatch = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 });
fs.writeFileSync('diff.png', PNG.sync.write(diff));
  • threshold регулирует чувствительность к различиям.
  • Сравнение позволяет выявлять визуальные дефекты после изменений в интерфейсе.

Оптимизация производительности

  • Для большого количества скриншотов следует использовать буферы вместо прямого сохранения на диск.
  • Асинхронная запись файлов предотвращает блокировку тестов.
  • Компрессия изображений перед сохранением снижает нагрузку на файловую систему и ускоряет процесс CI/CD.

Настройка разрешения и масштабирования

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

await browser.setWindowSize(1920, 1080);
await browser.saveScreenshot('./screenshots/desktop.png');

await browser.setWindowSize(375, 667);
await browser.saveScreenshot('./screenshots/mobile.png');
  • Позволяет фиксировать состояние интерфейса на разных устройствах.
  • Обеспечивает полноту тестирования визуальных компонентов.

Скриншоты в отчеты

Интеграция скриншотов с отчетами Allure или другими системами улучшает читаемость результатов:

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

afterTest: async (test, context, { error }) => {
  if (error) {
    const screenshot = await browser.takeScreenshot();
    allure.addAttachment('Error Screenshot', Buffer.from(screenshot, 'base64'), 'image/png');
  }
}
  • Скриншоты отображаются прямо в отчете, облегчая анализ.
  • Поддерживаются различные форматы изображений, включая PNG и JPEG.

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

Оглавление