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

which you want to dragAndDrop()的HTML包含属性draggable=true

可拖动

draggable 是一个属性，指示元素是否可以通过本机浏览器行为或 HTML 拖放 API 拖动。 draggable 可以有以下值：

true: 元素可以拖动。
false: 无法拖动元素。

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

原生 HTML5 拖放

Eric Bidelman in the article 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 APIs。但是，使用 CSS3 您可以修饰标记，使其看起来像列，并添加光标为用户提供视觉指示器，表明某些内容是可移动的，但大多数浏览器会创建被拖动内容的幻影并且 可拖动不会做任何事情。一些浏览器，特别是FF会要求在拖动操作中有一些data be sent。

此外，Remy Sharp in the article Dragging Anything提到：

HTML 5 规范说它应该像将以下属性添加到相关元素的标记一样简单：

draggable="true"

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

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

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

Answer 2

在与 HTML5 交互的 Selenium 中存在拖放问题，我尝试在 HTML5 页面上使用以下操作 class 方法，但它们似乎从未起作用

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

另一方面，您可以使用 JS script

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);

同样的方法不适用于此link and we had to resort to robot class which I wouldn't suggest. You can find more information

WebDriver 拖放在页面上不起作用

WebDriver Drag-and-Drop does not work on the page

java

selenium

webdriver

selenium-webdriver

可拖动

原生 HTML5 拖放