Selenium WebDriver - 拖放操作

当我们尝试将网页的一个部分的元素移动到另一个部分时，就会在应用程序上执行拖放操作。Selenium web driver 可用于自动化处理页面上拖动元素的测试。

Selenium webdriver 可以借助 Actions 类中的 dragAndDrop() 和 dragAndDropBy() 方法来执行拖放操作。dragAndDrop 方法接受两个参数 - 源和目标定位器值。dragAndDropBy 方法接受三个参数 - 源定位器、水平方向上的 x 偏移值（以像素为单位）和垂直方向上的 y 偏移值（以像素为单位）。

元素识别

打开 Chrome 浏览器并启动应用程序。右键单击网页，然后单击“检查”按钮。然后，整个页面的实际 HTML 代码将可见。要检查该网页上的源元素和目标元素，请单击位于可见 HTML 代码顶部的左上箭头，如下所示。

示例 1

让我们以以上页面为例，将文本为 Drag me to my target 的源元素拖动到文本为 Drop here 的目标元素。完成后，我们将在网页上获得文本 Dropped!。

代码实现

package org.example;

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 java.util.concurrent.TimeUnit;

public class DragAndDrp {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // URL launch 
      driver.get("https://tutorialspoint.com/selenium/practice/droppable.php");

      // identify source and target elements 
      WebElement sourceElement= driver.findElement(By.id("draggable"));
      WebElement targetElement= driver.findElement(By.id("droppable"));

      // drag and drop operations without build and perform methods
      Actions a = new Actions(driver);
      a.dragAndDrop(sourceElement, targetElement).build().perform();

      // identify text after element is dropped
      WebElement text = driver.findElement(By.xpath("//*[@id='droppable']/p"));
      System.out.println("Text is : " + text.getText());

      // quitting browser after drag and drop operations completed
      driver.quit();
   }
}

输出

Text is : Dropped!

Process finished with exit code 0

在以上示例中，我们从源到目标定位器执行了拖放操作，并在控制台中获得了消息 Text is : Dropped!。

最后，收到了消息 Process finished with exit code 0，表示代码已成功执行。

示例 2

我们还可以借助 Actions 类 中的 clickAndHold()、moveToElement() 和 release() 方法来实现以上示例。最后，我们将使用 perform() 和 build() 方法分别执行和完成所有操作。

package org.example;

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 java.util.concurrent.TimeUnit;

public class DragAndDrpOption2 {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // URL launch for accessing drag and drop elements
      driver.get("https://tutorialspoint.com/selenium/practice/droppable.php");

      // identify source and target elements for drag and drop
      WebElement sourceElement= driver.findElement(By.id("draggable"));
      WebElement targetElement= driver.findElement(By.id("droppable"));

      // performing drag and drop operations
      Actions a = new Actions(driver);
      a.clickAndHold(sourceElement)
         .moveToElement(targetElement)
         .release(targetElement)
         .build().perform();

      // identify text after element is dropped
      WebElement text = driver.findElement(By.xpath("//*[@id='droppable']/p"));
      System.out.println("Text is : " + text.getText());

      // quitting browser after drag and drop
      driver.quit();
   }
}

输出

Text is after dragging: Dropped!

这里，我们从源到目标定位器执行了拖放操作，并在控制台中收到了消息 Text is : Dropped!。

示例 3

我们还可以借助 Actions 类的 dragAndDropBy() 方法来实现以上示例。

WebDriver driver = new ChromeDriver();
WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));

// Drag and drop by method of Actions class
Actions a = new Actions(driver);
a.dragAndDropBy(sourceElement, x offset value, y offset value).build().perform();

x 偏移值可以通过目标元素和源元素的 x 坐标之差获得。类似地，y 偏移值可以通过目标元素和源元素的 y 坐标之差获得。

使用 dragAndDropBy 方法执行拖放操作的语法：

WebDriver driver = new ChromeDriver();
WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));

// get x coordinates of source element
int x = sourceElement.getLocation().getX();

// get y coordinates of target element
int y =  targetElement.getLocation().getY();

// get x coordinates of target element
int x1 = targetElement.getLocation().getX();

// get y coordinates of source element
int y1 =  sourceElement.getLocation().getY();

// off set difference between target and source
int locX = x1 - x;
int locY = y1 - y;

// drag and drop operations with offset
Actions a = new Actions(driver);
a.dragAndDropBy(sourceElement, locX, locY).build().perform();

代码实现

package org.example;

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 java.util.concurrent.TimeUnit;

public class DragAndDrpBy {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // URL launch for accessing drag and drop elements 
      driver.get("https://tutorialspoint.com/selenium/practice/droppable.php");

      // identify source and target elements for drag and drop
      WebElement sourceElement= driver.findElement(By.id("draggable"));
      WebElement targetElement= driver.findElement(By.id("droppable"));

      // get x coordinates of source element
      int x = sourceElement.getLocation().getX();

      // get y coordinates of target element
      int y =  targetElement.getLocation().getY();

      // get x coordinates of target element
      int x1 = targetElement.getLocation().getX();

      // get y coordinates of source element
      int y1 =  sourceElement.getLocation().getY();

      // off set difference between target and source
      int locX = x1 - x;
      int locY = y1 - y;
      
      // drag and drop with offset
      Actions act = new Actions(driver);
      act.dragAndDropBy(sourceElement, locX, locY).build().perform();

      // identify text after element is dropped
      WebElement text = driver.findElement(By.xpath("//*[@id='droppable']/p"));
      System.out.println("Text is : " + text.getText());

      // quitting browser after drag and drop operations completed
      driver.quit();
   }
}

输出

Text is : Dropped!

在以上示例中，我们首先从源到目标定位器以及 x、y 偏移值执行了拖放操作，并在控制台中收到了消息 Text is : Dropped!。

结论

这结束了我们关于 Selenium Webdriver 拖放操作教程的全面介绍。我们从描述网页上拖放操作的源元素和目标元素的识别开始，并逐步讲解了如何使用 Selenium Webdriver 处理拖放操作的示例。这使您深入了解 Selenium Webdriver 拖放操作。明智的做法是不断练习您学到的知识，并探索与 Selenium 相关的其他知识，以加深您的理解并扩展您的视野。

打印页面