드래그 앤 드롭 방법 Selenium (예)
Krishna 룽타
⚡ 스마트 요약
드래그 앤 드롭 Selenium WebDriver는 마우스를 이용한 상호작용을 자동화하여 소스 요소를 이동시킨 후 지정된 대상 위치에 놓는 동작을 구현할 수 있습니다. Actions 클래스는 dragAndDrop 및 dragAndDropBy 메서드를 통해 이러한 제스처를 지원하며, 이를 통해 브라우저 자동화를 정확하고 반복적으로 수행할 수 있습니다.
드래그 앤 드롭이란 무엇인가요? 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) 소스 및 대상 WebElement를 직접 허용하는 메서드입니다.
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 메서드를 사용한 드래그 앤 드롭
The 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드래그를 시작하기 전에. - 드래그 앤 드롭을 선호합니다. Java스크립트 팁: 네이티브 HTML5 드래그 이벤트는 때때로 다음과 같은 필요가 있습니다. Java스크립트 대체 기능이 있지만, 우선 Actions API를 사용하는 것이 좋습니다.
- 대상을 화면에 표시되도록 스크롤하세요. 화면 밖의 목적지를 선택하면 오류 메시지가 표시되지 않습니다. 사용
Actions.scrollToElement또는 Java드래그하기 전에 스크립트를 스크롤하세요. - 결과를 확인하십시오: 드롭 후에는 실행된 액션을 신뢰하기보다는 항상 측정 가능한 상태 변화(텍스트, 속성, 개수)를 확인해야 합니다.
- 안정적인 해상도에서 실행하세요: 뷰포트 크기가 오프셋 계산에 사용된 크기와 다르면 픽셀 오프셋 드래그가 제대로 작동하지 않습니다.
