Cypress - 画布元素拖放

Question

我需要将鼠标拖放到画布元素上，我尝试了一些代码示例，但不幸的是，它们没有帮助我的需要。

(import '@4tw/cypress-drag-drop') 我也添加了拖放插件，但使用该插件并没有解决问题。

有人知道该怎么做吗？

Then('using pan tool `already selected` locate the tool where the incident happened', () => {
    cy.get('canvas[style="width: 600px; height: 558px; display: block;"]').trigger('mousedown', 'top', { force: true })
    cy.wait(3000).get('canvas[style="width: 600px; height: 558px; display: block;"]').trigger('mousemove', 'bottom', { force: true })
})

我需要鼠标移动，单击，然后鼠标移动到其他地方而不是中心方向。

如果操作成功，如图所示，图片正在定向移动

如您所见，该元素是一个画布元素。

Answer 1

你可以试试这个。它会起作用的。

cy.get('canvas[style="width: 600px; height: 558px; display: block;"]').trigger("mousemove")
      .trigger("mousedown", { which: 1 })
      .trigger("mousemove", {
        clientX: 300,
        clientY: 30,
        screenX: 300,
        screenY: 30,
        pageX: 800,
        pageY: 130,
      })
      .trigger("mouseup", { force: true });

Answer 2

cy.get('canvas[style="width: 600px; height: 558px; display: block;"]').trigger("mousemove",{force:true)
      .trigger("mousedown", { which: 1,force:true })
      .trigger("mousemove", {
        clientX: 300,
        clientY: 30,
        screenX: 300,
        screenY: 30,
        pageX: 800,
        pageY: 130,
force:true
      })
      .trigger("mouseup", { force: true });

Answer 3

尝试在不使用任何插件的情况下进行拖放

 it("dragNdrop test case", () => { // 
     Cypress.on("uncaught:exception", () => false);
     cy.visit("/");
    
     const dataTransfer = new DataTransfer();
     /* Using DragStart method to drag and drop the elements in cypress
     there is no need to install any plugin using this DragStrat
     have to write extra lines of code */
    
     cy.get("hashtag#angular").trigger("dragstart", { dataTransfer }); // source of the drag element
     
     cy.get("hashtag#droparea") // destination to drop the drag element
     .trigger("drop", { dataTransfer })
     .trigger("dragend", { dataTransfer });
     });
    });