• Selenium Video Tutorials

Selenium WebDriver - 拖放操作



當我們嘗試將網頁的一個部分的元素移動到另一個部分時,就會在應用程式上執行拖放操作。Selenium web driver 可用於自動化處理頁面上拖動元素的測試。

Selenium webdriver 可以藉助 Actions 類中的 dragAndDrop()dragAndDropBy() 方法來執行拖放操作。dragAndDrop 方法接受兩個引數 - 源和目標定位器值。dragAndDropBy 方法接受三個引數 - 源定位器、水平方向上的 x 偏移值(以畫素為單位)和垂直方向上的 y 偏移值(以畫素為單位)。

元素識別

開啟 Chrome 瀏覽器並啟動應用程式。右鍵單擊網頁,然後單擊“檢查”按鈕。然後,整個頁面的實際 HTML 程式碼將可見。要檢查該網頁上的源元素和目標元素,請單擊位於可見 HTML 程式碼頂部的左上箭頭,如下所示。

Selenium Drag And Drop 1

示例 1

讓我們以以上頁面為例,將文字為 Drag me to my target 的源元素拖動到文字為 Drop here 的目標元素。完成後,我們將在網頁上獲得文字 Dropped!

Selenium Drag And Drop 2

程式碼實現

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.tw/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.tw/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.tw/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 相關的其他知識,以加深您的理解並擴充套件您的視野。

廣告