Как да влачите и пускате Selenium (Пример)

Какво е „плъзгане и пускане“ 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() приема изходния и целевия WebElements, докато dragAndDropBy() взема изходния елемент и отместванията на пикселите x/y, за да го премести.

Как да влачите и пускате Selenium

Следните три сценария демонстрират практическа автоматизация с плъзгане и пускане на Guru99 демонстрационна страница https://demo.guru99.com/test/drag_drop.htmlЦелта е да се премести БАНКА дебитен елемент в Акаунт дебитната страна, така че сумата от $5000 да бъде правилно осчетоводена като дебитна транзакция.

Сценарий 1: Плъзгане и пускане с помощта на метода dragAndDrop

В този сценарий, изходният елемент (BANK) се изтегля върху местоназначението (дебитна страна на сметката), използвайки 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: Плъзгане, пускане и проверка на множество елементи

Този сценарий свързва множество операции с плъзгане и пускане и проверява резултата, като потвърждава крайната сума в целта. Няколко изходни елемента (BANK, SALES, 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Превъртане на скрипта преди плъзгане.
• Проверете резултата: Винаги заявявайте измерима промяна на състоянието (текст, атрибут, брой) след пускането, вместо да се доверявате на изпълнението на действието.
• Работи със стабилна резолюция: Плъзгането на пикселно отместване се прекъсва, ако размерът на прозореца за преглед се различава от този, използван за изчисляване на отместванията.

Въпроси и Отговори