如何在 Selenium 中拖放
1. 概述
在本教程中，我們將探討如何使用 Selenium 和 WebDriver 執行拖放操作。拖放功能通常用於 Web 應用程序，從重新排列頁面上的項目到處理文件上傳。使用 Selenium 自動執行此任務有助於我們覆蓋使用者互動。
我們將討論 Selenium 提供的三個核心方法： dragAndDrop() 、 clickAndHold()和dragAndDropBy() 。這些方法使我們能夠模擬具有不同控制等級的拖放操作，從元素之間的基本移動到使用偏移的更複雜、精確的拖曳。在整個教程中，我們將在不同的測試頁面上示範它們的用法。
2. 設定和配置
在開始拖放之前，我們需要設定環境。我們將使用Selenium Java庫和WebDriverManager來管理瀏覽器驅動程式。我們的範例使用 Chrome，但任何其他支援的瀏覽器都可以類似地使用。
讓我們看看需要包含在pom.xml中的依賴項：
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.27.0</version>
</dependency>
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.9.2</version>
</dependency>接下來，我們初始化 WebDriver：
private WebDriver driver;
@BeforeEach
public void setup() {
driver = new ChromeDriver();
driver.manage().window().maximize();
}
@AfterEach
public void tearDown() {
driver.quit();
}我們將使用演示頁面來展示我們的拖放範例。
3. 使用dragAndDrop()方法
在 Web 開發中，元素通常是可拖曳或可放置的。可以點選可拖曳元素並在螢幕上移動。另一方面，可放置元素可作為可放置可拖曳元素的目標。例如，在任務管理應用程式中，我們可以將任務（可拖曳）拖曳到另一個部分（可放置）中，以更有效地組織任務。
Selenium 的dragAndDrop()方法是一種模擬將元素從一個位置拖曳到另一個位置（特別是從可拖曳元素到可放置元素）的簡單方法。此方法需要指定來源（可拖曳）和目標（可放置）元素。
讓我們來看看如何實現它：
@Test
public void givenTwoElements_whenDragAndDropPerformed_thenElementsSwitched() {
String url = "http://the-internet.herokuapp.com/drag_and_drop";
driver.get(url);
WebElement sourceElement = driver.findElement(By.id("column-a"));
WebElement targetElement = driver.findElement(By.id("column-b"));
Actions actions = new Actions(driver);
actions.dragAndDrop(sourceElement, targetElement)
.build()
.perform();
}在此測試中，我們首先導覽至測試頁面，透過 ID 找到來源元素和目標元素，然後使用dragAndDrop().此方法自動處理移動，使其適合我們想要模擬基本拖放行為的簡單用例。
4.使用clickAndHold()方法
有時，我們需要對拖放操作進行更多控制。例如，如果我們想模擬懸停在中間元素上或在頁面上緩慢拖曳， clickAndHold()方法可以讓我們更精細地控制拖曳序列的每個部分。
下面是我們如何實現它：
@Test
public void givenTwoElements_whenClickAndHoldUsed_thenElementsSwitchedWithControl() {
String url = "http://the-internet.herokuapp.com/drag_and_drop";
driver.get(url);
WebElement sourceElement = driver.findElement(By.id("column-a"));
WebElement targetElement = driver.findElement(By.id("column-b"));
Actions actions = new Actions(driver);
actions.clickAndHold(sourceElement)
.moveToElement(targetElement)
.release()
.build()
.perform();
}在本例中，我們使用clickAndHold()點選來源元素，使用moveToElement()將其移至目標，並release()將其放下。這種方法的靈活性使我們能夠模擬諸如在螢幕上拖曳或與螢幕之間的元素互動等場景。
當測試需要複雜移動或多個步驟的功能時（例如將項目拖曳到頁面的特定部分或調整滑桿），附加控制非常有用。
5. 對可拖曳元素使用dragAndDropBy()
在某些情況下，我們可能需要將元素拖曳到精確位置，而不是將其放到目標上。 dragAndDropBy()方法讓我們可以沿著 X 軸和 Y 軸將元素拖曳到特定數量的像素。這對於測試 UI 元素（例如滑桿）或使用可調整大小或可移動的元素特別有用。
讓我們使用jqueryui 可拖曳演示頁面演示此方法：
@Test
public void givenDraggableElement_whenDragAndDropByUsed_thenElementMovedByOffset() {
String url = "https://jqueryui.com/draggable/";
driver.get(url);
driver.switchTo().frame(0);
WebElement draggable = driver.findElement(By.id("draggable"));
Actions actions = new Actions(driver);
actions.dragAndDropBy(draggable, 100, 100)
.build()
.perform();
}在這個測試中，我們首先導航到jqueryui可拖曳演示頁面，切換到可拖曳元素所在的iframe，然後使用dragAndDropBy()方法將元素沿著X軸和Y軸移動100像素的偏移量。
dragAndDropBy()方法使我們能夠靈活地將元素移動到頁面上的任何位置，而不需要特定的可放置目標。這在測試滑桿、面板或圖片庫等元素時尤其有用，因為精確的移動對於這些元素至關重要。
六、結論
在本文中，我們討論了 Selenium 中自動化拖放功能的各種方法。我們從dragAndDrop()方法開始，該方法在指定的來源位置和目標位置之間移動元素。此方法非常適合涉及可拖放元素的場景。
接下來，我們來看看clickAndHold()方法。這為複雜的運動（例如緩慢拖曳或與中間元素的交互作用）提供了更多控制。最後，我們討論了dragAndDropBy()方法，它允許使用偏移量精確定位元素。
這些範例的完整程式碼可以在 GitHub 上找到。