如何使用 Selenium WebDriver 进行拖放操作

Question

我在使用 Selenium WebDriver 获取拖放功能时一直遇到问题。

根据 WebDriver 文档，drag/drop 应该可以直接使用命令：

WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));
(new Actions(driver)).dragAndDrop(element, target).perform();

然而，这似乎不适用于 Firefox 或 Chrome 驱动程序。

下面是一个示例测试，它尝试在 2 个 public 可拖动网站上使用拖放功能。使用 FirefoxDriver 和 ChromeDriver.

对测试进行参数化和执行

package test;

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import org.junit.After;
import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;
import org.junit.runners.Parameterized.Parameters;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

@RunWith(Parameterized.class)
public class DragAndDropTest {

    enum Browser {FIREFOX, CHROME};

    private Browser browser;
    private WebDriver driver;

    @Parameters
    public static Collection<Object[]> data() throws Exception {
        List<Object[]> params = new ArrayList<Object[]>();
        params.add(new Object[] { Browser.FIREFOX });
        params.add(new Object[] { Browser.CHROME });
        return params;
    }

    public DragAndDropTest(Browser browser) {
        this.browser = browser;
    }

    @Before
    public void before() {
        switch (browser) {
        case FIREFOX:
            this.driver = new FirefoxDriver();
            break;
        case CHROME:
            this.driver = new ChromeDriver();
        }
    }

    @After
    public void tearDown() {
        driver.quit();
    }

    @Test
    public void test1() {
        By drag = By.id("div1");
        By drop = By.id("div2");
        By expected = By.cssSelector("#div2 #drag1");
        // load page
        driver.get("http://www.w3schools.com/html/html5_draganddrop.asp");
        // wait for draggable element visible
        new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(drag));
        // drag and drop
        new Actions(driver).dragAndDrop(driver.findElement(drag), driver.findElement(drop)).perform();
        // verify results
        Assert.assertEquals("Drag&Drop failed", 1,driver.findElements(expected).size());
    }

    @Test
    public void test2() {
        By drag = By.id("Item1");
        By drop = By.id("Item5");
        By expected = By.cssSelector("#DragContainer5 #Item1");
        // load page
        driver.get("http://www.webreference.com/programming/javascript/mk/column2/index.html");
        // wait for draggable element visible
        new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(drag));
        // drag and drop
        new Actions(driver).dragAndDrop(driver.findElement(drag), driver.findElement(drop)).perform();
        // verify results
        Assert.assertEquals("Drag&Drop failed", 1, driver.findElements(expected).size());
    }
}

关于上述测试为何无法正常工作的任何 suggestions/pointers？

Answer 1

W3C 站点具有 HTML5 拖放功能，目前 Webdriver 不支持该功能。参考这个问题 - https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/3604

但在您的第一个测试用例中，您应该将其用于拖动元素。通过拖动=By.id("drag1");

这是您正在拖动的图像的定位器。

如何使用 Selenium WebDriver 进行拖放操作

How to get drag and drop working with Selenium WebDriver

java

selenium-webdriver

selenium-chromedriver

selenium-firefoxdriver