CODEWITHSUNDEEP
javascriptautomated-testscypressbrowser-automation
Karan
Karan

Reputation: 499

why is drag drop not working as per expectation in cypress.io?

I am trying to automate a simple drag and drop scenario on a website .

https://gojs.net/latest/samples/htmldragdrop.html

I am going as per the method provided in cypress doc

https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__drag-drop/cypress/integration/drag_n_drop_spec.js

my sample testcases is :

 cy.visit("https://gojs.net/latest/samples/htmldragdrop.html")
      cy.get('#paletteZone .draggable').first().trigger('mousedown', { which: 1 })
      .trigger('mousemove', { clientX: 500, clientY: 500 }) 
      .trigger('mouseup', { force: true })

After running the same :

cypress focussing on trigger mousedown the element i want to drag but on the step of mousemove -- nothing is happening when i check the same using "before" and "after" state . have tried differnet drop location just to ensure it was not related to x,y coordinate issue but in vain . please help

enter image description here

enter image description here

EDIT 1 : Able to drag-drop the same using a plugin available on cypress website itself i.e. '@4tw/cypress-drag-drop' . That worked like charm on the same website

  cy.get('#paletteZone .draggable').first().drag('canvas','center')

but when i tried the same on different website (used it for testing purpose only , i am not owning the same ) , there is a prob with that plugin too. https://www.seleniumeasy.com/test/drag-and-drop-demo.html

  cy.visit("https://www.seleniumeasy.com/test/drag-and-drop-demo.html")
        //cy.viewport(1600, 800)
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')
        cy.get('#todrag span').first().drag('#mydropzone','center')

On actual Website , draggable items on left side are removed and are placed on right Side , but after running my code - althought items are getting added on right side but they are not getting removed from left div . Is there anything we need to add here ( IN my Screenshot - Draggagble 1 should not be present after code run )

enter image description here

Upvotes: 7

Views: 3887

Answers (1)

madhuri varada
madhuri varada

Reputation: 93

const dataTransfer = new DataTransfer();
    cy.get('dragNodeSelector').trigger("dragstart", {
      dataTransfer,
    });
    cy.get('dropcontainer').trigger("drop", { dataTransfer });

This code is valid for me. I think it is useful for you. You can try this.

Upvotes: 1

Related Questions