드래그 앤 드롭 방법 Selenium (예)

작성자 : Krishna 룽타 Krishna 룽타
Hours 업데이트

셀레늄에서 드래그 앤 드롭

일부 웹 애플리케이션에는 웹 요소를 끌어서 정의된 영역이나 요소에 놓는 기능이 있습니다. 다음을 사용하여 이러한 요소의 드래그 앤 드롭을 자동화할 수 있습니다. Selenium 웹드라이버.

드래그 앤 드롭 구문

Actions 클래스에는 드래그 앤 드롭을 지원하는 두 가지 메서드가 있습니다. 연구해보자-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

드래그 앤 드롭 방법 Selenium

다음을 사용하여 요소를 끌어서 놓는 방법은 다음과 같습니다. Selenium 웹드라이버

dragAndDrop 메소드에서는 두 개의 매개변수를 전달합니다.

  1. 첫 번째 매개변수 “Sourcelocator”는 드래그해야 하는 요소입니다.
  2. 두 번째 매개변수 “Destinationlocator”는 첫 번째 요소를 드롭해야 하는 요소입니다.
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy 메소드에서 3개의 매개변수를 전달합니다.

  1. 첫 번째 매개변수 “Sourcelocator”는 드래그해야 하는 요소입니다.
  2. 두 번째 매개변수는 2의 x축 픽셀 값입니다.nd 첫 번째 요소를 삭제해야 하는 요소입니다.
  3. 세 번째 매개변수는 첫 번째 요소를 드롭해야 하는 두 번째 요소의 y축 픽셀 값입니다.

    드래그 앤 드롭 Selenium

다음의 3가지 시나리오를 통해 Selenium Webdriver를 사용하여 요소의 드래그 앤 드롭을 실제로 보여드리겠습니다.

시나리오 1: BANK 요소를 DragAndDrop 메서드를 통해 특정 셀에 끌어서 놓습니다.

다음 코드에서는 주어진 URL을 시작합니다. Firefox 브라우저에서 BANK 요소를 끌어서 dragAndDrop 방식으로 DEBIT SIDE 블록에 놓습니다.

드래그 앤 드롭 Selenium

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;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			

    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe ");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
         
		//Element which needs to drag.    		
        	WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
         //Element on which need to drop.		
         WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));					
         		
         //Using Action class for drag and drop.		
         Actions act=new Actions(driver);					

	//Dragged and dropped.		
         act.dragAndDrop(From, To).build().perform();		
	}		
}

코드 설명 : 위의 코드에서는 주어진 URL을 다음에서 실행합니다. Firefox 브라우저에서 BANK 요소를 끌어서 dragAndDrop 메서드를 통해 DEBIT SIDE 블록에 놓습니다. 아래에 간략하게 설명합니다.

먼저 1을 캡쳐합니다.st 변수 “From”으로 드래그해야 하는 요소입니다.

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

둘째, 변수 “To”에 첫 번째 요소를 드롭해야 하는 두 번째 요소를 캡처합니다.

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

셋째, Actions 클래스의 메소드를 사용하여 Actions 클래스의 객체를 생성합니다.

Actions act=new Actions(driver);

드래그 앤 드롭 요소의 경우 Actions 클래스의 dragAndDrop 메소드를 사용하고 매개변수를 첫 번째 요소(Sourcelocator) "From"과 두 번째 요소(Destinationlocator) "To"로 전달합니다. 아래 줄은 1을 드래그합니다.st 요소를 2에 드롭하세요.nd 요소입니다.

act.dragAndDrop(From, To).build().perform();

스크립트 실행.

이제 아래 스크린샷에 표시된 대로 Eclipse에서 위의 스크립트를 하나씩 실행할 수 있습니다.

드래그 앤 드롭 Selenium

스크립트를 실행할 때의 출력은 다음과 같습니다.

드래그 앤 드롭 Selenium

관련 기사

시나리오 2: BANK 요소를 DragAndDropBy 메서드를 통해 특정 셀에 끌어서 놓습니다.

