В этом руководстве мы рассмотрим, как выполнять действия перетаскивания (drag-and-drop) с помощью Selenium и WebDriver. Функции перетаскивания широко используются в веб-приложениях — от перестановки элементов на странице до обработки загрузки файлов. Автоматизация этой задачи с помощью Selenium помогает покрыть взаимодействие с пользователем.
Мы обсудим три основных метода, предоставляемых Selenium: dragAndDrop(), clickAndHold() и dragAndDropBy(). Эти методы позволяют моделировать действия перетаскивания с различными уровнями контроля: от простых перемещений элементов до более сложных (и точных) перетаскиваний с использованием смещений. Продемонстрируем эти методы на различных тестовых демо-страницах.
Установка и настройка
Прежде чем приступить к практикуму, нам нужно настроить окружение. Мы будем использовать Java-библиотеку Selenium и WebDriverManager для управления драйверами браузера. В примерах используется Chrome, но можно использовать любой другой поддерживаемый браузер.
Посмотрим, какие зависимости нужно включить в наш pom.xml:
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.27.0</version>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.9.2</version>
</dependency>
Далее инициализируем WebDriver:
private WebDriver driver;
@BeforeEach
public void setup() {
driver = new ChromeDriver();
driver.manage().window().maximize();
}
@AfterEach
public void tearDown() {
driver.quit();
}
Мы будем использовать известную демо-страницу Heroku.
dragAndDrop()
В веб-разработке элементы часто делают либо перетаскиваемыми (draggable), либо целевыми (droppable). Перетаскиваемый элемент можно нажимать и перемещать по экрану. С другой стороны, droppable-элемент служит в качестве цели, куда можно поместить draggable-элементы. Например, в приложении для управления задачами мы можем перетащить задачу (draggable-элемент) и бросить ее в другой раздел (droppable-элемент), чтобы организовать задачи эффективнее.
Метод в Selenium dragAndDrop() — это прямой способ имитировать перетаскивание элемента из одного места в другое, в частности из draggable в droppable. Этот метод требует указания исходного (draggable) и целевого (droppable) элементов.
Рассмотрим, как это реализовать:
@Test
public void givenTwoElements_whenDragAndDropPerformed_thenElementsSwitched() {
String url = "http://the-internet.herokuapp.com/drag_and_drop";
driver.get(url);
WebElement sourceElement = driver.findElement(By.id("column-a"));
WebElement targetElement = driver.findElement(By.id("column-b"));
Actions actions = new Actions(driver);
actions.dragAndDrop(sourceElement, targetElement)
.build()
.perform();
}
В этом тесте мы сначала переходим на тестовую страницу, находим исходный и целевой элементы по их ID, а затем выполняем действие перетаскивания с помощью dragAndDrop(). Этот метод автоматически обрабатывает перемещение, что делает его подходящим для простых юзкейсов, когда нам нужно протестировать базовую операцию перетаскивания.
clickAndHold()
Иногда требуется больше контроля над операцией перетаскивания. Например, если мы хотим имитировать наведение на промежуточный элемент, или медленное перетаскивание по странице, метод clickAndHold() дает более плотный контроль над каждым этапом последовательности перетаскивания.
Вот как реализуется этот метод:
@Test
public void givenTwoElements_whenClickAndHoldUsed_thenElementsSwitchedWithControl() {
String url = "http://the-internet.herokuapp.com/drag_and_drop";
driver.get(url);
WebElement sourceElement = driver.findElement(By.id("column-a"));
WebElement targetElement = driver.findElement(By.id("column-b"));
Actions actions = new Actions(driver);
actions.clickAndHold(sourceElement)
.moveToElement(targetElement)
.release()
.build()
.perform();
}
В данном случае мы используем clickAndHold(), чтобы нажать на исходный элемент moveToElement(), переместить его к цели, и release() чтобы бросить его. Гибкость этого подхода позволяет моделировать такие сценарии, как перетаскивание по экрану или взаимодействие с элементами между ними.
Дополнительный контроль полезен при тестировании фич, требующих сложных движений или нескольких операций, таких как перетаскивание элементов в определенный раздел страницы или настройка ползунка.
dragAndDropBy()
В некоторых случаях может понадобиться перетащить элемент в точную позицию, а не бросать его в нужное место. Метод dragAndDropBy() позволяет перетащить элемент на определенное количество пикселей по осям X и Y. Это особенно полезно для тестирования элементов пользовательского интерфейса, например слайдеров, или при работе с изменяемыми или перемещаемыми элементами.
Продемонстрируем этот метод на примере демо-страницы jqueryui draggable:
@Test
public void givenDraggableElement_whenDragAndDropByUsed_thenElementMovedByOffset() {
String url = "https://jqueryui.com/draggable/";
driver.get(url);
driver.switchTo().frame(0);
WebElement draggable = driver.findElement(By.id("draggable"));
Actions actions = new Actions(driver);
actions.dragAndDropBy(draggable, 100, 100)
.build()
.perform();
}
В этом тесте мы сначала переходим на демонстрационную страницу jqueryui draggable, переключаемся на iframe где расположен перетаскиваемый элемент, а затем используем метод dragAndDropBy() для перемещения элемента, со смещением в 100 пикселей по осям X и Y.
Метод dragAndDropBy() дает возможность перемещать элементы в любую позицию на странице без необходимости указывать конкретную цель. Это может быть полезно при тестировании таких элементов, как слайдеры, панели или галереи изображений, где необходимо точное перемещение.
Резюме
В этой статье мы рассмотрели различные методы автоматизации функции перетаскивания в Selenium. Мы начали с метода dragAndDrop(), который перемещает элемент между указанными исходным и целевым местоположением. Этот метод идеально подходит для сценариев с draggable и droppable-элементами. Далее мы рассмотрели метод clickAndHold(). Он обеспечивает больше контроля для сложных движений, таких как медленное перетаскивание или взаимодействие с промежуточными элементами. Наконец, изучили метод dragAndDropBy(), который позволяет точно позиционировать элементы с помощью смещений по осям X и Y.
Полный код примеров можно найти на GitHub.
