Seleniumでドラッグ&ドロップする方法(例)

Selenium でのドラッグ アンド ドロップ

一部の Web アプリケーションには、Web 要素をドラッグして、定義された領域または要素にドロップする機能があります。 Selenium Webdriver を使用して、そのような要素のドラッグ アンド ドロップを自動化できます。

ドラッグ アンド ドロップの構文

Actions クラスには、ドラッグ アンド ドロップをサポートする XNUMX つのメソッドがあります。 それらを勉強しましょう-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

Selenium でドラッグ アンド ドロップする方法

Selenium Webdriver を使用して要素をドラッグ アンド ドロップする方法は次のとおりです。

ragAndDrop メソッドでは、XNUMX つのパラメータを渡します。

  1. 最初のパラメータ「Sourcelocator」は、ドラッグする必要がある要素です。
  2. XNUMX 番目のパラメータ「Destinationlocator」は、最初の要素をドロップする必要がある要素です。
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

ragAndDropBy メソッドには 3 つのパラメータを渡します –

  1. 最初のパラメータ「Sourcelocator」は、ドラッグする必要がある要素です。
  2. 2 番目のパラメータは XNUMX の x 軸ピクセル値です。nd 最初の要素をドロップする必要がある要素。
  3. 2 番目のパラメーターは、最初の要素をドロップする必要がある XNUMX 番目の要素の y 軸ピクセル値です。

    Selenium でドラッグ アンド ドロップ

以下のように、Selenium Webdriver を使用して要素をドラッグ アンド ドロップする方法を実際に示してみましょう。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」の最初の要素をドロップする必要がある 2 番目の要素をキャプチャします。

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

XNUMX番目に、Actionsクラスのメソッドを使用するので、Actionsクラスのオブジェクトを作成します。

Actions act=new Actions(driver);

ドラッグアンドドロップ要素には、ActionsクラスのdragAndDropメソッドを使用し、最初の要素(Sourcelocator)「From」と1番目の要素(Destinationlocator)「To」としてパラメータを渡します。 下の行は XNUMX をドラッグしますst 要素を選択して 2 にドロップしますnd 要素。

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

スクリプトの実行。

これで、上記のスクリプトを XNUMX つずつ実行できるようになります。 eclipse 以下のスクリーンショットに示すように。

Selenium でドラッグ アンド ドロップ

スクリプトを実行したときの出力は次のとおりです

Selenium でドラッグ アンド ドロップ

シナリオ 2: DragAndDropBy メソッドにより、BANK 要素が特定のセルにドラッグ アンド ドロップされます。

このシナリオでは、ブラウザーで指定された URL を起動し、BANK 要素をドラッグし、dragAndDropBy メソッドを使用して DEBIT SIDE ブロックにドロップします。 ragAndDropBy を実行するには、要素のピクセルを見つける必要があります。

ピクセルを見つけるにはどうすればよいですか?

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: いくつかの要素をドラッグ アンド ドロップし、メッセージが表示されるかどうかを確認します。

続きまして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 メソッドを使用した Web アプリケーションのドラッグ アンド ドロップ機能を説明しました。
  • ドラッグアンドドロップ(ソースロケーター、宛先ロケーター)
  • ragAndDropBy(Sourcelocator、Destinationlocator の x 軸ピクセル、Destinationlocator の y 軸ピクセル)
  • 要素をドラッグ アンド ドロップするには、まず Actions クラスの DragAndDrop メソッドを使用し、2 つのパラメーター 1 を渡します。st パラメータはドラッグする必要がある要素で、2nd パラメータは、1 を削除する必要がある要素です。st 要素。
  • 次に、Actions クラスの dragAndDropBy メソッドを使用して 3 つのパラメータを渡します。1 番目のパラメータはドラッグする必要がある要素です。2nd パラメータは 2 の x 軸ピクセル値です。nd 要素、3rd パラメータは 2 の y 軸ピクセル値です。nd 要素。