이 시나리오에서는 브라우저에서 지정된 URL을 시작한 다음 BANK 요소를 끌어서 dragAndDropBy 메서드를 통해 DEBIT SIDE 블록에 놓습니다. dragAndDropBy를 수행하려면 요소의 픽셀을 찾아야 합니다.

픽셀을 어떻게 찾나요?

Chrome이나 Fire에서 URL을 엽니다.Fox 파란색 화살표를 클릭하세요.

다음으로 픽셀을 알고 싶은 요소를 클릭하세요.

아래 스크린샷과 같이 요소 위의 픽셀을 찾을 수 있습니다.

드래그 앤 드롭 Selenium

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;		
import org.testng.annotations.Test;		


public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
         System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
        WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));					
      
        //Using Action class for drag and drop.		
        Actions act=new Actions(driver);					
      
        //Drag and Drop by Offset.		
        act.dragAndDropBy(From,135, 40).build().perform();		
 }		
}

알림: 픽셀 값은 화면 해상도와 브라우저 크기에 따라 변경됩니다. 따라서 이 방법은 신뢰할 수 없으며 널리 사용되지 않습니다.

시나리오 3: 몇 가지 요소를 끌어서 놓은 후 메시지가 표시되는지 확인합니다.

다음 코드에서, 우리는 브라우저에서 주어진 URL을 실행한 다음 BANK, SALES, 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;		
import org.testng.annotations.Test;		

public class DragAndDrop {				

    WebDriver driver;			
    @Test		
    public void DragnDrop()					
    {		
    	 System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe");					
         driver= new ChromeDriver();					
         driver.get("https://demo.guru99.com/test/drag_drop.html");					
     
	//Element(BANK) which need to drag.		
     	 WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));	
         
     	//Element(DEBIT SIDE) on which need to drop.		
     	WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));					
      
	//Element(SALES) which need to drag.		
     	WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));
        
	//Element(CREDIT SIDE) on which need to drop.  		
     	WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));					
     
     	//Element(500) which need to drag.		
        WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(DEBIT SIDE) on which need to drop.		
     	WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));					
         
	//Element(500) which need to drag.		
        WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));					
        
        //Element(CREDIT SIDE) on which need to drop.		
     	WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));					
      
	//Using Action class for drag and drop.		
     	Actions act=new Actions(driver);					

	//BANK drag and drop.		
     	act.dragAndDrop(From1, To1).build().perform();
        
	//SALES drag and drop.		
     	act.dragAndDrop(From2, To2).build().perform();
        
	//500 drag and drop debit side.		
     	act.dragAndDrop(From3, To3).build().perform();	
        
	//500 drag and drop credit side. 		
     	act.dragAndDrop(From4, To4).build().perform();		
      
	//Verifying the Perfect! message.		
	if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())							
     	{		
         	System.out.println("Perfect Displayed !!!");					
     	}
		else
     	{
        	System.out.println("Perfect not Displayed !!!");					
     	}		
}

출력 분석

출력에서는 해당 요소가 정의된 요소에 드래그 앤 드롭되는 것을 볼 수 있습니다. 출력된 GIF를 확인할 수 있습니다.

요약

  • 위 튜토리얼에서는 Webdriver의 Action 메소드를 통해 웹 애플리케이션의 드래그 앤 드롭 기능을 설명합니다.
  • dragAndDrop(소스 위치 지정자, 대상 위치 지정자)
  • dragAndDropBy(Sourcelocator, Destinationlocator의 x축 픽셀, Destinationlocator의 y축 픽셀)
  • 먼저 요소를 드래그 앤 드롭하기 위해 우리는 2개의 매개변수인 1을 전달하는 Actions 클래스의 DragAndDrop 메서드를 사용했습니다.st 매개변수는 드래그해야 하는 요소이고 2nd 매개변수는 1을 삭제해야 하는 요소입니다.st 요소입니다.
  • 둘째, 3개의 매개변수를 전달하는 Actions 클래스의 dragAndDropBy 메소드를 사용했습니다. 첫 번째 매개변수는 드래그해야 하는 요소입니다. 1nd 매개변수는 2의 x축 픽셀 값입니다.nd 요소, 3rd 매개변수는 2의 y축 픽셀 값입니다.nd 요소입니다.

당신은 좋아할 것입니다 :