Selenium 简明教程

Selenium WebDriver - Drag and Drop

当我们尝试将元素从一个網頁区域移动到另一个網頁区域时，对应用程序执行拖放操作。Selenium 网页驱动程序可用于自动化处理拖动页面上元素的测试。

可以通过 Actions 类中的 dragAndDrop() 和 dragAndDropBy() 方法使用 Selenium 网页驱动程序执行拖放操作。dragAndDrop 方法接受两个参数 - 源和目标定位器值。dragAndDropBy 方法接受三个参数 - 源定位器、水平方向的 x 偏移值（以像素为单位）和垂直方向的 y 偏移值（以像素为单位）。

Element Identification

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

Example 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://www.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 ，表示代码成功执行。

Example 2

我们还可以使用 clickAndHold()、moveToElement() 和 release() 方法（它们都是 * Actions Class* 的一部分）来实现上述示例。最后，我们将分别使用 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://www.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! 。

Example 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://www.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!

Conclusion

这意味着我们全面掌握了 Selenium Webdriver 拖放教程。我们从描述 Web 页面上拖放操作的源元素和目标元素的标识符开始，并详细介绍了如何使用 Selenium Webdriver 来处理拖放操作的示例。这让你全面掌握了 Selenium Webdriver 拖放。明智的做法是不断实践你学到的知识并探索 Selenium 相关的其他知识，以加深你的理解并拓展你的视野。