RobotFramework中Selenium2Library的Drag And Drop关键字失效求助

我之前也碰到过一模一样的坑！Selenium2Library自带的Drag And Drop关键字对HTML5原生拖拽场景支持拉胯，核心原因是HTML5拖拽依赖一套特殊的事件序列（dragstart、dragover、drop等），而默认关键字只是简单模拟鼠标按下-移动-释放的动作，完全触发不了这些原生拖拽事件。

先把你的测试代码格式化还原 #

*** Settings ***
Library    Selenium2Library

*** Variables ***
${URL}    https://html5demos.com/drag/

*** Test Cases ***
Prepare Browser
    Open Browser    ${URL}    browser=chrome
    Maximize Browser Window
    # 这里是你尝试用Drag And Drop但失效的地方
    # Drag And Drop    #one    #bin

最靠谱的解决方案：用JavaScript模拟HTML5拖拽事件 #

我们可以通过执行自定义JavaScript来触发完整的HTML5拖拽事件流程，这是目前解决这类问题的最优解。

方案1：直接在测试用例中嵌入JS脚本

修改你的测试用例，添加以下步骤就能搞定：

*** Test Cases ***
Test HTML5 Drag And Drop
    Open Browser    ${URL}    chrome
    Maximize Browser Window
    # 定位要拖拽的元素和目标容器
    ${source_element}    Get WebElement    css=#one
    ${target_element}    Get WebElement    css=#bin
    
    # 执行JS模拟完整的HTML5拖拽逻辑
    Execute JavaScript    """
        function simulateHtml5DragDrop(source, target) {
            // 触发dragstart事件，必须初始化dataTransfer才能让拖拽生效
            const dragStartEvent = new DragEvent('dragstart', {
                bubbles: true,
                cancelable: true,
                dataTransfer: new DataTransfer()
            });
            source.dispatchEvent(dragStartEvent);
            
            // 触发dragover事件，必须阻止默认行为才能允许drop
            const dragOverEvent = new DragEvent('dragover', {
                bubbles: true,
                cancelable: true
            });
            target.addEventListener('dragover', (e) => e.preventDefault(), {once: true});
            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
            });
            source.dispatchEvent(dragEndEvent);
        }
        simulateHtml5DragDrop(arguments[0], arguments[1]);
    """    ${source_element}    ${target_element}
    
    # 验证拖拽是否成功（比如检查源元素是否被移除）
    Wait Until Element Is Not Visible    css=#one    timeout=5s
    Close Browser

方案2：封装成可复用的自定义关键字

如果你的项目里有多处拖拽场景，可以把这个逻辑封装成自定义关键字，方便重复调用：

*** Keywords ***
HTML5 Drag And Drop
    [Arguments]    ${source_locator}    ${target_locator}
    ${source}    Get WebElement    ${source_locator}
    ${target}    Get WebElement    ${target_locator}
    Execute JavaScript    """
        function simulateHtml5DragDrop(source, target) {
            const dragStartEvent = new DragEvent('dragstart', {
                bubbles: true,
                cancelable: true,
                dataTransfer: new DataTransfer()
            });
            source.dispatchEvent(dragStartEvent);
            
            const dragOverEvent = new DragEvent('dragover', {
                bubbles: true,
                cancelable: true
            });
            target.addEventListener('dragover', (e) => e.preventDefault(), {once: true});
            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
            });
            source.dispatchEvent(dragEndEvent);
        }
        simulateHtml5DragDrop(arguments[0], arguments[1]);
    """    ${source}    ${target}

之后在测试用例里直接调用就行：

Test HTML5 Drag And Drop
    Open Browser    ${URL}    chrome
    Maximize Browser Window
    HTML5 Drag And Drop    css=#one    css=#bin
    Wait Until Element Is Not Visible    css=#one
    Close Browser

额外小建议：升级到SeleniumLibrary #

Selenium2Library已经停止维护了，它的功能早就合并到新版的SeleniumLibrary里了。新版库对HTML5拖拽的支持有所优化，而且后续兼容性和维护性更好，建议你考虑升级过去。

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