0

Unable to perform drag and drop in Cypress. Here is the piece of code:

 it('verify user is able drag and drop a new widget from the widget list',()=>{
            cy.get('.ant-input').first().type(NAMES.widgetName).  //Search for a particular item
            cy.xpath('//div[@class="item-container"]//span[@class="column-drag-handle"]')
                  .trigger('dragstart', { dataTransfer });
            cy.get('div.items-sec:nth-child(3) > div.smooth-dnd-container.vertical')
                  .trigger('drop', { dataTransfer });
            cy.xpath('//div[@class="item-container"]//span[@class="column-drag-handle"]')
                  .trigger('dragend');               // <-- seleniumeasy listens for this...     
            cy.get('[title="CROUTON_WIDGET"]').should('have.length',2)
 })
ebanster
  • 886
  • 1
  • 12
  • 29
Sheena
  • 1
  • 1
  • I have edited the above as it was un-readable with the code not being in a code format. Also, could you provide the error message which would be ideal in determining the root cause. Have you seen this: https://github.com/cypress-io/cypress-example-recipes/issues/173 and this: https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test – ebanster Apr 14 '20 at 12:03

2 Answers2

0

https://www.npmjs.com/package/@4tw/cypress-drag-drop

There is a separate npm library that adds this support to Cypress that you will need to install.

mvoase
  • 544
  • 1
  • 6
  • 20
0

Hit this command -

npm install --save-dev @4tw/cypress-drag-drop

Paste this into command.js file -

require('@4tw/cypress-drag-drop')

Try this script

cy.get('.sourceitem').drag('.targetitem');

Sudheer Singh
  • 555
  • 5
  • 10