如何在 chrome 中使用 selenium 拖放画布 Web 元素答案

【问题标题】：How to drag and drop canvas web element with selenium in chrome如何在 chrome 中使用 selenium 拖放画布 Web 元素
【发布时间】：2019-09-22 10:18:31
【问题描述】：

在使用 selenium 在 chrome 中移动画布 Web 元素（头像编辑器）中的图片时需要一些帮助。

这里是画布元素的链接：https://react-avatar-editor.netlify.com

这里是我需要使用 Selenium Webdriver 做的一个小演示：https://www.dropbox.com/s/9pf5eeaktpgu0m7/Screen%20Recording%202019-05-03%20at%2011.48.31%20PM.mov?dl=0

请看下面的代码示例。

相同的代码在 Firefox 中有效，但在 Chrome 中无效。有人知道问题出在哪里，我该如何解决？

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.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

import java.util.concurrent.TimeUnit;

public class TestTest {

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "pathToChromedriver");
        WebDriver wd = new ChromeDriver();
        wd.manage().window().maximize();
        wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        wd.get("https://react-avatar-editor.netlify.com/");
        WebElement canvas = wd.findElement(By.cssSelector("canvas.editor-canvas"));
        Actions builder = new Actions(wd);
        Action dragAndDrop = builder
                .moveToElement(canvas, 10, 10)
                .pause(2000)
                .clickAndHold()
                .pause(2000)
                .moveToElement(canvas, 100, 100)
                .pause(2000)
                .release()
                .build();
        dragAndDrop.perform();
        wd.quit();
    }
}

【问题讨论】：

欢迎来到 SO。在 chrome 中执行此操作时是否收到任何错误消息？
不，没有错误

标签： java reactjs selenium selenium-webdriver selenium-chromedriver

【解决方案1】：

两个变化 - 一，为 clickAndHold() 和 release() 方法提供 webelement。二、目的地坐标改为10, 100

动作 dragAndDrop = builder.moveToElement(画布, 10, 10) .暂停（2000） .clickAndHold（画布） .暂停（2000） .moveToElement(画布, 10, 100) .暂停（2000） .release（画布）。建造（）; dragAndDrop.perform();

【讨论】：

builder.moveToElement(canvas, 10, 10) .clickAndHold(canvas) .moveByOffset(10, 30) .release(canvas) .build() .perform();
谢谢！向 clickAndHold() 和 release() 方法添加元素解决了 chrome 的问题。在这种情况下，我可以从链中删除 moveToElement() 方法。所以最终在 chrome 代码中的工作是：builder.clickAndHold(canvas).moveByOffset(100, 100).release(canvas).build().perform();

【解决方案2】：

在末尾添加了暂停，画布向右移动，并显示消息“INFO：当使用 W3C 动作命令时，偏移量来自元素的中心”

  .release(canvas)
  .pause(3000)
  .build();

【讨论】：