Selenium+JavaScript实现Shadow DOM内元素拖拽问题求助

1. 准确定位Shadow DOM内的目标元素 #

原方案未正确穿透Shadow DOM获取目标节点，需先进入iframe上下文，再逐层获取Shadow Root内的元素：

// 获取iframe元素及内部文档
const iframe = document.querySelector('iframe[droppable="true"]');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 获取Shadow DOM宿主
const macroponent = iframeDoc.querySelector('macroponent');
// 获取Shadow Root内的实际放置目标
const dropTarget = macroponent.shadowRoot.querySelector('nw-head h1');

2. 调整拖拽模拟函数，适配跨上下文与Shadow DOM #

原函数的事件触发对象错误，需确保drop等事件直接作用于Shadow DOM内的目标元素，同时补充标准拖拽事件并允许事件穿透Shadow DOM：

function simulateDragDrop(sourceNode, targetNode) {
    // 模拟鼠标拖拽序列
    const mouseDown = new MouseEvent('mousedown', { bubbles: true, cancelable: true, clientX: 50, clientY: 50 });
    const mouseMove = new MouseEvent('mousemove', { bubbles: true, cancelable: true, clientX: 150, clientY: 150 });
    const mouseUp = new MouseEvent('mouseup', { bubbles: true, cancelable: true, clientX: 150, clientY: 150 });

    // 触发源元素拖拽起始
    sourceNode.dispatchEvent(mouseDown);
    // 触发目标元素上的拖拽经过
    targetNode.dispatchEvent(mouseMove);
    // 触发目标元素上的放置完成
    targetNode.dispatchEvent(mouseUp);

    // 触发标准拖拽事件（适配页面原有监听器）
    const dragStart = new DragEvent('dragstart', { 
        bubbles: true, 
        cancelable: true, 
        dataTransfer: new DataTransfer(),
        composed: true // 允许事件穿透Shadow DOM
    });
    const dragOver = new DragEvent('dragover', { 
        bubbles: true, 
        cancelable: true, 
        dataTransfer: new DataTransfer(),
        composed: true 
    });
    const drop = new DragEvent('drop', { 
        bubbles: true, 
        cancelable: true, 
        dataTransfer: new DataTransfer(),
        composed: true 
    });

    sourceNode.dispatchEvent(dragStart);
    targetNode.dispatchEvent(dragOver);
    targetNode.dispatchEvent(drop);
}

3. 确保代码在正确上下文执行 #

如果使用Selenium，需先切换到iframe上下文再执行JS代码：

# Python示例
iframe = driver.find_element(By.CSS_SELECTOR, 'iframe[droppable="true"]')
driver.switch_to.frame(iframe)
# 执行获取Shadow DOM元素和拖拽模拟的JS
driver.execute_script("""
const source = window.parent.document.querySelector('span[draggable="true"]');
const iframeDoc = document;
const macroponent = iframeDoc.querySelector('macroponent');
const dropTarget = macroponent.shadowRoot.querySelector('nw-head h1');

function simulateDragDrop(sourceNode, targetNode) {
    const mouseDown = new MouseEvent('mousedown', { bubbles: true, cancelable: true, clientX: 50, clientY: 50 });
    const mouseMove = new MouseEvent('mousemove', { bubbles: true, cancelable: true, clientX: 150, clientY: 150 });
    const mouseUp = new MouseEvent('mouseup', { bubbles: true, cancelable: true, clientX: 150, clientY: 150 });

    sourceNode.dispatchEvent(mouseDown);
    targetNode.dispatchEvent(mouseMove);
    targetNode.dispatchEvent(mouseUp);

    const dragStart = new DragEvent('dragstart', { 
        bubbles: true, cancelable: true, dataTransfer: new DataTransfer(), composed: true 
    });
    const dragOver = new DragEvent('dragover', { 
        bubbles: true, cancelable: true, dataTransfer: new DataTransfer(), composed: true 
    });
    const drop = new DragEvent('drop', { 
        bubbles: true, cancelable: true, dataTransfer: new DataTransfer(), composed: true 
    });

    sourceNode.dispatchEvent(dragStart);
    targetNode.dispatchEvent(dragOver);
    targetNode.dispatchEvent(drop);
}

simulateDragDrop(source, dropTarget);
""")
driver.switch_to.default_content()

4. 验证页面事件监听器的兼容性 #

检查window.NW.td.dragOverHandler和dragLeaveHandler是否能处理来自Shadow DOM的事件，若原有逻辑仅监听body，需确保事件通过composed: true冒泡到body，或直接在Shadow DOM内的目标元素上绑定对应监听器。

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