带有 mousedown、mousemove 和 mouseup 的 Cypress .trigger 命令不起作用

Question

有什么秘密方法可以让这个工作吗？

我们正在使用可拖动库在 UI 中执行此操作。

https://github.com/Shopify/draggable/tree/master/src/Draggable

我正在尝试使用 Cypress 自动化运行器将一列拖到下一列。

这是我的代码：

cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('mousedown', { which: 1 });
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .trigger('mousemove')
      .trigger('mouseup');

执行此代码没有任何可见的结果。

也试过这个：

cy.get(dataExplorerTableAttributeDraggable)
      .eq(2)
      .trigger('mousedown', { which: 1 })
      .trigger('dragstart', {})
      .trigger('drag', {});
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('dragover')
      .trigger('drop')
      .trigger('dragend')
      .trigger('mouseup');

我必须明确指出，我需要自动化来实际执行拖放操作，而不仅仅是触发事件。

我错过了什么？

Answer 1

我什至遇到过类似的问题；唯一帮助我的调整是设置 -{clientX: 505, clientY: 357}

cy.get(etlWidget)
    .trigger('mouseover')
    .trigger('mousedown', {which: 1})
    .trigger('mousemove', {clientX: 505, clientY: 357})
    .xpath(PageElements.workflow.x_initial_drop_target_area)
    .trigger('mousemove')
    .trigger('mouseup', {force: true})

仅供参考，您必须监听浏览器事件并设置这些详细信息。此处有更多详细信息 - https://developers.google.com/web/tools/chrome-devtools/console/events

另外，我认为这只会在固定视口上运行。请看看这是否有帮助。