Автор: Green Report
Оригинал статьи
Перевод: Ольга Алифанова

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

В этой статье мы рассмотрим три эффективных метода автоматизации слайдеров: перетаскивание (drag-and-drop), взаимодействие с помощью клавиатуры и прямой ввод значения. Каждый из этих подходов обладает своими плюсами и минусами, и мы подробно разберём, как их реализовать, а также в каких случаях каждый метод будет наиболее полезен.

Обзор проблем автоматизации слайдеров

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

1. Обеспечение точности установки значений
   Слайдеры – это зачастую непрерывная шкала или диапазон, поэтому важно точно устанавливать значения для тестирования конкретных случаев. Например, слайдер может позволять выбирать значение от 10 до 300 долларов, и нужно установить значение, скажем, в 150 долларов, а это требует высокой точности управления. Однако небольшие шаги, пределы диапазона и визуальное позиционирование слайдера делают точный выбор значения сложной задачей. Разные браузеры также могут по-разному интерпретировать движения мыши или ввод с клавиатуры, что может приводить к нестабильности результатов автоматизации.

Слайдер в действии

1. Работа с различиями и несоответствиями в браузерах
   Слайдеры зависят от особенностей конкретных браузеров, а это делает автоматизацию непредсказуемой. Например, действия перетаскивания могут работать по-разному в Chrome и Firefox, а обработка взаимодействий с клавиатурой может немного отличаться. Кроме того, каждый браузер использует собственный движок рендеринга, что влияет на визуальное и интерактивное поведение слайдера. Автоматизация слайдеров в разных браузерах часто требует дополнительных настроек или корректировок, чтобы обеспечить стабильный результат.
2. Тестирование поведения на десктопах и мобильных устройствах
   На мобильных устройствах слайдеры обычно регулируются с помощью касаний – свайпов и нажатий, а не мышью или клавиатурой. Мобильное взаимодействие добавляет дополнительный уровень сложности, так как для его имитации нужны события, основанные на касаниях. Тестирование поведения на десктопах и мобильных устройствах может требовать отдельной обработки в тестах, так как метод автоматизации слайдера, работающий на десктопе, может работать некорректно на мобильных устройствах. Обеспечение совместимости для обеих платформ критично для стабильного и согласованного пользовательского опыта.
3. Выбор подходящего под конкретные задачи метода автоматизации
   Каждый из подходов к автоматизации слайдеров — перетаскивание, управление с помощью клавиатуры и прямое задание значения — имеет свои преимущества и ограничения. Например, перетаскивание хорошо имитирует поведение пользователя, но может быть неточным при установке точных значений. Ввод с клавиатуры даёт больший контроль, но работает только тогда, когда слайдер поддерживает такой способ управления. Прямое задание значения – это быстро и точно, но тут полностью отсутствует имитация действий пользователя. Выбор правильного метода зависит от целей теста — что вам нужно? Симулировать реальные действия пользователя, добиться точного значения или сфокусироваться на функциональности, а не на отклике UI?

Метод 1: Перетаскивание

Перетаскивание в автоматизации слайдеров максимально имитирует реальные действия пользователей, используя события курсора для перемещения ползунка по заданной дорожке. Этот метод позволяет тесту изобразить, как пользователь кликает и перетаскивает слайдер для изменения значения, что особенно полезно для end-to-end тестирования. За счёт вычисления конкретных позиций в пикселях можно направлять ползунок на определенные значения дорожки.

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

• Реалистичная имитация пользователя: перетаскивание точно повторяет способ взаимодействия пользователей со слайдерами, что делает метод идеальным для имитации пользовательского поведения.
• Тестирование отклика UI: полезно для проверки анимаций, переходов и реакции интерфейса на события указателя.
• End-to-end тестирование взаимодействий: имитирует действие перетаскивания, и поэтому отлично подходит для комплексной проверки взаимодействия.

Недостатки:

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

Пример кода

В следующем тесте мы используем Playwright для имитации перетаскивания, перемещая ползунок слайдера между минимальным, средним и максимальным значениями диапазона.

Тест начинается с перехода на страницу со слайдером. Обязательно обновите URL, указав правильное расположение вашей страницы со слайдером — локальный файл или URL в сети.

