元素不在画布内移动

Question

我想在画布中移动元素，但是不知何故。

我尝试过的代码：

        Actions actions = new Actions(driver);
        actions.moveToElement(flowCanvas, 434, 177);
        actions.clickAndHold();
        actions.moveToElement(flowCanvas, 592 , 373);
        actions.release();
        actions.perform();

我的xpath：

   @FindBy(xpath = "//div[@id='diagramDiv']//canvas")
    protected WebElement flowCanvas;

我尝试使用的网址：https://gojs.net/latest/samples/panelLayout.html

我正在使用Selenium Webdriver和Java。我在上面的代码中没有收到任何错误，但是它也没有移动元素。

试图移动以下元素：

Answer 1

基本上，问题在于您使用的坐标和所使用的Bowser / Web驱动程序实现。 W3C specification指出Action命令的偏移量是从元素的中心开始。但是，并非所有的Web驱动程序都遵循此规定。因此，对于壁虎驱动程序（Firefox），moveToElement的x和y偏移量基本上是从您的案例的元素中心到Canvas中心的偏移量而得出的，而对于Chrome Driver（Google Chrome），坐标是从左侧计算的顶角。因此，如果您需要拖放的交叉浏览器支持，则需要类似以下的内容。

WebDriver driver = getDriver();

driver.get("https://gojs.net/latest/samples/panelLayout.html");
WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

if(isGoogleChrome()){
    new Actions(driver)
   .moveToElement(flowCanvas, 100, 125).clickAndHold()
   .moveToElement(flowCanvas, 150, 175).release()
   .perform();
} else if (isFireFox()){
    new Actions(driver)
    .moveToElement(flowCanvas, -50, -50).clickAndHold()
    .moveToElement(flowCanvas, 100, 100).release()
    .perform();
}

如您所见，对于Firefox，您必须使用负值将鼠标从画布的中心移到左上角，对于chrome，则需要将鼠标左右移一点。

Answer 2

尝试操作和操作组合

Actions builder = new Actions(driver);
Action moveAction = builder.moveToElement(flowCanvas,434,177)  
                 .click()
                 .moveByOffset(592, 373) 
                 .doubleClick()
                 .build();
moveAction.perform();

Answer 3

我尝试与Sikuli一起移动那个物体，它的工作就像一种魅力。请检查下面的代码段。

    Pattern p = new Pattern("Win/AboutScreen/Move.PNG");
    Region r1 = screen.exists(p);
    r1.hover();
    r1.mouseDown(Button.LEFT);
    r1.mouseMove(50, 50);
    r1.mouseUp(Button.LEFT); 

您需要将屏幕快照保存在某个位置并提及路径。 hover();方法将在其上找到屏幕和鼠标悬停。 mouseDown(Button.LEFT)将保持按住鼠标左键的状态，最后一个mouserMove(50,50)将移动元素进行协调。

如果您正在使用Maven项目，则非常容易安装Sikuli，然后只需添加一个简单的依赖项即可。

希望获得帮助：）

Answer 4

使用Selenium Web驱动程序或任何其他类似工具，您可以不能访问画布内的元素。在画布内部起作用的唯一硒IDE命令是clickAt。它可以将点击发送到某个特定的x / y位置。它不允许您拖放元素。 Webdriver也具有moveToElement，但是获得正确坐标的挑战仍然存在。

  

（xpath =“ // div [@ id ='diagramDiv'] // canvas”）

这只是画布本身的定位符，而不是内部元素之一的定位符。

解决方案：我进行画布测试的方法是使用开源 kantu 硒离子及其图像/ ocr驱动的XClick / XMove / XType命令。有了它，您可以通过几种方式选择，单击和移动（拖放）画布元素：

通过 x / y坐标选择元素（就像上面提到的clickAt一样，但是它还包括模拟移动，鼠标悬停，鼠标右键单击事件等）
通过

• select元素的图像选择元素（类似于sikuli，但直接在浏览器内部而不是在桌面上工作）

• 通过其文本选择元素。这使用OCR。因此，如果画布UI中的元素包含文本（例如菜单项或图标文本），则这是一个非常强大的选择器。

有关更多信息，请参见kantu文档的canvas testing和visual ui testing页。