如何在 react-dnd-treeview 库上使用 Selenium 测试拖放

Posted 2023-05-08

【中文标题】如何在 react-dnd-treeview 库上使用 Selenium 测试拖放

【英文标题】：How to test drag and drop with Selenium on the react-dnd-treeview library

【发布时间】：2018-10-22 00:55:24

【问题描述】：

我正在尝试在 React 应用上测试一个简单的拖放行为。

我正在使用react-dnd-treeview 库和their example website 来测试我的测试用例。

当我在调试中运行测试时，我没有收到任何错误，而且 Selenium 能够获得正确的元素，但什么也没发生，我无法创建或可视化任何类型的操作，即使在尝试之后也是如此这么多不同的答案in this similar question，但都是徒劳的。

这是我正在使用的代码：

package tests;

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.interactions.Actions;

import java.io.File;

public class DAndDJava 

    public static void main(String[] args) 

        File file = new File("C:/misc/chromedriver.exe");
        System.setProperty("webdriver.chrome.driver" , file.getAbsolutePath());

        WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("http://teleport.github.io/react-dnd-treeview/example/dist/index.html");

        WebElement dragPoint = driver.findElement(By.xpath ("//*[@id=\"root\"]/div/div/div[3]/div[2]/div[2]/div/div/div[3]/div[2]/div/div[1]/div[3]/div[1]/div"));
        WebElement dropPoint = driver.findElement(By.xpath ("//*[@id=\"root\"]/div/div/div[3]/div[2]/div[2]/div/div/div[3]/div[2]/div/div[1]/div[3]/div[1]"));

        Actions builder = new Actions(driver);

        Action dragAndDrop = builder.clickAndHold(dragPoint)
                                    .moveToElement(dropPoint)
                                    .release(dropPoint)
                                    .build();

        dragAndDrop.perform();

        driver.quit();
    

【参考方案1】：

你可以试试下面的代码：

Action dragAndDrop = builder.clickAndHold(dragPoint)
                            .moveToElement(dropPoint)
                            .moveByOffset(0,10)   
                            .release()
                            .build()
                            .perform() ;

【讨论】：

我和 OP 有同样的问题...我尝试了这个建议，但仍然不起作用。

【参考方案2】：

这里描述了解决方案

react-beautiful-dnd/issue

首先光标移动应该在元素边界内，以便将元素状态更改为dragged，然后才能将其拖动到预期位置：

action.clickAndHold(elementToDrag)
    .moveByOffset(0, -5)
    .pause(100)
    .moveByOffset(0, -300)
    .release()
    .perform();