
- Selenium 教程
- Selenium - 首頁
- Selenium - 概述
- Selenium - 元件
- Selenium - 自動化測試
- Selenium - 環境搭建
- Selenium - 遠端控制
- Selenium IDE 教程
- Selenium - IDE 簡介
- Selenium - 特性
- Selenium - 限制
- Selenium - 安裝
- Selenium - 建立測試用例
- Selenium - 建立指令碼
- Selenium - 控制流
- Selenium - 儲存變數
- Selenium - 警報和彈出視窗
- Selenium - Selenese 命令
- Selenium - Actions 命令
- Selenium - Accessors 命令
- Selenium - Assertions 命令
- Selenium - Assert/Verify 方法
- Selenium - 定位策略
- Selenium - 指令碼除錯
- Selenium - 驗證點
- Selenium - 模式匹配
- Selenium - JSON 資料檔案
- Selenium - 瀏覽器執行
- Selenium - 使用者擴充套件
- Selenium - 程式碼匯出
- Selenium - 程式碼輸出
- Selenium - JavaScript 函式
- Selenium - 外掛
- Selenium WebDriver 教程
- Selenium - 簡介
- Selenium WebDriver vs RC
- Selenium - 安裝
- Selenium - 第一個測試指令碼
- Selenium - 驅動程式會話
- Selenium - 瀏覽器選項
- Selenium - Chrome 選項
- Selenium - Edge 選項
- Selenium - Firefox 選項
- Selenium - Safari 選項
- Selenium - 雙擊
- Selenium - 右鍵點選
- Python 中的 HTML 報告
- 處理編輯框
- Selenium - 單個元素
- Selenium - 多個元素
- Selenium Web 元素
- Selenium - 檔案上傳
- Selenium - 定位器策略
- Selenium - 相對定位器
- Selenium - 查詢器
- Selenium - 查詢所有連結
- Selenium - 使用者互動
- Selenium - WebElement 命令
- Selenium - 瀏覽器互動
- Selenium - 瀏覽器命令
- Selenium - 瀏覽器導航
- Selenium - 警報和彈出視窗
- Selenium - 處理表單
- Selenium - 視窗和標籤頁
- Selenium - 處理連結
- Selenium - 輸入框
- Selenium - 單選按鈕
- Selenium - 複選框
- Selenium - 下拉框
- Selenium - 處理 iframe
- Selenium - 處理 Cookie
- Selenium - 日期時間選擇器
- Selenium - 動態網頁表格
- Selenium - Actions 類
- Selenium - Action 類
- Selenium - 鍵盤事件
- Selenium - 鍵上/下
- Selenium - 複製和貼上
- Selenium - 處理特殊鍵
- Selenium - 滑鼠事件
- Selenium - 拖放操作
- Selenium - 筆事件
- Selenium - 滾動操作
- Selenium - 等待策略
- Selenium - 顯式/隱式等待
- Selenium - 支援功能
- Selenium - 多選
- Selenium - 等待支援
- Selenium - 選擇支援
- Selenium - 顏色支援
- Selenium - ThreadGuard
- Selenium - 錯誤和日誌記錄
- Selenium - 異常處理
- Selenium - 雜項
- Selenium - 處理 Ajax 呼叫
- Selenium - JSON 資料檔案
- Selenium - CSV 資料檔案
- Selenium - Excel 資料檔案
- Selenium - 跨瀏覽器測試
- Selenium - 多瀏覽器測試
- Selenium - 多視窗測試
- Selenium - JavaScript 執行器
- Selenium - 無頭執行
- Selenium - 捕獲螢幕截圖
- Selenium - 捕獲影片
- Selenium - 頁面物件模型
- Selenium - 頁面工廠
- Selenium - 記錄和回放
- Selenium - 框架
- Selenium - 瀏覽上下文
- Selenium - DevTools
- Selenium Grid 教程
- Selenium - 概述
- Selenium - 架構
- Selenium - 元件
- Selenium - 配置
- Selenium - 建立測試指令碼
- Selenium - 測試執行
- Selenium - 端點
- Selenium - 自定義節點
- Selenium 報告工具
- Selenium - 報告工具
- Selenium - TestNG
- Selenium - JUnit
- Selenium - Allure
- Selenium & 其他技術
- Selenium - Java 教程
- Selenium - Python 教程
- Selenium - C# 教程
- Selenium - Javascript 教程
- Selenium - Kotlin 教程
- Selenium - Ruby 教程
- Selenium - Maven & Jenkins
- Selenium - 資料庫測試
- Selenium - LogExpert 日誌記錄
- Selenium - Log4j 日誌記錄
- Selenium - Robot Framework
- Selenium - AutoIT
- Selenium - Flash 測試
- Selenium - Apache Ant
- Selenium - Github 教程
- Selenium - SoapUI
- Selenium - Cucumber
- Selenium - IntelliJ
- Selenium - XPath
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.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 相關的其他知識,以加深您的理解並擴充套件您的視野。