Chrome下Selenium自带DragAndDrop失效，求JS替代方案（C#）

针对新版Chrome中Selenium原生DragAndDrop方法失效的问题，以下是适配当前版本的JavaScript替代方案，可直接在Selenium中执行：

核心JavaScript代码 #

function simulateDragDrop(sourceId, targetId) {
    // 获取源元素和目标元素
    const source = document.getElementById(sourceId);
    const target = document.getElementById(targetId);

    // 创建并触发dragstart事件
    const dragStartEvent = new DragEvent('dragstart', {
        bubbles: true,
        cancelable: true,
        dataTransfer: new DataTransfer()
    });
    source.dispatchEvent(dragStartEvent);

    // 连续触发dragover事件，确保目标元素识别拖拽状态
    const dragOverEvent = new DragEvent('dragover', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    target.dispatchEvent(dragOverEvent);

    // 创建并触发drop事件完成拖拽
    const dropEvent = new DragEvent('drop', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    target.dispatchEvent(dropEvent);

    // 触发dragend事件收尾流程
    const dragEndEvent = new DragEvent('dragend', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    source.dispatchEvent(dragEndEvent);
}

// 执行指定元素的拖拽
simulateDragDrop('ATest_DragDropElement', 'ATest_DropZone');

在Selenium中调用的示例 #

Python版本 #

# 假设driver是已初始化的ChromeDriver实例
js_code = """
function simulateDragDrop(sourceId, targetId) {
    const source = document.getElementById(sourceId);
    const target = document.getElementById(targetId);

    const dragStartEvent = new DragEvent('dragstart', {
        bubbles: true,
        cancelable: true,
        dataTransfer: new DataTransfer()
    });
    source.dispatchEvent(dragStartEvent);

    const dragOverEvent = new DragEvent('dragover', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    target.dispatchEvent(dragOverEvent);

    const dropEvent = new DragEvent('drop', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    target.dispatchEvent(dropEvent);

    const dragEndEvent = new DragEvent('dragend', {
        bubbles: true,
        cancelable: true,
        dataTransfer: dragStartEvent.dataTransfer
    });
    source.dispatchEvent(dragEndEvent);
}
simulateDragDrop('ATest_DragDropElement', 'ATest_DropZone');
"""
driver.execute_script(js_code)

Java版本 #

// 假设driver是已初始化的ChromeDriver实例
String jsCode = "function simulateDragDrop(sourceId, targetId) {" +
        "const source = document.getElementById(sourceId);" +
        "const target = document.getElementById(targetId);" +
        "const dragStartEvent = new DragEvent('dragstart', {" +
        "bubbles: true, cancelable: true, dataTransfer: new DataTransfer()" +
        "});" +
        "source.dispatchEvent(dragStartEvent);" +
        "const dragOverEvent = new DragEvent('dragover', {" +
        "bubbles: true, cancelable: true, dataTransfer: dragStartEvent.dataTransfer" +
        "});" +
        "target.dispatchEvent(dragOverEvent);" +
        "const dropEvent = new DragEvent('drop', {" +
        "bubbles: true, cancelable: true, dataTransfer: dragStartEvent.dataTransfer" +
        "});" +
        "target.dispatchEvent(dropEvent);" +
        "const dragEndEvent = new DragEvent('dragend', {" +
        "bubbles: true, cancelable: true, dataTransfer: dragStartEvent.dataTransfer" +
        "});" +
        "source.dispatchEvent(dragEndEvent);" +
        "}" +
        "simulateDragDrop('ATest_DragDropElement', 'ATest_DropZone');";
((JavascriptExecutor) driver).executeScript(jsCode);

注意事项 #

• 执行前需确保源元素和目标元素已完全加载且可见，可配合Selenium的显式等待（如WebDriverWait）使用。
• 若页面存在动画，需等待动画结束后再执行脚本，避免元素位置偏移导致操作失败。
• 如果目标元素需要阻止默认dragover行为，可在脚本开头添加target.addEventListener('dragover', e => e.preventDefault());。

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