java - 如何在 chrome 中使用 selenium 拖放 canvas web 元素

Question

在使用 selenium 在 chrome 的 Canvas 网络元素(头像编辑器)中移动图片时需要一些帮助。

这是 Canvas 元素的链接: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();
    }
}

Answer 1

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

Action 拖放 = builder.moveToElement( Canvas , 10, 10) .暂停(2000) .clickAndHold( Canvas ) .暂停(2000) .moveToElement( Canvas , 10, 100) .暂停(2000) .release( Canvas ) 。 build (); dragAndDrop.perform();