test("Drag-and-Drop Actions", async ({ page }) => {
    await page.goto("your-website-url");
 

Далее мы выбираем элемент слайдера на странице с помощью CSS-селектора #priceRangeSlider. Эта ссылка на слайдер будет использоваться для взаимодействия и получения информации о слайдере на следующих шагах.

const slider = await page.$("#priceRangeSlider");

Теперь получаем boundingBox слайдера, который содержит данные о положении и размерах элемента. Мы отдельно сохраняем позицию startX и ширину слайдера sliderWidth, чтобы потом вычислять точные координаты по оси X для установки конкретных значений слайдера.

const boundingBox = await slider.boundingBox();
const startX = boundingBox.x;
const sliderWidth = boundingBox.width;

Мы определяем три целевые позиции, основываясь на начальной точке слайдера (startX) и его ширине:

• minPosition: самая левая позиция, соответствующая минимальному значению слайдера (например, $10).
• midPosition: середина ширины слайдера, примерно среднее значение диапазона (например, около $155).
• maxPosition: самый правый край слайдера, соответствующий максимальному значению (например, $300).

const minPosition = startX;
const midPosition = startX + sliderWidth / 2;
const maxPosition = startX + sliderWidth;

Чтобы переместить слайдер в минимальное положение, мы имитируем перетаскивание:

• Позиционирование мышь: Перемещаем мышь в начальную точку слайдера.
• Нажатие кнопки мыши: Имитируем нажатие кнопки мыши, чтобы захватить ползунок слайдера.
• Перетаскивание: Перемещаем мышь к позиции minPosition (левый край слайдера).
• Отпускание кнопки мыши: Отпускаем кнопку мыши, устанавливая слайдер на минимальное значение.

Наконец, мы проверяем, что отображаемое значение слайдера равно 10, используя ассерт. Так мы убеждаемся, что наши действия корректно установили слайдер в минимальное значение.

await page.mouse.move(startX, boundingBox.y + boundingBox.height / 2);
await page.mouse.down();
await page.mouse.move(minPosition, boundingBox.y + boundingBox.height / 2);
await page.mouse.up();
expect(page.locator("#sliderValue")).toHaveText("10");

Теперь повторяем те же шаги, чтобы установить слайдер в позицию посередине:

• Переместиться к началу: Помещаем мышь обратно в начальную точку слайдера.
• Перетащить к середине: Перемещаем мышь к позиции midPosition, примерно в середине ширины слайдера.
• Проверить значение: Подтверждаем, что отображаемое значение слайдера примерно равно 155, удостоверяясь, что слайдер был установлен в правильное среднее положение.

await page.mouse.move(startX, boundingBox.y + boundingBox.height / 2);
await page.mouse.down();
await page.mouse.move(midPosition, boundingBox.y + boundingBox.height / 2);
await page.mouse.up();
expect(page.locator("#sliderValue")).toHaveText("155");

Наконец, мы перемещаем слайдер в максимальное положение:

• Переместить мышь: Начинаем снова с начальной позиции слайдера.
• Перетащить до максимальной позиции: Перемещаемся к вычисленному maxPosition, самой правой точке слайдера.
• Проверить значение: Последний ассерт подтверждает, что на слайдере отображается значение 300, удостоверяясь, что слайдер достиг максимального значения.

await page.mouse.move(startX, boundingBox.y + boundingBox.height / 2);
await page.mouse.down();
await page.mouse.move(maxPosition, boundingBox.y + boundingBox.height / 2);
await page.mouse.up();
expect(page.locator("#sliderValue")).toHaveText("300");
});

 Лучшие сценарии для применения:

• Визуальное или UX-тестирование: Метод перетаскивания идеально подходит для проверки визуальной реакции слайдера на действия пользователя и плавности анимации.
• End-to-End тестирование реального поведения: Точно имитируя действия пользователя, этот подход хорош для тестов, которые требуют проверки полного процесса взаимодействия.

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

Метод 2: Взаимодействие с помощью клавиатуры

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

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

• Обеспечивает точную настройку, особенно для слайдеров с небольшим диапазоном.
• Поддерживает тестирование доступности, так как навигация с клавиатуры — распространённое требование доступности.

Недостатки:

• Медленнее по сравнению с прямым вводом, так как каждое изменение требует симуляции отдельного нажатия клавиши.
• Не все слайдеры изначально поддерживают взаимодействие с клавиатурой.

Пример кода

Тест начинается с перехода на страницу с компонентом слайдера. Обновите URL, чтобы указать правильное расположение вашей страницы со слайдером.

