ドラッグアンドドロップインの方法 Selenium （例）

替え： Krishna ルンタ Krishna ルンタ
Hours 更新中

セレンでのドラッグアンドドロップ

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

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

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

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

ドラッグアンドドロップインの方法 Selenium

要素をドラッグアンドドロップする方法は次のとおりです。 Selenium ウェブドライバー

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

次の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("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 ブラウザで 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();

スクリプトの実行。

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

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

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

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

関連記事

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

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

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

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

次のコードでは、指定された 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 要素。

よろしければ：