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

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

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

Protractor предоставляет метод getSize(), который возвращает объект с шириной (width) и высотой (height) элемента. Этот метод применяется к объекту ElementFinder.

Пример использования:

let button = element(by.css('.submit-button'));
button.getSize().then(size => {
    console.log('Ширина кнопки: ' + size.width);
    console.log('Высота кнопки: ' + size.height);
});

Важные моменты:

  • getSize() возвращает размеры видимой части элемента. Если элемент скрыт через CSS (display: none), метод вернёт {width: 0, height: 0}.
  • Размеры указываются в пикселях.
  • Метод можно комбинировать с ожиданиями (ExpectedConditions) для проверки динамических изменений интерфейса.

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

Для определения позиции на странице используется метод getLocation(), который возвращает объект с координатами x и y относительно верхнего левого угла страницы.

Пример:

let logo = element(by.css('.site-logo'));
logo.getLocation().then(location => {
    console.log('Позиция по оси X: ' + location.x);
    console.log('Позиция по оси Y: ' + location.y);
});

Особенности:

  • Координаты всегда измеряются в пикселях.
  • Если элемент внутри скроллируемого контейнера, координаты будут относительно документа, а не контейнера.
  • Для проверки положения относительно видимой области экрана можно использовать комбинацию getLocation() и скроллинга.

Использование getRect()

Метод getRect() объединяет getSize() и getLocation() и возвращает объект с полями x, y, width, height. Это особенно удобно для комплексных проверок позиции и размера.

Пример:

let inputField = element(by.css('#username'));
inputField.getRect().then(rect => {
    console.log('Позиция и размер поля ввода:');
    console.log(`x: ${rect.x}, y: ${rect.y}, width: ${rect.width}, height: ${rect.height}`);
});

Преимущества getRect():

  • Уменьшает количество вызовов методов.
  • Упрощает проверку, попадает ли элемент в заданный диапазон координат и размер.
  • Полезно при тестировании адаптивного интерфейса на разных разрешениях.

Проверка размеров и позиции в ассертах

В Protractor часто используют фреймворк Jasmine для проверки значений. Например, можно проверить ширину кнопки:

expect(button.getSize().then(size => size.width)).toBeGreaterThan(100);

Для позиции:

expect(logo.getLocation().then(loc => loc.y)).toBeLessThan(50);

Можно также проверять целый прямоугольник через getRect():

inputField.getRect().then(rect => {
    expect(rect.width).toBe(200);
    expect(rect.height).toBe(40);
    expect(rect.x).toBeGreaterThan(10);
    expect(rect.y).toBeGreaterThan(10);
});

Особенности динамических элементов

Элементы, размеры и позиции которых меняются при анимации или при ресайзе окна, требуют дополнительных приёмов:

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

Пример ожидания и проверки позиции после анимации:

let menu = element(by.css('.dropdown-menu'));
browser.wait(ExpectedConditions.visibilityOf(menu), 5000);
menu.getRect().then(rect => {
    expect(rect.y).toBeCloseTo(100, 1); // допуск ±1px
});

Совместная работа с CSS-свойствами

Иногда полезно комбинировать проверку getSize() и getLocation() с прямым чтением CSS-свойств:

button.getCssValue('padding').then(padding => console.log('Padding кнопки: ' + padding));

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

Заключение по методам

  • getSize() — ширина и высота элемента.
  • getLocation() — координаты элемента на странице.
  • getRect() — объединяет размеры и позицию в одном объекте.
  • Для динамических элементов обязательно использовать ожидания и проверять значения с допустимым погрешностями.
  • Совмещение с CSS-свойствами расширяет возможности тестирования макета и визуальных эффектов.

Эти методы образуют базовый инструмент контроля визуального расположения и размеров элементов в Protractor и являются необходимыми при написании надежных и точных UI-тестов.

Оглавление