Cypress在React网站中拖拽操作不生效 无报错但元素未移动

• 拖拽源元素所在的「不在菜单中」列表默认对用户隐藏，隐藏状态下的元素触发的拖拽事件不会被拖拽库识别响应
• 从元素的data-rbd-*属性可以判断当前拖拽功能基于react-beautiful-dnd（rbd）实现，该库未使用原生drag/drop事件实现拖拽逻辑，而是通过监听鼠标/指针事件序列实现，你写的原生dragstart/drop/dragend事件触发逻辑无法被rbd捕获处理
• 你使用的div[class='page3']选择器容错性差，如果元素后续新增其他类名会导致匹配失败，且固定等待cy.wait(3000)稳定性不足

方案1：手动触发rbd识别的鼠标事件流（无需额外插件） #

public dragAndDropPagesToInMenu(): void {
  // 先确保「不在菜单中」列表可见，优先模拟用户真实展开操作，此处仅为示例
  cy.get('[data-testid="pages-section-not-in-menu-list"]')
    .invoke('show')
    .should('be.visible');

  cy.log("Dragging one page to `In Menu` section");
  const dragSource = cy.get("div.page3").first().should('be.visible');
  const dropTarget = cy.get('[data-testid="pages-section-in-menu-list"]').eq(0);

  // 触发完整的鼠标事件流，满足rbd的拖拽校验规则
  dragSource
    .trigger('mousedown', { which: 1, button: 0, clientX: 100, clientY: 100 })
    // 先移动小段距离触发rbd的拖拽状态激活
    .trigger('mousemove', { clientX: 120, clientY: 120, force: true })
    // 移动到目标区域坐标，可根据实际页面布局调整数值
    .trigger('mousemove', { clientX: 300, clientY: 200, force: true });
  
  // 在目标区域释放鼠标
  dropTarget.trigger('mouseup', { force: true });

  // 验证拖拽结果
  dropTarget.should('contain', 'Page3');
}

方案2：使用rbd官方适配的Cypress插件（更稳定） #

直接使用rbd生态配套的测试插件，无需手动处理事件流：

1. 先安装依赖：npm install @atlaskit/cypress-plugin --save-dev
2. 在Cypress支持文件（通常为cypress/support/e2e.ts）中导入插件：import '@atlaskit/cypress-plugin';
3. 测试代码简化为：

public dragAndDropPagesToInMenu(): void {
  // 确保拖拽源可见
  cy.get('[data-testid="pages-section-not-in-menu-list"]').invoke('show');
  // 直接调用插件封装的drag方法完成拖拽
  cy.get("div.page3").first().drag('[data-testid="pages-section-in-menu-list"]');
  // 验证结果
  cy.get('[data-testid="pages-section-in-menu-list"]').should('contain', 'Page3');
}

• 替换固定等待cy.wait(3000)为元素可见性断言，提升测试稳定性
• 优先模拟用户真实的「展开不在菜单列表」操作，而非直接用invoke('show')强制显示，更贴合真实使用场景
• 选择器统一使用data-testid而非类名，避免业务样式变更导致测试失效

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