Как перетащить Selenium (Пример)

Что такое перетаскивание (Drag and Drop)? Selenium?

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

In Selenium WebDriver, перетаскивание осуществляется через Действия класс, предоставляющий специализированные методы для объединения жестов мыши и их выполнения в виде единого составного действия.

Класс Actions предоставляет два основных метода для автоматизации перетаскивания элементов:

Синтаксис:

Actions act = new Actions(driver);
//for drag and drop directly on an element
act.dragAndDrop(Source, Destination).build().perform();

//for drag and drop with pixel offsets
act.dragAndDropBy(WebElement Source, int xOffset, int yOffset).build().perform();

Здесь, dragAndDrop() принимает исходные и целевые веб-элементы, а dragAndDropBy() принимает исходный элемент и смещения пикселей по осям x/y для его перемещения.

Как перетащить Selenium

Следующие три сценария демонстрируют практическую автоматизацию с помощью перетаскивания элементов. Guru99 демонстрационная страница https://demo.guru99.com/test/drag_drop.htmlЦель состоит в том, чтобы переместить БАНК дебетовый элемент в Аккаунт В дебетовой части счета необходимо правильно отразить сумму в 5000 долларов как дебетовую транзакцию.

Сценарий 1: Перетаскивание с использованием метода dragAndDrop.

В этом сценарии исходный элемент (БАНК) перетаскивается в целевой элемент (сторона списания со счета) с помощью dragAndDrop(source, target) метод, который принимает исходные и целевые WebElements напрямую.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDropExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        // Locate the target (Account debit side) element
        WebElement Dest = driver.findElement(By.xpath("//*[@id='bank']/li"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Perform drag and drop
        act.dragAndDrop(Source, Dest).build().perform();
    }
}

После выполнения скрипта, БАНК плитка перемещается в Аккаунт В дебетовой зоне сумма в 5000 долларов зарегистрирована как дебет.

Визуальный результат на демонстрационной странице выглядит следующим образом:

Сценарий 2: Перетаскивание с использованием метода dragAndDropBy

dragAndDropBy(source, xOffset, yOffset) Этот метод обеспечивает точность на уровне пикселей. Вместо отбрасыванияping При перемещении целевого элемента источник перемещается на заданное количество пикселей вдоль осей X и Y.

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

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDropByExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate the source (BANK) element
        WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));

        // Create the Actions instance
        Actions act = new Actions(driver);
        // Drag the source by 400 pixels right and 0 pixels down
        act.dragAndDropBy(Source, 400, 0).build().perform();
    }
}

Скрипт перемещает плитку BANK на заданное смещение и размещает ее на стороне дебета счета, получая тот же финансовый результат, что и в Сценарии 1.

Сценарий 3: Перетаскивание, размещение и проверка нескольких элементов.

В этом сценарии выполняется цепочка операций перетаскивания, а результат проверяется путем проверки итоговой суммы в целевом элементе. Несколько исходных элементов (БАНК, ПРОДАЖИ, 5000, 500) перемещаются в соответствующие дебетовые и кредитовые зоны, и скрипт подтверждает, что итоговые суммы соответствуют ожидаемому балансу.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDropMultiple {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://demo.guru99.com/test/drag_drop.html");

        // Locate sources
        WebElement srcBank = driver.findElement(By.xpath("//*[@id='credit2']/a"));
        WebElement srcSales = driver.findElement(By.xpath("//*[@id='credit1']/a"));
        WebElement src5000 = driver.findElement(By.xpath("//*[@id='fourth']/a"));
        WebElement src500 = driver.findElement(By.xpath("//*[@id='fourth']/a"));

        // Locate targets
        WebElement debitSide = driver.findElement(By.xpath("//*[@id='bank']/li"));
        WebElement creditSide = driver.findElement(By.xpath("//*[@id='loan']/li"));
        WebElement amount7 = driver.findElement(By.xpath("//*[@id='amt7']/li"));
        WebElement amount8 = driver.findElement(By.xpath("//*[@id='amt8']/li"));

        Actions act = new Actions(driver);
        act.dragAndDrop(srcBank, debitSide).build().perform();
        act.dragAndDrop(srcSales, creditSide).build().perform();
        act.dragAndDrop(src5000, amount7).build().perform();
        act.dragAndDrop(src500, amount8).build().perform();

        // Verify the displayed total
        String total = driver.findElement(By.xpath("//*[@id='totamt']")).getText();
        if (total.equals("5500")) {
            System.out.println("Test Passed: total matches expected 5500");
        } else {
            System.out.println("Test Failed: actual total " + total);
        }
    }
}

Этот пример демонстрирует, как перетаскивание элементов можно комбинировать с утверждениями для проверки функционального поведения, а не только визуального перемещения.

Рекомендации по автоматизации с помощью перетаскивания

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

• Дождитесь появления элементов: Используйте WebDriverWait с ExpectedConditions.elementToBeClickable перед тем, как начать перетаскивание.
• Предпочитаю перетаскивание (dragAndDrop). JavaВзлом скриптов: Встроенные события перетаскивания HTML5 иногда требуют JavaВ качестве резервного варианта можно использовать скрипт, но в первую очередь следует полагаться на API действий.
• Прокрутите целевой объект, чтобы он отобразился: Указание адреса, находящегося вне поля зрения, приводит к скрытым сбоям. Actions.scrollToElement или JavaПеред перетаскиванием прокрутите скрипт.
• Проверьте результат: Всегда фиксируйте измеримое изменение состояния (текст, атрибут, количество) после перетаскивания, вместо того чтобы полагаться на то, что действие уже выполнено.
• Запускать на стабильном разрешении: Перетаскивание с пиксельным смещением перестаёт работать, если размер области просмотра отличается от размера, использованного для вычисления смещений.

Часто задаваемые вопросы (FAQ)