jQuery UI drag-drop

WebDriverIO — это мощный инструмент для автоматизации браузерных тестов, который позволяет легко взаимодействовать с элементами на веб-странице. Одна из типичных задач, которая часто встречается при автоматизации тестов интерфейсов, — это тестирование функционала перетаскивания элементов (drag-and-drop). В этой статье рассмотрим, как настроить и протестировать drag-and-drop с использованием библиотеки jQuery UI и WebDriverIO.

Что такое jQuery UI drag-and-drop?

Библиотека jQuery UI предоставляет удобный механизм для создания интерактивных элементов на веб-страницах, включая функционал для перетаскивания (drag-and-drop). С помощью методов draggable() и droppable() можно легко реализовать интерфейсы, в которых элементы можно перетаскивать и размещать в других областях страницы.

Пример простого кода для реализации drag-and-drop с использованием jQuery UI:

$("#drag").draggable();
$("#drop").droppable({
  drop: function(event, ui) {
    $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
  }
});

Задача

Необходимо написать тест для проверки работоспособности drag-and-drop на странице, использующей jQuery UI для создания перетаскиваемых элементов.

Настройка WebDriverIO для работы с drag-and-drop

  1. Установка зависимостей Для начала убедитесь, что у вас установлен WebDriverIO и соответствующие плагины. Если вы ещё не настроили проект, установите его с помощью следующих команд:
npm init -y
npm install --save-dev webdriverio @wdio/cli @wdio/local-runner @wdio/mocha-framework @wdio/chromedriver-service

После установки настроите конфигурационный файл WebDriverIO с помощью команды:

npx wdio config
  1. Подключение jQuery UI на странице Для корректной работы тестов необходимо, чтобы веб-страница, с которой будет взаимодействовать WebDriverIO, использовала jQuery UI для реализации drag-and-drop. Убедитесь, что на странице подключены соответствующие скрипты и стили.

Реализация теста drag-and-drop

В WebDriverIO для имитации действий пользователя, таких как перетаскивание элементов, используются методы, которые могут быть использованы для перемещения элементов по координатам. Однако, когда требуется тестировать drag-and-drop с jQuery UI, необходимо имитировать действия с использованием конкретных методов.

Для выполнения drag-and-drop с использованием WebDriverIO можно использовать метод dragAndDrop(), который доступен через API WebDriverIO.

Пример теста для проверки drag-and-drop:

describe('Drag and Drop Test', () => {
    it('should drag the element and drop it to the target', async () => {
        // Открытие страницы с drag-and-drop функциональностью
        await browser.url('https://example.com/drag-and-drop');

        // Находим элементы для перетаскивания и цели
        const draggable = await $('#drag');
        const droppable = await $('#drop');

        // Выполняем перетаскивание
        await draggable.dragAndDrop(droppable);

        // Проверка, что элемент был успешно перемещён
        const text = await droppable.getText();
        expect(text).toBe('Dropped!');
    });
});
Объяснение кода:
  • await browser.url('https://example.com/drag-and-drop'); — открывает веб-страницу, содержащую drag-and-drop функциональность.
  • const draggable = await $('#drag'); — находит элемент, который будет перетаскиваться.
  • const droppable = await $('#drop'); — находит целевой элемент, в который нужно перетащить первый элемент.
  • await draggable.dragAndDrop(droppable); — выполняет операцию перетаскивания с помощью WebDriverIO.
  • const text = await droppable.getText(); — проверяет, что текст целевого элемента изменился после успешного перетаскивания.

Дополнительные особенности

  1. Использование координат WebDriverIO позволяет перетаскивать элемент, задав конкретные координаты. Это полезно, если нужно более точно управлять движением элементов на странице. Пример:
await draggable.dragAndDrop({x: 100, y: 150});

В этом случае элемент будет перемещён на страницу с координатами x: 100, y: 150.

  1. Проверка наличия CSS изменений После выполнения перетаскивания важно проверить, что элементы изменили свой внешний вид или поведение. Например, можно убедиться, что элемент изменил цвет или отображается новый текст.
const droppableStyle = await droppable.getCSSProperty('background-color');
expect(droppableStyle.value).toBe('rgb(0, 255, 0)'); // Ожидается зелёный цвет
  1. Использование drag-and-drop в различных браузерах Необходимо учитывать, что поведение drag-and-drop может немного различаться в разных браузерах, поэтому рекомендуется запускать тесты в нескольких браузерах (например, Chrome, Firefox, Safari) с использованием соответствующих сервисов, таких как @wdio/sauce-service или @wdio/browserstack-service, для кроссбраузерного тестирования.

Советы по оптимизации тестов drag-and-drop

  • Использование ожиданий: Во время тестирования drag-and-drop важно удостовериться, что элементы успели переместиться и состояние страницы обновилось. Использование waitForExist(), waitForDisplayed() или waitUntil() позволяет гарантировать, что элементы видны или доступны для взаимодействия.
await droppable.waitForDisplayed();

  • Разделение тестов: Если на странице несколько элементов с drag-and-drop, можно разбить тесты на несколько частей, чтобы проверять каждый элемент по отдельности. Это улучшает читаемость тестов и позволяет локализовать возможные ошибки.

  • Использование сторонних библиотек для улучшения синхронизации: Если WebDriverIO по какой-то причине не может корректно выполнить перетаскивание, можно воспользоваться такими библиотеками, как actions или mouseActions, для более сложных сценариев.

Заключение

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

Оглавление