使用Cypress实现的拖拽功能无法正常工作

这是待拖拽插件元素的HTML结构：

<div _ngcontent-c4="" class="category-items ui-draggable ui-draggable-handle ng-star-inserted" rpnodedraggable="" type="gateway" pid="68ee0524-70fa-5308-8450-4cbe585c4e5a" consumertype="Pull" name="HTTP">
    <img _ngcontent-c4="" alt="..." src="https://demoqa.blob.core.windows.net/reekoh/plugin-icon/86d81dab-41eb-5c24-a5c5-b2158d9ae677.png" /> HTTP Gateway
    <!---->
    <i _ngcontent-c4="" aria-hidden="true" class="fal fa-fw text-muted helper fa-thumbtack ng-star-inserted" role="button" title="Unpin this plugin"></i>
</div>

我用以下Cypress代码尝试实现拖拽功能，但无法正常生效：

cy.get(":nth-child(3) > :nth-child(2) > .category-items")
  .trigger("dragstart", { force: true }, { dataTransfer });
cy.get(".workspace-overlay-new.ng-star-inserted")
  .trigger("drop", { dataTransfer })
  .wait(5000);

Cypress原生trigger处理复杂拖拽（比如基于jQuery UI或自定义Angular指令的场景）时，常因事件序列不完整、dataTransfer传递异常失效，试试以下几种方案：

方案1：模拟完整拖拽事件链 #

拖拽需要dragstart、dragenter、dragover、drop完整事件配合，同时要正确初始化dataTransfer：

const dataTransfer = new DataTransfer();

cy.get(":nth-child(3) > :nth-child(2) > .category-items")
  .trigger("dragstart", { dataTransfer, force: true });

cy.get(".workspace-overlay-new.ng-star-inserted")
  .trigger("dragenter", { dataTransfer })
  .trigger("dragover", { dataTransfer })
  .trigger("drop", { dataTransfer });

方案2：使用专用拖拽插件 #

借助@4tw/cypress-drag-drop插件简化拖拽逻辑：

1. 安装插件：

npm install @4tw/cypress-drag-drop --save-dev

2. 在cypress/support/e2e.js中导入：

import '@4tw/cypress-drag-drop';

3. 调用插件的drag命令：

cy.get(":nth-child(3) > :nth-child(2) > .category-items")
  .drag(".workspace-overlay-new.ng-star-inserted", { force: true });

方案3：适配Angular自定义指令 #

元素带有rpnodedraggable自定义指令，可直接模拟鼠标拖拽的完整动作：

cy.get(".ui-draggable-handle")
  .trigger("mousedown", { which: 1, force: true })
  .trigger("mousemove", { clientX: 200, clientY: 200, force: true })
  .trigger("mouseup", { force: true });

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