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

드래그 앤 드롭 selenium

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

실제로 요소를 드래그 앤 드롭하는 방법을 보여드리겠습니다. selenium Followo가 포함된 웹드라이버wing 3 시나리오

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

팔로우에서wing 코드를 사용하여 주어진 URL을 실행합니다. Firefox browser 그런 다음 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("http://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 browser 그런 다음 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에서 URL을 열거나 FireFox 파란색 화살표를 클릭하세요.

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

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

드래그 앤 드롭 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("http://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: 몇 가지 요소를 끌어서 놓은 다음 메시지가 표시되는지 확인합니다.yed 아니면 않습니다.

팔로우에서wing 코드를 사용하여 브라우저에서 지정된 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("http://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 요소입니다.