cy.get(...).move(...) not working

[korkorran]

Hi,

I tried the new child command move.

Nevertheless, this command is not effective.

Have you a hint on why the command is not working ?

source code :

describe("Separator Test", function(){
    it("should pass", function(){
        cy.visit('http://localhost:8080');
        cy.get('div.separator').as('separator');
        cy.get('@separator').move({ x: 100, y: 100 }, {force:true})
    })
})

My goal is to move the vertical separator between the two panes 100px to the right.

[vlio20]

duplicate of #36

[korkorran]

duplicate of #36

No.
I set up the package from "github:4teamwork/cypress-drag-drop"
but neither drag and move are not working.
It's not really comprehensive for me, as I can move it straightforward by hand.

Source code for drag :

describe("Separator Test", function(){
    it("should pass", function(){
        cy.visit('http://localhost:8080');
        cy.get('div.separator').as('separator');
        cy.get('@separator').drag('div.right', {force:true})
    })
})

My page is serapated in 3 divs : div.left, div.separator & div.right.
My objective is to take the div.separator and to drag it to the right.
It's really OK when I do it by hand with a mouse, but I can't do it with either commands

[korkorran]

May I share you the source code of the tested components.
I assure you, neither drag and move commands works.

https://codesandbox.io/s/window-splitter-qrlwx

[jasurabdullin]

I have the same issue and I have set up the package from "github:4teamwork/cypress-drag-drop" as well. Is there any update on this?

[cckrause]

This plugin is kind of useless. Maybe there was a major API change or something but as mentioned before nothing is working as expected. I stepped through some calls and it seems like the internal API is broken.

  drag(sourceWrapper, targetSelector, options) {
    this.init(sourceWrapper, targetSelector, options)
      .then(() => this.dragstart())
      .then(() => this.dragover())
      .then(() => this.drop())
      .then(() => true)
  },

The internal function declarations:

dragstart({ clientX, clientY } = {})
dragover({ clientX, clientY } = {})
drop({ clientX, clientY } = {})

All internal functions dragstart and dragover and drop dragstart got optional parameters { clientX, clientY } = {}. As you can see in the drag call there is no clientX or clientY applied to that functions. After a while digging into the code i can't figure out how this is supposed to work. So i moved on and wrote my own helper...

[Uninen]

I'm experiencing the same problem but also can't figure out a way to get dragging working even manually. If anyone has a manual workaround or any examples of working solutions with or without this plugin, I'd appreciate any help 👍

[lucidity-joe]

Both move and drag are doing nothing for me. Elements are just staying put.

[cedro9]

The code below worked for me. Drag and drop with iframe:

const dataTransfer = new DataTransfer;
cy.get('element-drag')
.trigger('dragstart', { dataTransfer })
cy.iframe('element-iframe')
.trigger('drop', { dataTransfer, force: true });

I also used: https://www.npmjs.com/package/cypress-iframe

[NPC]

Are you guys seeing index.js:107 Exceeded maximum tries of: 5, aborting in the console when this happens? .drag worked fine for me before updating to Cypress v8.0.0, but now stopped, even after updating the plugin to v1.8.0.

[orrybaram]

@NPC yes Im getting the exact same thing

[sergei-shneider]

don't know if this solves anything for anyone but it should be move({ x: 100, y: 100, force: true})

[mattcph]

don't know if this solves anything for anyone but it should be move({ x: 100, y: 100, force: true})

Yes, this indeed helped. Needed the force: true part to skip over the 'hidden' error reported. thank you.

[IlCallo]

All internal functions dragstart and dragover and drop dragstart got optional parameters { clientX, clientY } = {}. As you can see in the drag call there is no clientX or clientY applied to that functions.

@cckrause
clientX and clientY from params are apparently only used when using .move command, that's why nothing is provided when using .drag