declare global { namespace Cypress { interface Chainable { getDropIndicator ( indicator , indicatorColors ? ) : Chainable < Element > ; dragAndDrop ( target , options ? ) : Chainable < Element > ; dragOver ( target , options ? ) : Chainable < Element > ; drop ( ) : Chainable < Element > ; } } } export interface DropOptions { position : 'right' | 'left' | 'right' | 'above' | 'below' | 'inside' ; } example Cypress . Commands . add ( 'getDropIndicator' , ( indicator , indicatorColors = { error : 'red' , success : 'rgb(98, 196, 98)' , } ) => { cy . wait ( 250 ) ; return cy . get ( 'div' ) . filter ( ( index , element ) => { return ( element . id === '' && element . classList . length === 0 && element . style . position === 'fixed' && element . style . zIndex === '99999' && element . style . backgroundColor === indicatorColors [ indicator ] ) ; } ) ; } ) ; class DummyDataTransfer { data = { } ; dropEffect = 'move' ; effectAllowed = 'all' ; files = [ ] ; items = [ ] ; types = [ ] ; clearData ( format ) { if ( format ) { delete this . data [ format ] ; const index = this . types . indexOf ( format ) ; delete this . types [ index ] ; delete this . data [ index ] ; } else { this . data = { } ; } } setData ( format , data ) { this . data [ format ] = data ; this . items . push ( data ) ; this . types . push ( format ) ; } getData ( format ) { if ( format in this . data ) { return this . data [ format ] ; } return '' ; } setDragImage ( img , xOffset , yOffset ) { } } export const getCoordinatesFromPos = ( dom , position ) => { const { left , top , width , height } = dom . getBoundingClientRect ( ) ; switch ( position ) { case 'right' : { return { x : left + width , y : top + height / 2 , } ; } case 'left' : { return { x : left , y : top + height / 2 , } ; } case 'above' : { return { x : left + width / 2 , y : top , } ; } case 'below' : { return { x : left + width / 2 , y : top + height , } ; } case 'inside' : { return { x : left + 10 , y : top + 10 , } ; } default : { return { x : 0 , y : 0 , } ; } } } ; example example example Cypress . Commands . add ( 'dragAndDrop' , { prevSubject : true , } , ( subject , target , opts = { position : 'right' } ) => { cy . get ( subject ) . dragOver ( target , opts ) ; cy . get ( subject ) . drop ( ) ; } ) ; example Cypress . Commands . add ( 'dragOver' , { prevSubject : true , } , ( subject , target , opts = { position : 'right' } ) => { const { position } = { ... opts , } ; cy . get ( target ) . as ( 'target' ) ; cy . get ( '@target' ) . then ( ( $target ) => { const dom = $target [ 0 ] ; const { x , y } = getCoordinatesFromPos ( dom , position ) ; const dataTransfer = new DummyDataTransfer ( ) ; cy . get ( '@target' ) . parent ( ) . as ( 'parent' ) ; cy . get ( subject ) . trigger ( 'mousedown' , { force : true } ) . trigger ( 'dragstart' , { force : true , dataTransfer , } ) ; if ( position === 'inside' ) { cy . get ( '@target' ) . trigger ( 'dragover' , { clientX : Math . floor ( x ) , clientY : Math . floor ( y ) , dataTransfer , force : true , } ) ; } else { cy . get ( '@parent' ) . trigger ( 'dragover' , { clientX : Math . floor ( x ) , clientY : Math . floor ( y ) , dataTransfer , force : true , } ) ; } } ) ; } ) ; example Cypress . Commands . add ( 'drop' , { prevSubject : true , } , ( subject ) => { cy . get ( subject ) . trigger ( 'dragend' , { force : true } ) ; } ) ;