如何使用chrome中的硒拖放画布Web元素

时间:2019-05-03 21:02:28

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

需要使用硒在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();
    }
}

2 个答案:

答案 0 :(得分:0)

两项更改-一项,为clickAndHold()和release()方法提供web元素。 二,目标坐标更改为10、100

动作dragAndDrop =          builder.moveToElement(画布,10,10)                 .pause(2000)                 .clickAndHold(画布)                 .pause(2000)                 .moveToElement(画布,10,100)                 .pause(2000)                 .release(画布)                 。建立();         dragAndDrop.perform();

答案 1 :(得分:0)

在末尾添加了暂停,并且画布向右移动,并显示消息“信息:使用W3C Action命令时,偏移距元素的中心”

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