WebDriver拖放在页面上不起作用

Question

我有一个非常简单的测试

 @Test
 void dragAndDrop()
 {
     driver.get("https://www.testandquiz.com/selenium/testing.html");
     driver.manage().window().maximize();
     WebElement source = driver.findElement(By.id("sourceImage"));
     WebElement target = driver.findElement(By.id("targetDiv"));
     builder.dragAndDrop(source, target).perform();
 }

测试毫无例外地通过了。但是，它不执行拖放操作。我试过Chrome、Firefox和Edge。谢谢你的帮助。

Answer 1

想要dragandrop（）的WebElement的HTML包含属性draggable=true

Draggable是一个属性，它指示是否可以拖动元素，无论是使用本机浏览器行为还是超文本标记语言Drag and Drop API。draggable可以具有以下值：

• true：可以拖动元素。
• false：无法拖动元素。

如果未设置此属性，其默认值为auto，这意味着拖动行为是默认的浏览器行为：只能拖动文本选择、图像和链接。对于其他元素，必须将事件ondragstart设置为拖放才能工作。

Eric Bidelman在文章Native HTML5 Drag and Drop中提到，使对象可拖动很简单，因为只需在要使其可移动的元素上设置draggable=true属性。例如：

<div id="cols">
  <div class="col" draggable="true"><header>X</header></div>
  <div class="col" draggable="true"><header>Y</header></div>
  <div class="col" draggable="true"><header>Z</header></div>
</div>

要使其他类型的内容可以拖动，可以利用HTML5 DnD API。然而，使用CSS3，你可以把标记修饰得像列一样，添加光标会给用户一个视觉指示器，表明某些东西是可移动的，但大多数浏览器会创建一个被拖动内容的鬼影，而可拖动的内容不会做任何事。某些浏览器，尤其是FF，需要在拖动操作中发送一些数据。

此外，雷米·夏普在《拖动任何东西》一文中提到：

HTML5规范说，它应该非常简单，只需将以下属性添加到相关元素的标记中：

draggable="true"

然而，这并不完全适用于Safari或Firefox。对于Safari，您需要向元素添加以下样式：

[draggable=true] {
  -khtml-user-drag: element;
}

这将在Safari中开始工作，当您拖动它时，它将使用dataTransfer对象设置一个默认的空值。但是，Firefox不允许你拖动元素，除非你手动设置了一些数据。

Answer 2

Selenium在与HTML5交互时存在拖放问题，我曾尝试在HTML5页面上使用以下Actions类方法，但它们似乎从来都不起作用

dragAndDrop() | clickAndHold() | moveToElement() | release()

另一方面，您可以使用JS脚本

String filePath = "C:\\Users\\Wilfred\\Desktop\\drag_and_drop_helper.js";
        StringBuffer buffer = new StringBuffer();

        String line;
        BufferedReader br = new BufferedReader(new FileReader(filePath));
        while ((line = br.readLine()) != null)
            buffer.append(line);

        String javaScript = buffer.toString();
        javaScript = javaScript + "$('#sourceImage').simulateDragDrop({ dropTarget: '#targetDiv'});";
        ((JavascriptExecutor) driver).executeScript(javaScript);

同样的方法在这个链接上不起作用，我们不得不求助于robot类，我不建议这样做。你可以在这里找到更多信息