# 如何在 Selenium WebDriver 中拖放（示例） > 原文： [https://www.guru99.com/drag-drop-selenium.html](https://www.guru99.com/drag-drop-selenium.html) 某些 Web 應用程序具有將 Web 元素拖放到定義的區域或元素上的功能。 我們可以使用 Selenium Webdriver 自動執行此類元素的拖放操作。 ### 拖放的語法。 Actions 類有兩個支持拖放的方法。 讓我們研究一下- ``` Actions.dragAndDrop(Sourcelocator, Destinationlocator) ``` 在 dragAndDrop 方法中，我們傳遞兩個參數- 1. 第一個參數“ Sourcelocator”是我們需要拖動的元素 2. 第二個參數“ Destinationlocator”是需要在其上放置第一個元素的元素 ``` Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator) ``` dragAndDropBy 方法，我們傳遞 3 個參數- 1. 第一個參數“ Sourcelocator”是我們需要拖動的元素 2. 第二個參數是第 2 個^元素和元素的 x 軸像素值，我們需要在其中放置第一個元素。 3. The third parameter is y-axis pixel value of the 2nd element on which we need to drop the first element. [ ](/images/1/102717_0423_DragandDrop1.png) 讓我們在以下 3 種情況下使用 selenium webdriver 實際上向您展示元素的拖放 * [場景 1：通過 DragAndDrop 方法將 BANK 元素拖放到特定元素上。](#1) * [場景 2：通過 DragAndDrop 方法將 BANK 元素拖放到特定元素上。](#2) * [方案 3：拖放幾個元素，然后驗證是否顯示消息。](#3) ### 場景 1：通過 DragAndDrop 方法將 BANK 元素拖放到特定單元格上。 在下面的代碼中，我們在 Firefox 瀏覽器中啟動給定的 URL，然后通過 dragAndDrop 方法將 BANK 元素拖放到 DEBIT SIDE 塊上。  ``` 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 org.testng.annotations.Test; public class DragAndDrop { WebDriver driver; @Test public void DragnDrop() { System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe "); driver= new ChromeDriver(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element which needs to drag. WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Element on which need to drop. WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li")); //Using Action class for drag and drop. Actions act=new Actions(driver); //Dragged and dropped. act.dragAndDrop(From, To).build().perform(); } } ``` **代碼說明：**在上面的代碼中，我們在 Firefox 瀏覽器中啟動給定的 URL，然后拖動 BANK 元素并通過 dragAndDrop 方法拖放到 DEBIT SIDE 塊上。 下面簡要說明： 首先，我們捕獲 1 ^st 元素，我們需要將其拖入變量“ From”。 ``` WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a")); ``` 其次，我們捕獲需要在變量“ To”中放置第一個元素的第二個元素。 ``` WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li")); ``` 第三，我們使用 Actions 類的方法創建 Actions 類的對象。 ``` Actions act=new Actions(driver); ``` 對于拖放元素，我們使用 Actions 類的 dragAndDrop 方法并將參數作為第一個元素（Sourcelocator）“發自”和第二個元素（Destinationlocator）“傳遞給”。 在下面的行中，將拖動第一個^元素并將其放在第 2 個^元素上。 act.dragAndDrop（從，到）.build（）。perform（）; **腳本的執行。** 現在，您可以從 eclipse 一步一步地執行上述腳本，如以下屏幕截圖所示。  這是運行腳本時的輸出  ### 場景 2：通過 DragAndDrop 方法將 BANK 元素拖放到特定單元格上。 在這種情況下，我們在瀏覽器中啟動給定的 URL，然后通過 dragAndDropBy 方法將 BANK 元素拖放到 DEBIT SIDE 塊上。 要拖動并拖放，我們需要找到元素的像素。 **如何找到像素？** 在 Chrome 或 FireFox 中打開 URL，然后單擊藍色箭頭。 接下來，單擊要了解其像素的任何元素。 您將在元素上方找到像素，如下面的屏幕快照所示。  ``` 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 org.testng.annotations.Test; public class DragAndDrop { WebDriver driver; @Test public void DragnDrop() { System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe"); driver= new ChromeDriver(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element(BANK) which need to drag. WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Using Action class for drag and drop. Actions act=new Actions(driver); //Drag and Drop by Pixel. act.dragAndDropBy(From,135, 40).build().perform(); } } ``` **注：**像素值隨屏幕分辨率和瀏覽器大小而變化。 因此，該方法不可靠并且未被廣泛使用。 ### 方案 3：拖放幾個元素，然后驗證是否顯示消息。 在下面的代碼中，我們在瀏覽器中啟動給定的 URL，然后將諸如 BANK，SALES，500 之類的元素拖放到相應的塊上。 完成后，我們驗證輸出消息。 ``` 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 org.testng.annotations.Test; public class DragAndDrop { WebDriver driver; @Test public void DragnDrop() { System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe"); driver= new ChromeDriver(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element(BANK) which need to drag. WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Element(DEBIT SIDE) on which need to drop. WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li")); //Element(SALES) which need to drag. WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a")); //Element(CREDIT SIDE) on which need to drop. WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li")); //Element(500) which need to drag. WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a")); //Element(DEBIT SIDE) on which need to drop. WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li")); //Element(500) which need to drag. WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a")); //Element(CREDIT SIDE) on which need to drop. WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li")); //Using Action class for drag and drop. Actions act=new Actions(driver); //BANK drag and drop. act.dragAndDrop(From1, To1).build().perform(); //SALES drag and drop. act.dragAndDrop(From2, To2).build().perform(); //500 drag and drop debit side. act.dragAndDrop(From3, To3).build().perform(); //500 drag and drop credit side. act.dragAndDrop(From4, To4).build().perform(); //Verifying the Perfect! message. if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed()) { System.out.println("Perfect Displayed !!!"); } else { System.out.println("Perfect not Displayed !!!"); } } ``` **輸出分析** 在“輸出”中，您可以看到該元素已拖放到定義的元素上。 您可以檢查輸出的 GIF。 <video controls="" height="300" width="450"><source src="/images/1/102717_0423_DragandDrop6.mp4" type="video/mp4"> <source src="/images/1/102717_0423_DragandDrop6.ogg" type="video/ogg">您的瀏覽器不支持視頻標簽。</video> ### 摘要 * 在以上教程中，我們通過 Webdriver 中的 Action 方法說明了 Web 應用程序的拖放功能： * dragAndDrop（Sourcelocator，Destinationlocator） * dragAndDropBy（Sourcelocator，Destinationlocator 的 x 軸像素，Destinationlocator 的 y 軸像素） * 首先要拖放元素，我們使用了 Actions 類中的 DragAndDrop 方法，在其中傳遞了 2 個參數，其中 1 個 ^st 參數是我們需要拖動的元素，而 2 個 ^nd 參數是需要在其上放置 1 ^st 元素的元素。 * 其次，我們使用了 Actions 類中的 dragAndDropBy 方法，在其中傳遞了 3 個參數，第一個參數是我們需要拖動的元素，2 ^nd 參數是 2 個像素的 x 軸像素值 ^nd 元素，[3 ^rd ]參數是第二 ^nd 元素的 y 軸像素值。