Скриншоты отдельных элементов

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

Получение элемента

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

const button = await $('#submit-button');

Метод $ возвращает объект типа WebdriverIO.Element, предоставляющий полный набор действий, включая возможность получения скриншота.

Создание скриншота элемента

Для снятия скриншота конкретного элемента используется метод saveScreenshot() напрямую на объекте элемента:

await button.saveScreenshot('./screenshots/submit-button.png');

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

  • Путь для сохранения может быть абсолютным или относительным.
  • Формат файла зависит от расширения (.png, .jpg).
  • WebdriverIO автоматически создаёт скриншот именно видимой области элемента, исключая остальную часть страницы.

Асинхронная работа и ожидания

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

const button = await $('#submit-button');
await button.waitForDisplayed({ timeout: 5000 });
await button.saveScreenshot('./screenshots/submit-button.png');

Параметр timeout задаёт максимальное время ожидания, после которого тест завершится ошибкой, если элемент не стал видимым.

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

Для сложных элементов, таких как карточки продуктов или формы, можно комбинировать селекторы и методы поиска внутри элементов:

const card = await $('.product-card[data-id="123"]');
const price = await card.$('.price');
await price.saveScreenshot('./screenshots/product-123-price.png');

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

Настройка качества и размеров

Метод saveScreenshot() поддерживает создание скриншотов с дефолтными параметрами браузера. Для управления качеством или размером можно использовать дополнительные инструменты Node.js, например, библиотеку sharp, для последующей обработки изображений:

const sharp = require('sharp');
await button.saveScreenshot('./screenshots/raw.png');

await sharp('./screenshots/raw.png')
    .resize(200, 100)
    .toFile('./screenshots/resized.png');

Это позволяет подгонять скриншоты под требования отчётности или сравнения с эталонными изображениями.

Визуальное сравнение скриншотов

WebdriverIO интегрируется с библиотеками визуального тестирования, такими как wdio-image-comparison-service. После создания скриншота элемента его можно сравнить с эталонным изображением:

const comparisonResult = await browser.checkElement(button, 'submit-button');
expect(comparisonResult.misMatchPercentage).toBeLessThan(0.1);

Преимущества такого подхода:

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

Логирование и структурирование скриншотов

Для удобства поддержки тестов рекомендуется:

  • Создавать отдельные папки для скриншотов каждого тестового сценария.
  • Использовать уникальные имена файлов, например, добавляя временную метку или идентификатор элемента.
  • Хранить как “сырые” скриншоты, так и обработанные для отчётности.
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
await button.saveScreenshot(`./screenshots/${timestamp}-submit-button.png`);

Такой подход упрощает отладку и отслеживание изменений интерфейса с течением времени.

Особенности работы с динамическими элементами

  • Элементы с анимацией: перед снятием скриншота рекомендуется приостановить анимацию или дождаться её завершения.
  • Ленивая загрузка изображений: необходимо убедиться, что все внутренние ресурсы элемента загружены.
  • Скрытые элементы: метод saveScreenshot() не делает скриншот скрытых элементов; необходимо либо сделать элемент видимым, либо использовать скриншоты всей страницы с последующей обрезкой.

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

Оглавление