Unlayer网站Selenium 4拖拽功能失效问题求助

我在Unlayer网站尝试了各类拖拽操作组合，但拖拽功能始终无法正常工作。使用Selenium 4编写了如下测试代码，问题仍未解决：

@Test()
public void test() throws InterruptedException {
    driver.get("https://dashboard.unlayer.com/create/blank?_gl=1*afclpx*_ga*NzU0NTMwNzU3LjE2NzYzMTAyOTk.*_ga_VMP9QH8KW8*MTY3NjMxMDI5OC4xLjEuMTY3NjMxMDMwOS41OC4wLjA.");
    Thread.sleep(9000);
    driver.switchTo().frame(0);
    
    Thread.sleep(9000);
    
    WebElement source = driver.findElement(By.xpath("//div [text ()='Text']"));
    
    Thread.sleep(9000);
    WebElement target = driver.findElement(By.xpath("//div[text()='No content here. Drag content from right.']"));
    System.out.println("target");
    System.out.println("target= "+target.getText());
    
    Thread.sleep(5000);
    Actions a = new Actions(driver); 
    Thread.sleep(5000);
    a.click(source);
    System.out.println("Click on="+source);
    Thread.sleep(5000);
    a.release(target);
    a.click(target);
    System.out.println("Click on="+target);
}

问题分析与解决思路 #

1. 替换硬编码休眠为显式等待

大量Thread.sleep()会导致测试不稳定，应该用Selenium显式等待替代，确保元素加载完成后再执行操作：

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(15));
// 等待frame可切换
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(0));
// 等待Text元素可见
WebElement source = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[text()='Text']")));
// 等待目标区域可见
WebElement target = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[text()='No content here. Drag content from right.']")));

2. 修正拖拽操作的Actions用法

原代码的click(source)+release(target)不符合拖拽逻辑，改用标准的拖拽方法：

Actions actions = new Actions(driver);
// 方法1：直接调用dragAndDrop
actions.dragAndDrop(source, target).build().perform();

// 方法2：分步模拟真实拖拽流程
actions.clickAndHold(source)
       .moveToElement(target)
       .release(target)
       .build()
       .perform();

3. 处理Unlayer的自定义拖拽逻辑

如果标准Actions方法无效，可能是Unlayer使用了自定义拖拽事件（如React DnD），可尝试通过JavaScript注入触发拖拽：

JavascriptExecutor js = (JavascriptExecutor) driver;
String dragScript = "function simulateDragDrop(source, target) { " +
                    "var mouseDown = new MouseEvent('mousedown', {bubbles: true, cancelable: true, clientX: source.getBoundingClientRect().x, clientY: source.getBoundingClientRect().y}); " +
                    "source.dispatchEvent(mouseDown); " +
                    "var dragOver = new MouseEvent('dragover', {bubbles: true, cancelable: true, clientX: target.getBoundingClientRect().x, clientY: target.getBoundingClientRect().y}); " +
                    "target.dispatchEvent(dragOver); " +
                    "var drop = new MouseEvent('drop', {bubbles: true, cancelable: true, clientX: target.getBoundingClientRect().x, clientY: target.getBoundingClientRect().y}); " +
                    "target.dispatchEvent(drop); " +
                    "var mouseUp = new MouseEvent('mouseup', {bubbles: true, cancelable: true, clientX: target.getBoundingClientRect().x, clientY: target.getBoundingClientRect().y}); " +
                    "target.dispatchEvent(mouseUp); " +
                    "}";
js.executeScript(dragScript, source, target);

4. 优化元素定位准确性

原xpath可能匹配多个元素，建议通过父容器缩小范围：

// 定位右侧面板中的Text组件
WebElement source = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[contains(@class, 'sidebar-item')]//div[text()='Text']")));

5. 确认Frame切换正确性

避免依赖索引切换frame，改用更稳定的定位方式：

wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe[title='Email Editor']")));

完整修正后示例代码 #

@Test()
public void testUnlayerDragAndDrop() {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(15));
    driver.get("https://dashboard.unlayer.com/create/blank?_gl=1*afclpx*_ga*NzU0NTMwNzU3LjE2NzYzMTAyOTk.*_ga_VMP9QH8KW8*MTY3NjMxMDI5OC4xLjEuMTY3NjMxMDMwOS41OC4wLjA.");
    
    // 切换到编辑器frame
    wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe[title='Email Editor']")));
    
    // 定位Text组件与目标区域
    WebElement source = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[contains(@class, 'sidebar-item')]//div[text()='Text']")));
    WebElement target = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[text()='No content here. Drag content from right.']")));
    
    // 执行拖拽操作
    Actions actions = new Actions(driver);
    actions.clickAndHold(source)
           .pause(Duration.ofMillis(500))
           .moveToElement(target)
           .pause(Duration.ofMillis(500))
           .release(target)
           .build()
           .perform();
    
    // 验证拖拽成功（目标区域提示文本消失）
    wait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[text()='No content here. Drag content from right.']")));
}

内容的提问来源于stack exchange，提问作者Nirbhay Deep