Cypress伪元素拖拽测试：用例通过但UI无拖拽效果

编写了以下Cypress测试用例验证拖拽功能，测试用例执行显示通过，但实际UI中并未发生拖拽操作，请求协助排查原因。

源元素 #

<span class="Multiterm Multiterm-"> Ready Messages</span>

拖拽前目标元素DOM结构 #

<div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 5px;"></div>

拖拽后目标元素DOM结构 #

<div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 365px;">
  <div id="1" class="react-grid-item LightTheme widget draggableArea react-draggable cssTransforms react-resizable" data-grid="[object Object]" data-coordinate="2:1" style="height: 265px; position: absolute; transform: translate(180px, 90px) !important; width: 355px !important;">
    <div class="widgetTopDiv">
      <span class="LightTheme widgetSpan">
        <span class="Multiterm Multiterm-"> Ready Messages</span>
      </span>
      <span class="LightTheme filterSpan">
        <img src="./static/media/filter_applied.4d67f99c.svg" class="LightTheme widgetFilterIcon" draggable="false">
      </span>
      <span class="actionDeleteSpan">
        <img id="1" src="./static/media/copy.5d595a98.svg" class="LightTheme widgetCopyIcon" draggable="false">
        <img src="./static/media/Edit_123.b70c7de2.svg" class="LightTheme widgetEditIcon" draggable="false">
        <img src="./static/media/close.ae62c28e.svg" class="LightTheme widgetDeleteIcon" draggable="false">
      </span>
    </div>
    <div id="chartWidget_1" class="chartDataItem">
      <span class="settingsIcon">
        <img class="LightTheme settingsIcon" src="./static/media/No data loaded.612d838a.svg" draggable="false">
      </span>
    </div>
    <span class="react-resizable-handle react-resizable-handle-se"></span>
  </div>
</div>

测试用例代码 #

cy.visit("link-to-site")
cy.get('#Username').type('user-name')
cy.contains('Continue').click()
cy.get('#Password').type('password')
cy.get("button[value='login']").click()
cy.wait(10000)
cy.get(".newDashboard.LightTheme.LiButton_DefaultClass").click()
cy.wait(3000)
cy.get("#menuExpanIcon").click()
const drag_source = "span[id='24_dashboardKpiMenu'] span span[class='Multiterm Multiterm-']"
const drag_target = ".react-grid-layout.LightTheme.dashboardGridLayout"
cy.wait(1000)

const dataTransfer = new DataTransfer();
cy.get(drag_source).trigger('dragstart', {
            dataTransfer
});
cy.get(drag_target).trigger('drop', {force: true}, {
            dataTransfer
})

排查方向 #

1. 补全拖拽事件链：多数前端拖拽实现依赖dragover事件维持拖拽状态，只触发dragstart和drop可能无法触发完整逻辑，补充事件触发：

   cy.get(drag_source).trigger('dragstart', { dataTransfer });
   cy.get(drag_target).trigger('dragover', { dataTransfer }); // 新增该行
   cy.get(drag_target).trigger('drop', { dataTransfer });
   

2. 校验元素定位精度：

   • 确认drag_source选择器是否命中真正绑定拖拽事件的元素，比如可能外层的#24_dashboardKpiMenu才是可拖拽容器，而非内部文本span；
   • 目标元素初始高度仅5px，触发区域极小，可先滚动到目标位置再操作：cy.get(drag_target).scrollIntoView()。

3. 完善DataTransfer数据：部分拖拽逻辑需要依赖dataTransfer传递的数据，模拟真实拖拽场景补充数据：

   const dataTransfer = new DataTransfer();
   dataTransfer.setData('text/plain', 'Ready Messages'); // 补充拖拽数据
   cy.get(drag_source).trigger('dragstart', { dataTransfer });
   

4. 移除强制触发参数：{force: true}会跳过元素可交互性检查，可能导致事件触发在无效元素上，尝试移除该参数，确保目标元素处于可见可交互状态。

5. 替换固定等待为条件等待：固定时长的cy.wait()不可靠，改为等待元素就绪：

   // 替换cy.wait(1000)
   cy.get(drag_source).should('be.visible');
   cy.get(drag_target).should('be.visible');
   

6. 使用专用拖拽插件：针对react-grid-layout这类库，可使用@4tw/cypress-drag-drop插件简化拖拽操作，避免手动模拟事件的遗漏：

   // 安装插件后直接调用
   cy.get(drag_source).drag(drag_target);
   

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