Размер и позиция элемента

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

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

WebdriverIO предоставляет методы для точного измерения размеров элементов на странице:

const elem = await $('#elementId');
const size = await elem.getSize();
console.log(size.width, size.height);

Метод getSize() возвращает объект с полями:

  • width — ширина элемента в пикселях.
  • height — высота элемента в пикселях.

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

Для элементов, у которых необходимо учитывать только внутреннюю область контента (без границ и паддингов), можно использовать getElementRect():

const rect = await elem.getElementRect();
console.log(rect.width, rect.height, rect.x, rect.y);

Объект rect содержит:

  • width — ширина элемента.
  • height — высота элемента.
  • x — координата верхнего левого угла по оси X относительно документа.
  • y — координата верхнего левого угла по оси Y относительно документа.

Определение позиции элемента

Для проверки корректного расположения элементов на странице используется getLocation():

const location = await elem.getLocation();
console.log(location.x, location.y);

Метод возвращает координаты верхнего левого угла элемента относительно документа. Это важно для:

  • Проверки выравнивания элементов.
  • Тестирования динамически изменяемых интерфейсов.
  • Скроллинга к элементу перед взаимодействием.

Если необходимо узнать координаты относительно окна просмотра браузера (viewport), используется метод getBoundingClientRect() через выполнение скрипта:

const rect = await browser.execute((el) => el.getBoundingClientRect(), elem);
console.log(rect.top, rect.left, rect.width, rect.height);

Поле top и left определяют положение элемента относительно верхнего левого угла окна браузера, что важно при проверке видимости элемента на экране.

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

Размер и позиция тесно связаны с видимостью. Элемент может существовать в DOM, но быть невидимым, если его координаты выходят за границы окна или его размеры равны нулю:

const size = await elem.getSize();
const location = await elem.getLocation();

const isVisible = size.width > 0 && size.height > 0 &&
                  location.x >= 0 && location.y >= 0;

WebdriverIO также предоставляет встроенный метод isDisplayed():

const displayed = await elem.isDisplayed();

Он проверяет, видим ли элемент для пользователя с учетом стилей CSS (display, visibility, opacity) и перекрытий другими элементами.

Скроллинг к элементу

Для взаимодействия с элементом, который находится за пределами видимой области, требуется прокрутка:

await elem.scrollIntoView();

Метод принимает параметр alignToTop:

await elem.scrollIntoView({ block: 'center' });

Параметр block может принимать значения:

  • 'start' — прокрутка к верхнему краю элемента.
  • 'center' — элемент оказывается в центре окна.
  • 'end' — прокрутка к нижнему краю элемента.
  • 'nearest' — выбирается ближайшее положение.

Корректное использование скроллинга особенно важно при тестировании мобильной версии сайта или длинных страниц с динамическим контентом.

Адаптивные сценарии и вычисление позиции

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

const elem1 = await $('#firstElement');
const elem2 = await $('#secondElement');

const rect1 = await elem1.getElementRect();
const rect2 = await elem2.getElementRect();

const distanceX = rect2.x - rect1.x;
const distanceY = rect2.y - rect1.y;

Такой подход позволяет проверять:

  • Расстояние между кнопками или полями формы.
  • Вертикальное и горизонтальное выравнивание блоков.
  • Корректность расположения элементов в сетках и флекс-контейнерах.

Резюме ключевых методов

Метод Возвращает Примечание
getSize() {width, height} Размер элемента
getElementRect() {x, y, width, height} Размер и координаты элемента
getLocation() {x, y} Положение элемента относительно документа
isDisplayed() true/false Видимость элемента
scrollIntoView() void Прокрутка к элементу
browser.execute(el => el.getBoundingClientRect(), elem) {top, left, width, height} Координаты относительно окна браузера

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

Оглавление