Регионные снимки экрана

Региональные снимки экрана в WebdriverIO

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

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

Как создать региональный скриншот

Для того чтобы создать снимок экрана только части веб-страницы, необходимо:

  1. Найти элемент, с которого будет сделан снимок.
  2. Получить его координаты и размеры.
  3. Использовать эти данные для создания скриншота только в указанной области.

Пример кода

const element = await $('#some-element');  // Найти нужный элемент
const rect = await element.getRect();     // Получить координаты и размеры элемента
await browser.saveScreenshot('./region-screenshot.png', {
    x: rect.x,
    y: rect.y,
    width: rect.width,
    height: rect.height
});

В данном примере:

  • $('#some-element') — находит элемент, с которого будет сделан скриншот.
  • getRect() — метод, возвращающий объект с координатами и размерами элемента, включая его x, y, width и height.
  • saveScreenshot() — функция, создающая скриншот, с указанием параметров для ограниченной области.

Параметры x, y, width, и height указывают точку начала области и её размеры, что позволяет захватить именно ту часть экрана, которая соответствует выбранному элементу.

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

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

Пример с прокруткой

const element = await $('#some-element');
await element.scrollIntoView();  // Прокручиваем страницу до элемента
const rect = await element.getRect();
await browser.saveScreenshot('./scrolled-region-screenshot.png', {
    x: rect.x,
    y: rect.y,
    width: rect.width,
    height: rect.height
});

Работа с несколькими элементами

Если нужно сделать снимок нескольких элементов одновременно или части страницы с разными элементами, можно использовать методы, позволяющие захватить более сложные области. Например, можно взять снимок нескольких элементов, комбинируя их координаты или делая снимки нескольких частей экрана.

Пример с несколькими элементами

const element1 = await $('#first-element');
const element2 = await $('#second-element');

const rect1 = await element1.getRect();
const rect2 = await element2.getRect();

// Пример создания комбинированного региона
const x = Math.min(rect1.x, rect2.x);
const y = Math.min(rect1.y, rect2.y);
const width = Math.max(rect1.x + rect1.width, rect2.x + rect2.width) - x;
const height = Math.max(rect1.y + rect1.height, rect2.y + rect2.height) - y;

await browser.saveScreenshot('./combined-region-screenshot.png', { x, y, width, height });

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

Ограничения региональных снимков экрана

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

Практическое использование региональных скриншотов

Региональные снимки экрана полезны в различных ситуациях:

  • Визуальное тестирование: Когда нужно сравнить определённые части интерфейса, например, кнопки или поля ввода, и убедиться, что их внешний вид не изменился.
  • Тестирование элементов UI: С помощью региональных скриншотов можно точно зафиксировать состояние интерфейса, включая изменение цвета, расположение элементов и их размер.
  • Регрессионное тестирование: В процессе автоматизированного тестирования важно проверять не только работоспособность функционала, но и внешний вид элементов. С помощью региональных снимков можно зафиксировать мелкие детали UI и убедиться в их неизменности.

Дополнительные настройки для скриншотов

WebdriverIO также поддерживает создание снимков экрана с прозрачным фоном. Это может быть полезно, если нужно сделать снимок с выделением только самого элемента без фонового контента. Для этого используется опция transparent_background.

await browser.saveScreenshot('./transparent-region-screenshot.png', {
    x: rect.x,
    y: rect.y,
    width: rect.width,
    height: rect.height,
    transparent_background: true
});

Заключение

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

Оглавление