如何使用Chrome中的Selenium拖放帆布Web元素

Question

使用Selenium在Chrome中将图片移入Canvas Web Element(Avatar编辑器(时需要一些帮助。

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

这是我使用Selenium webdriver需要做的一个小演示：https：//www.dropbox.com/s/9pf5eeaktpgu0m7/screen 2019-05-05-05-03 AT AT 11.48.31 pm；.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((和repares((方法提供webelement。第二，目标坐标更改为10，100

动作draganddrop = Builder.Movetoelement(Canvas，10，10( .pause(2000( .Clickandhold(画布( .pause(2000( 。 .pause(2000( 。 。建造((; draganddrop.perform((;

Answer 2

在末尾添加了暂停，画布向右移动，并带有消息："信息：使用W3C Action命令时，偏移是来自元素的中心"

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