Работа с слайдерами

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

Структура слайдера

Слайдер обычно состоит из следующих элементов:

  • Полоса слайдера (track) — визуальный элемент, отображающий диапазон значений.
  • Ползунок (thumb/handle) — перемещаемый элемент, отвечающий за выбор значения.
  • Опциональные подписи (labels/tooltip) — показывают текущее значение при перемещении ползунка.

Важно понимать, что слайдер может быть реализован с использованием разных HTML-элементов: <input type="range">, <div> с обработчиками событий или сторонними библиотеками (например, Angular Material mat-slider).

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

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

let sliderHandle = element(by.css('.slider-handle'));
let sliderTrack = element(by.css('.slider-track'));

Если используется Angular Material:

let matSlider = element(by.tagName('mat-slider'));
let matHandle = matSlider.element(by.css('.mat-slider-thumb'));

Использование element(by.css(...)) и element.all(...) позволяет работать как с одиночными, так и с группами слайдеров.

Эмуляция перемещения ползунка

Protractor предоставляет несколько способов перемещения ползунка. Основной метод — использование browser.actions() для симуляции drag-and-drop.

Пример перемещения ползунка на определённое смещение:

const { browser, element, by } = require('protractor');

let sliderHandle = element(by.css('.slider-handle'));

browser.actions()
  .dragAndDrop(sliderHandle, { x: 50, y: 0 })  // смещение по оси X на 50px
  .perform();

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

  • Смещение указывается в пикселях, что может потребовать динамического расчета ширины слайдера и желаемого значения.
  • По вертикальным слайдерам смещение используется по оси Y.
  • Для плавного перемещения можно использовать цепочку действий: mouseDown(), mouseMove(), mouseUp().

Выбор значения по диапазону

Чтобы выбрать конкретное значение на слайдере, необходимо вычислить смещение относительно минимального и максимального значения.

Пример вычисления смещения:

let sliderTrack = element(by.css('.slider-track'));
let sliderHandle = element(by.css('.slider-handle'));

sliderTrack.getSize().then(size => {
  let trackWidth = size.width;
  let desiredValue = 75;
  let minValue = 0;
  let maxValue = 100;

  let offsetX = (desiredValue - minValue) / (maxValue - minValue) * trackWidth;

  browser.actions()
    .dragAndDrop(sliderHandle, { x: offsetX, y: 0 })
    .perform();
});

Пояснения:

  • getSize() возвращает размеры элемента, необходимые для точного расчёта позиции ползунка.
  • Формула (desiredValue - minValue) / (maxValue - minValue) * trackWidth переводит значение в пиксели смещения.

Использование sendKeys для <input type="range">

Некоторые слайдеры реализованы как <input type="range">. В этом случае можно использовать стандартный метод sendKeys:

let sliderInput = element(by.css('input[type="range"]'));
sliderInput.clear();
sliderInput.sendKeys('50');

Преимущества метода:

  • Не требуется вычислять пиксели.
  • Работает только с элементами <input> и может не поддерживать кастомные реализации слайдера.

Проверка выбранного значения

После перемещения ползунка необходимо убедиться, что значение установлено корректно.

sliderHandle.getAttribute('aria-valuenow').then(value => {
  expect(value).toBe('75');
});

Или для <input>:

sliderInput.getAttribute('value').then(value => {
  expect(value).toBe('50');
});

Использование атрибутов aria-valuenow, value или текста tooltip позволяет надёжно проверять состояние слайдера.

Работа с динамическими и сложными слайдерами

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

  • Ожидание завершения анимации: browser.wait(ExpectedConditions.stalenessOf(element)).
  • Эмуляция drag-and-drop через mouseDown, mouseMove, mouseUp.
  • Использование JavaScript для непосредственного изменения значения:
browser.executeScript("arguments[0].value = arguments[1]; arguments[0].dispatchEvent(new Event('input'));", sliderInput.getWebElement(), 50);

Этот метод полезен, когда стандартные действия Protractor не срабатывают из-за кастомной реализации слайдера.

Итоговые рекомендации

  • Всегда проверять тип слайдера: <input> или кастомный элемент.
  • Для кастомных слайдеров использовать browser.actions() и вычислять смещение в пикселях.
  • Для <input type="range"> предпочтительно использовать sendKeys или executeScript.
  • Проверку значения выполнять через атрибуты value или aria-valuenow.
  • Для динамических слайдеров учитывать анимации и задержки.

Работа со слайдерами в Protractor требует внимательного подхода к структуре элемента и корректного расчёта перемещения ползунка. Правильное сочетание методов drag-and-drop, sendKeys и executeScript обеспечивает надёжное тестирование интерактивных элементов интерфейса.

Оглавление