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

Question

我在让拖放功能与 Selenium WebDriver 一起工作时遇到了持久性问题。

根据 WebDriver 文档，拖放应该可以使用命令开箱即用：

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

但这似乎不适用于 Firefox 或 Chrome 驱动程序。

下面是一个示例测试，它尝试在 2 个公共可拖动网站上使用拖放功能。测试通过 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());
    }
}

关于上述测试为何无法正常工作的任何建议/指示？

Answer 1

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

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

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