如何使用 cypress-drag-drop 包将一个 div 拖放到另一个 Cypress 测试中？

【问题标题】：How to drag and drop one div onto another in Cypress test using cypress-drag-drop package?如何使用 cypress-drag-drop 包将一个 div 拖放到另一个 Cypress 测试中？
【发布时间】：2023-02-13 09:57:42
【问题描述】：

我正在尝试编写一个 Cypress 测试，将 A 列拖放到此网页上的 B 列 - https://the-internet.herokuapp.com/drag_and_drop

我安装了@4tw/cypress-drag-drop 包并将以下内容添加到我的support/commands.js： require("@4tw/cypress-drag-drop");

这是我的赛普拉斯代码：

cy.get("#column-a").drag("#column-b", { force: true });

测试通过，但这些列在视觉上的表现与我手动将 A 列拖到 B 列时不同。

相反，这是 Cypress Explorer 中浏览器上显示的内容：

正如你所看到的，A 列是灰色的，好像它被拖动了，但没有被放下

有人可以指出我做错了什么吗？

【问题讨论】：

标签： cypress

【解决方案1】：

你不能，库不支持此页面的正确事件。

但是您可以使用赛普拉斯命令来完成。

这些是页面上使用的事件

col.addEventListener("dragstart", handleDragStart, false);
col.addEventListener("dragenter", handleDragEnter, false);
col.addEventListener("dragover", handleDragOver, false);
col.addEventListener("dragleave", handleDragLeave, false);
col.addEventListener("drop", handleDrop, false);
col.addEventListener("dragend", handleDragEnd, false);

这是通过的测试

// check initial order
cy.get('div.column')
  .then($cols => [...$cols].map(col => col.innerText.trim()))
  .should('deep.eq', ['A', 'B'])

const dataTransfer = new DataTransfer;

cy.get("#column-a")
  .trigger('dragstart', {dataTransfer})
cy.get("#column-b")
  .trigger('dragenter')
  .trigger('dragover', {dataTransfer})
  .trigger('drop', {dataTransfer})
cy.get("#column-a")
  .trigger('dragend')

// check new order
cy.get('div.column')
  .then($cols => [...$cols].map(col => col.innerText.trim()))
  .should('deep.eq', ['B', 'A'])

// check drag opacity reverted back
cy.get("#column-a").should('have.css', 'opacity', '1')
cy.get("#column-b").should('have.css', 'opacity', '1')

【讨论】：