https://cypress.io logo
#general-chat
Title
# general-chat
m

melodic-apple-72412

12/13/2021, 11:33 AM
Hello Team, I am trying to drag an element's bottom right corner which is not working for me. I have even used
@4tw/cypress-drag-drop
.move method, unfortunately no success. I have created a simple project with my application. If someone could help me, will be great. https://github.com/mekalag/cypressProj.git
w

wonderful-match-15836

12/20/2021, 1:35 AM
After playing around a little bit, it seems like a lot is going on in the DOM when clicking/dragging is taking place. During resize, the resize handle element is swapped out in the DOM with another element, and brought back when the resize ends. I haven't worked with this library before, and at a glance I don't see where the
mousemove
event listener actually is... it's not on the original resize-handle. So it's not too surprising that the test code (which looks fine) doesn't do anything in this instance. So I don't have a solution for you at the moment except to point you in the direction of figuring out how that feature is implemented. Between the resize functionality itself and the list parent + grid snapping, there sure is plenty happening at once, and it seems like it's not the typical drag and drop implementation we might see other places.
m

melodic-apple-72412

12/20/2021, 9:21 AM
Hi Mark, thanks a lot for taking a look into my concern. I also thought that it's something to do with the way how the drag is implemented in my application. Meanwhile, I was trying the same in testcafe framework. With a simple .drag command it works great. So this was the testcafe 2 line code to drag the same element which I tried in cypress.
Copy code
await  t
            .hover(dragEle)
            .drag(dragEle, 200, 200);
So now, I wonder if it's my application the way it's implemented or cypress not being able to drag. I expected atleast
@4tw/cypress-drag-drop
plugin will have some methods to get around with this easily. But no success.
w

wonderful-match-15836

12/21/2021, 10:36 PM
Hmm I’ll be curious to dig into this some more. There’s plenty of drag stuff that works fine in cypress with the kind of test you wrote.
m

melodic-apple-72412

12/22/2021, 2:09 PM
great thank you so much !
as far I know, I tried my best to make the drag happen, so it dint work. Would be glad if you can take a dig at this
w

wonderful-match-15836

12/31/2021, 12:28 AM
Lol, after a week's break from any code at all I decided to loop back and the next thing I tried worked right away. The implementation being tested seems to need more than one
mousemove
event. So this, for example, works for me:
Copy code
cy.get('.asset-alarms > .resize-handle')
            .trigger('mousedown', { eventConstructor: 'MouseEvent', })
            .trigger('mousemove', {
                clientX: 0,
                clientY: 0,
                eventConstructor: 'MouseEvent',
            })
            .trigger('mousemove', {
                clientX: 600,
                clientY: 600,
                eventConstructor: 'MouseEvent',
                force: true
            })
            .trigger('mouseup', {force: true})
Hopefully this unblocks you for the moment. I set the first
clientX
and
clientY
to
0
, just cause I'm speculating that the first event is used by the library to enter the 'resizing' state, and the position doesn't matter. Only the position for subsequent
mousemove
events appears to be used. This also explains why we need to
force: true
the later events - in the resizing state, the handle has been hidden. It gives me a few ideas going forward about maybe suggesting an update to the
move
command from
cypress-drag-drop
, to fire more than one set of
pointermove
and
mousemove
events during a move. Which would get it working for this case and presumably other similar drag situations.
m

melodic-apple-72412

01/03/2022, 1:41 PM
Hey Mark, thats a great finding. I am so glad that you spend time for my concern. Thank you very much 😇 It works perfectly fine now
3 Views