如何拖放 Selenium （例子）

由： Krishna 伦塔 Krishna 伦塔
Hours 更新

在 Selenium 中拖放

某些 Web 应用程序具有将 Web 元素拖放到指定区域或元素上的功能。我们可以使用以下方法自动执行此类元素的拖放操作 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：通过 DragAndDrop 方法将 BANK 元素拖放到特定单元格上。

在下面的代码中，我们启动给定的 URL Firefox 浏览器，然后通过 dragAndDrop 方法将 BANK 元素拖放到 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 浏览器，然后通过 dragAndDrop 方法将 BANK 元素拖放到 DEBIT SIDE 块上。下面简单解释一下：

首先，我们捕获 1st 我们需要将其拖入变量“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”传递。下面的行将拖动 1st 元素并将其放在 2nd 元件。

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

执行脚本。

现在您可以从 eclipse 逐个执行上述脚本，如下面的屏幕截图所示。

拖放 Selenium

这是运行脚本时的输出

拖放 Selenium

相关文章

场景2：通过DragAndDropBy方法将BANK元素拖放到特定单元格上。

在这个场景中，我们在浏览器中启动给定的 URL，然后通过 dragAndDropBy 方法将 BANK 元素拖放到 DEBIT SIDE 块上。要执行 dragAndDropBy，我们需要找到元素的像素。

如何找到像素？

在 Chrome 或 Fire 中打开 URLFox 然后单击蓝色箭头。

接下来单击您想要了解像素的任何元素。

您将找到元素上方的像素，如下面的屏幕截图所示。

拖放 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 应用程序的拖放功能：
  • dragAndDrop（源定位器，目标定位器）
  • dragAndDropBy（Sourcelocator，Destinationlocator 的 x 轴像素，Destinationlocator 的 y 轴像素）
  • 要拖放元素，首先我们使用 Actions 类中的 DragAndDrop 方法，其中传递了 2 个参数，1st 参数是我们需要拖动的元素，2nd 参数是我们需要删除 1 的元素st 元件。
  • 其次，我们使用 Actions 类中的 dragAndDropBy 方法，其中我们传递了 3 个参数，第一个参数是我们需要拖动的元素，1nd 参数是2的x轴像素值nd 元素，3rd 参数是 2 的 y 轴像素值nd 元件。

你可能会喜欢：