Cypress: Drag and drop with jquery ui sortable

[darkcattz]

• Operating System: Mac os
• Cypress Version: last version
• Browser Version: Chrome and Electron

Hello,

I'm trying to use Cypress to test a drag and drop sort (jquery ui sortable).
It seems not working here.
Is there an example? I tried this without success :

    cy.get(".grip").first().trigger('mouseover')
      .trigger('mousedown',  { which: 1 })
      .trigger('mousemove', {clientX: 600, clientY: 600})
      .trigger('mouseup', {force: true});

.grip is the handle. The parent (tr) is the draggable element.

Thanks

[chrisbreiding]

I experimented with this a bit and I think I've figured out what jQuery UI needs to simulate drag-n-drop. It requires pageX and pageY instead of the client* equivalents. It requires them for the mousedown as well as the mousemove and requires which: 1 for the mousemove. It should look like this:

cy.get(".grip").first()
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup');

You just need to make sure the pageX and pageY values actually line up with where your element is for mousedown and where you need it to be dropped for mousemove.

[jennifer-shehane]

I created a new issue in our docs to document drag and drop with jQuery UI Sortable here: https://github.com/cypress-io/cypress-documentation/issues/518. Our documentation is open source and contributions are welcome. 😄

[darkcattz]

Thanks a lot.
I will try this

[darkcattz]

Thank you again. It works great !

[sturichardson]

Hi

I have been spending a significant amount of time trying to get drag and drop testing working with angular-ui-sortable which uses jQueryUI Sortable. Unfortunately I can't quite get it to work.

So far my test looks something like this:

  cy.wait(1000).get('div.ui-sortable-handle').eq(0)
    .wait(300).trigger('mousedown', {which: 1, pageX: 100, pageY: 150})
    .wait(300).trigger('mousemove', {which: 1, pageX: 420, pageY: 150})
    .wait(300).trigger('mouseup', {force:true})

The problem I am having is that it successfully finds the item to drag.
It successfully moves the item to where it should be dropped.
It successfully does the mouseup but the item is never moved.
It is never moved because the placeholder where the item should be dropped never changes. Mousemove doesn't appear to affect or cause new placeholders to be drawn.
I have tried many other mouse events, options etc... to no avail.

Any ideas on what else to try?

[unlocomqx]

I used the code here but for jquery resizable.
Mouseover is necessary for my case

cy
.get(".ui-resizable-w")
.trigger("mouseover", {force: true})
.trigger("mousedown", {which: 1, pageX: 0, pageY: 0, force: true})
.trigger("mousemove", {which: 1, pageX: 100, pageY: 0, force: true})
.trigger("mouseup", {force: true});