Selenium 简明教程

Selenium WebDriver - Drag and Drop

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

Drag and Drop operations are performed on an application when we make an attempt to move an element from one section of a web page to another. Selenium web driver can be used to automate tests dealing with dragging elements on a page.

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

Selenium webdriver can be used to perform drag and drop with the help of dragAndDrop() and dragAndDropBy() methods in Actions class. The dragAndDrop method takes two parameters - source and destination locator values. The dragAndDropBy method takes three parameters - source locator, x offset value(in pixels) in horizontal direction, and y offset value(in pixels) in vertical direction.

Element Identification

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

Open the Chrome browser, and launch an application. Right click on the web page, then click on the Inspect button. Then, the actual HTML code for the whole page would be visible. For investigation of the source and destination elements on that web page, click on the left upward arrow, available at the top of the visible HTML code as highlighted below.

Example 1

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

Let us take an example of the above page, drag source element with text - Drag me to my target to the destination element with the text - Drop here. Once done, we would obtain the text - Dropped! on the web page.

代码实现

Code Implementation

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! 。

In the above example, we had performed a drag and drop operation from the source to the destination locator, and also obtained the message in the console - Text is : Dropped!.

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2

我们还可以使用 clickAndHold()、moveToElement() 和 release() 方法（它们都是 * Actions Class* 的一部分）来实现上述示例。最后，我们将分别使用 perform() 和 build() 方法执行并完成所有操作。

We can also take the help of the clickAndHold(), moveToElement(), and release() methods all part of Actions Class implement the example as discussed above. Finally, we would use the perform() and build() methods to execute and complete all the actions respectively.

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! 。

Here, we had performed a drag and drop operation from the source to the destination locator, and also received the message in the console - Text is : Dropped!

Example 3

我们还可以利用 Actions 类的 dragAndDropBy() 方法按照上述讨论来实现示例。

We can also take the help of the dragAndDropBy() method of the Actions class to implement the example as discussed above.

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 坐标之差来获得。

The x off set value can be obtained by the difference of the x coordinates for the target and source elements. Similarly, the y off set value can be obtained by the difference of the y coordinates for the target and source elements.

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

Syntax to perform Drag and Drop operation with dragAndDropBy method −

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();

代码实现

Code Implementation

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!

In the above example, we had first performed a drag and drop operation from the source to the destination locators, and x, y offset values, and also received the message in the console - Text is : Dropped!

Conclusion

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

This concludes our comprehensive take on the tutorial on Selenium Webdriver Drag and Drop. We’ve started with describing identification of source and destination elements for dragging and dropping operations on a web page, and walked through examples on how to handle drag and drop operations with Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Drag and Drop. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.