Selenium의 드래그 앤 드롭 액션 dragAndDrop dragAndDropBy

Selenium의 드래그 앤 드롭 액션 : dragAndDrop, dragAndDropBy

일부 웹 응용 프로그램에는 웹 요소를 드래그하여 정의 된 영역이나 요소에 놓을 수있는 기능이 있습니다. Selenium Webdriver를 사용하여 이러한 요소의 끌어서 놓기를 자동화 할 수 있습니다.

드래그 앤 드롭을 위한 구문.

Actions 클래스에는 드래그 앤 드롭을 지원하는 두 가지 메소드가 있습니다. 그들을 연구합시다 -

Actions.dragAndDrop (Sourcelocator, DestinationLocator)

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

1.     첫 번째 매개 변수 "Sourcelocator"는 드래그해야하는 요소입니다.

2.     두 번째 매개 변수 "Destinationlocator"는 첫 번째 요소를 삭제해야하는 요소입니다

3.    Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

우리가 3 개의 매개 변수를 전달하는 dragAndDropBy 메소드 -

1.     첫 번째 매개 변수 "Sourcelocator"는 드래그해야하는 요소입니다.

2.     두 번째 매개 변수는 첫 번째 요소를 삭제해야하는 두 ^번째 요소 의 x 축 픽셀 값입니다 .

3.     세 번째 매개 변수는 첫 번째 요소를 놓을 필요가있는 두 번째 요소의 y 축 픽셀 값입니다.

다음 세 가지 시나리오에서 셀렌 웹 드라이버를 사용하여 요소의 드래그 앤 드롭을 실제적으로 보여 드리겠습니다.

• 시나리오 1 : BANK 요소는 DragAndDrop 메서드로 특정 요소에 끌어서 놓습니다.
• 시나리오 2 : BANK 요소는 DragAndDrop 메서드에 의해 특정 요소로 끌어서 놓습니다.
• 시나리오 3 : 끌어서 놓은 요소가 거의없고 메시지가 표시되는지 확인합니다.

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

다음 코드에서는 Firefox 브라우저에서 URL을 시작한 다음 BANK 요소를 dragAndDrop 메서드를 통해 DEBIT SIDE 블록에 놓습니다.

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();                       

               }                              

}

 

코드 설명 : 위의 코드에서 우리는 Firefox 브라우저에서 주어진 URL을 시작한 다음 BANK 요소를 드래그하여 dragAndDrop 메소드를 통해 DEBIT SIDE 블록에 놓습니다. 아래에서 간단히 설명합니다.

먼저 변수 "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"로 매개 변수를 전달합니다. 아래 줄은 ^{첫 번째} 요소를 드래그 하여 두 ^번째 요소 에 놓습니다 .

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

스크립트의 실행.

이제 아래 스크린 샷과 같이 eclipse에서 위의 스크립트를 하나씩 실행할 수 있습니다.

스크립트를 실행할 때의 결과는 다음과 같습니다.

시나리오 2 : BANK 요소는 DragAndDrop 메서드로 특정 셀에 끌어다 놓습니다.

이 시나리오에서는 브라우저에서 주어진 URL을 실행 한 다음 BANK 요소를 드래그하여 dragAndDropBy 메소드를 통해 DEBIT SIDE 블록에 놓습니다. dragAndDropBy를 사용하려면 요소의 픽셀을 찾아야합니다.

Pixel을 찾는 방법?

Chrome 또는 FireFox에서 URL을 열고 파란색 화살표를 클릭하십시오.

다음으로 픽셀을 알고자 하는 요소를 클릭하십시오.

아래 스크린 샷과 같이 요소 위에 픽셀이 있습니다.

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 Pixel.                            

        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("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 (Sourcelocator, DestinationLocator)
• dragAndDropBy (Sourcelocator, Destinationlocator의 x 축 픽셀, DestinationLocator의 y 축 픽셀)
• 요소를 끌어서 놓기 위해서는 DragAndDrop 메쏘드를 Actions 클래스에서 사용했습니다. 우리는 2 개의 매개 변수를 전달했습니다. ^{첫 번째} 매개 변수는 우리가 드래그 해야하는 요소이고, 2 ^번째 매개 변수는 1을 제거 해야하는 요소입니다. ^st 요소.
• 둘째, 우리는 3 개의 매개 변수를 전달하는 Actions 클래스의 dragAndDropBy 메서드를 사용했습니다. 첫 번째 매개 변수는 드래그 해야하는 요소이고, 2 ^번째 매개 변수는 두 ^번째 요소 의 x 축 픽셀 값이며 , 3 ^번째매개 변수입니다. 는 두 ^번째 요소 의 y 축 픽셀 값입니다 .