Robot Framework无法实现Electron+Angular CDK应用拖拽功能求助

核心原因分析 #

Angular CDK拖拽组件依赖原生DOM事件链的完整触发，而Electron的WebView环境与Robot Framework默认的ActionChains事件模拟存在兼容性差异，导致模拟事件未被CDK的拖拽指令正确捕获，从而出现测试用例通过但实际未执行拖拽的情况。

具体解决方案 #

1. 用原生JS模拟完整拖拽事件序列 #

直接通过Execute JavaScript注入脚本，模拟CDK拖拽所需的mousedown→mousemove→mouseup完整事件链，确保事件带有正确的坐标和冒泡属性：

*** Test Cases ***
Simulate CDK Drag with JS
    ${source_elem}=    Get WebElement    css=.available-section .cdk-drag
    ${target_elem}=    Get WebElement    css=.output-section .cdk-drop-list
    Execute JavaScript    |
        const source = arguments[0];
        const target = arguments[1];
        // 触发mousedown在拖拽元素中心
        const srcRect = source.getBoundingClientRect();
        const srcX = srcRect.left + srcRect.width/2;
        const srcY = srcRect.top + srcRect.height/2;
        source.dispatchEvent(new MouseEvent('mousedown', {
            clientX: srcX, clientY: srcY, bubbles: true, button: 0
        }));
        // 移动鼠标到目标区域中心
        const tarRect = target.getBoundingClientRect();
        const tarX = tarRect.left + tarRect.width/2;
        const tarY = tarRect.top + tarRect.height/2;
        document.dispatchEvent(new MouseEvent('mousemove', {
            clientX: tarX, clientY: tarY, bubbles: true, button: 0
        }));
        // 触发mouseup完成拖拽
        document.dispatchEvent(new MouseEvent('mouseup', {
            clientX: tarX, clientY: tarY, bubbles: true, button: 0
        }));
    ARGUMENTS    ${source_elem}    ${target_elem}
    Wait Until Keyword Succeeds    5s    1s    Page Should Contain Element    css=.output-section .cdk-drag

2. 配置Electron应用的自动化支持 #

若你有权限修改Electron应用源码，需在BrowserWindow的webPreferences中开启自动化相关配置，确保事件能正常传递：

new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    automation: true, // 关键：启用自动化事件支持
    webSecurity: true
  }
});

3. 优化原生拖拽关键字的参数 #

尝试给Robot Framework的Drag And Drop关键字传入偏移量参数，确保点击在拖拽元素的有效触发区域：

Drag And Drop    ${source_locator}    ${target_locator}    source_offset=30,30    target_offset=30,30

偏移量需根据元素实际尺寸调整，优先选择元素中心位置。

4. 验证元素定位准确性 #

测试用例通过可能仅代表元素定位成功，但实际拖拽的并非CDK绑定的节点。需确认定位器指向带有cdk-drag类的元素：

Log Element    ${source_elem}
# 或验证元素属性
${has_cdk_drag}=    Execute JavaScript    return arguments[0].classList.contains('cdk-drag');    ARGUMENTS    ${source_elem}
Should Be True    ${has_cdk_drag}

验证步骤 #

1. 执行测试时观察Electron窗口的鼠标移动视觉反馈
2. 打开Electron的DevTools（F12）查看控制台是否有CDK拖拽相关的错误或警告
3. 检查目标区域是否出现被拖拽的元素

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