test("Keyboard-Based Interactions", async ({ page }) => {
    await page.goto("your-website-url");

Мы выбираем слайдер по его ID #priceRangeSlider и устанавливаем на него фокус. Это важно, чтобы слайдер мог принимать события клавиатуры, поскольку только элемент с фокусом реагирует на нажатия клавиш в тесте.

const slider = await page.$("#priceRangeSlider");
await slider.focus();

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

async function setSliderValue(targetValue) {
    let currentValue = await page.evaluate((el) => el.value, slider);

В этом цикле мы нажимаем клавишу ArrowRight, чтобы увеличить значение слайдера, пока оно не достигнет целевого значения. После каждого нажатия клавиши мы получаем обновленное значение слайдера, чтобы проверить, совпадает ли оно с targetValue. Цикл продолжается, пока значение слайдера не станет больше или равно целевому, имитируя взаимодействие пользователя с помощью нажатия стрелки вправо.

while (parseInt(currentValue, 10) < targetValue) {
    await slider.press("ArrowRight");
    currentValue = await page.evaluate((el) => el.value, slider);
}

Второй цикл делает противоположные вещи: он нажимает клавишу ArrowLeft, чтобы уменьшить значение слайдера до достижения целевого значения. Это полезно, если нужно переместить слайдер влево (к меньшему значению) и является важной частью имитации взаимодействия с помощью клавиатуры, где каждое изменение основывается на отдельном нажатии клавиши.

while (parseInt(currentValue, 10) > targetValue) {
    await slider.press("ArrowLeft");
    currentValue = await page.evaluate((el) => el.value, slider);
}

В конце мы вызываем функцию setSliderValue с несколькими целевыми значениями (например, 10, 50, 150 и 300), чтобы убедиться, что слайдер корректно устанавливается на каждую из указанных позиций. После каждого вызова выполняется ассерт, который убеждается, что отображаемое значение совпадает с целевым, гарантируя точную работу слайдера при управлении с клавиатуры.

await setSliderValue(10);
await expect(page.locator("#sliderValue")).toHaveText("10");
await setSliderValue(50);
await expect(page.locator("#sliderValue")).toHaveText("50");
await setSliderValue(150);
await expect(page.locator("#sliderValue")).toHaveText("150");
await setSliderValue(300);
await expect(page.locator("#sliderValue")).toHaveText("300");
});

Лучшие сценарии для применения:

• Тестирование доступности: Проверяет, что слайдер управляется с клавиатуры, что соответствует требованиям доступности.
• Тестирование точности: Идеально подходит для слайдеров с малыми шагами, где нужны конкретные значения, так как каждое изменение происходит постепенно.

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

Метод 3: Ввод значения напрямую

Этот метод напрямую устанавливает значение слайдера в DOM с помощью JavaScript, обходя любые действия пользователя. Прямое обновление внутреннего состояния слайдера позволяет быстро выполнять тесты и устраняет необходимость в промежуточных шагах - движениях мыши или нажатиях клавиш.

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

• Очень эффективен: прямой ввод значений позволяет быстро их менять, не имитируя действия пользователя, что ускоряет тесты.
• Стабилен относительно визуальных особенностей UI: поскольку этот метод обходит анимации и проблемы рендеринга, он избегает визуальных несоответствий, которые могут повлиять на тесты, основанные на реальных взаимодействиях.

Недостатки:

• Ограниченная симуляция: прямой ввод значения не имитирует поведение реального пользователя, поэтому этот метод может пропустить некоторые проблемы, связанные с UI.
• Не подходит для end-to-end тестирования: если цель — воспроизвести настоящий пользовательский опыт, этого метода недостаточно, так как он пропускает шаги взаимодействия.

Пример кода

Тест начинается с перехода по URL компонента слайдера. Обязательно замените путь на правильное расположение вашего HTML-файла или сайта.

test("Direct Value Injection", async ({ page }) => {
    await page.goto("your-website-url");

Мы определяем вспомогательную функцию setSliderValueDirectly, которая использует page.evaluate() для выполнения JavaScript в контексте браузера. Внутри evaluate находим слайдер по ID priceRangeSlider и напрямую устанавливаем его значение с помощью slider.value = targetValue. Для обновления отображения вызываем событие input на слайдере. Такой подход заставляет слайдер сразу отобразить новое значение без промежуточных взаимодействий.

async function setSliderValueDirectly(targetValue) {
    await page.evaluate((targetValue) => {
        const slider = document.getElementById("priceRangeSlider");
       slider.value = targetValue;
       slider.dispatchEvent(new Event("input"));
    }, targetValue);
}

В этом заключительном фрагменте мы вызываем функцию setSliderValueDirectly с конкретными значениями — 10, 50, 150 и 300 — и проверяем, что слайдер отображает эти значения, сравнивая текст в элементе с id #sliderValue с целевым значением. Такой подход позволяет быстро установить и проверить каждое значение, обеспечивая эффективный способ тестирования диапазона положений слайдера без имитации взаимодействия пользователя.

await setSliderValueDirectly(10);
await expect(page.locator("#sliderValue")).toHaveText("10");
 
await setSliderValueDirectly(50);
await expect(page.locator("#sliderValue")).toHaveText("50");
 
await setSliderValueDirectly(150);
await expect(page.locator("#sliderValue")).toHaveText("150");
 
await setSliderValueDirectly(300);
await expect(page.locator("#sliderValue")).toHaveText("300");
});

Лучшие сценарии для применения:

• Функциональное тестирование: идеально подходит для ситуаций, когда важна скорость, например, для проверки основной функциональности без нужды в имитации действий пользователя.
• Слайдеры с большим диапазоном: при тестировании конкретных значений в широком диапазоне слайдера прямой ввод значения обеспечивает точность и скорость.

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

Заключение

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

Вот краткое резюме методов, рассмотренных в этой статье:

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

Обсудить в форуме