CODEWITHSUNDEEP
javascriptcanvasautomationcypressandroid-canvas
Barış Can Ateş
Barış Can Ateş

Reputation: 324

Cypress - canvas element drag n drop

I need to drag n drop over on a canvas element, I tried some code examples but unfortunately, they didn't help my need.

(import '@4tw/cypress-drag-drop') I added drag n drop plugin too and with using that plugin did not solve the problem.

Is anyone know how to do that?

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 })
})

I need to mouse move, click, and mouse move somewhere else instead of center direction.

enter image description here

if the operation success as you can see here the picture is moving directionally

enter image description here

as you can see that element is a canvas element.
enter image description here

Upvotes: 2

Views: 2004

Answers (3)

madhuri varada
madhuri varada

Reputation: 101

Try this for the drag and drop without using any plugin

 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 });
     });
    });

Upvotes: 0

madhuri varada
madhuri varada

Reputation: 101

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 });

Upvotes: -1

madhuri varada
madhuri varada

Reputation: 101

You can try this. It will works.

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 });

Upvotes: 1

Related Questions