cy.drag() & cy.mouse proposal

As mention in the #845 it would be interesting to have a broader API for drag’n drop and mouse movement.

Desired behavior

It’s very hard to reproduce drag’n drop using native browser events. It’s much simpler to simulate how the mouse would behave. Here is a drag’n drop assertion done on nightwatch.js

    let elementToMove = '//div[@class="column"][2]'
    browser
      .url('http://grafikart.github.io/ReorderJS/index.html')
      .useXpath()
      .waitForElementVisible(elementToMove, 1000)
      .moveToElement(elementToMove, 10, 10)
      .mouseButtonDown(0)
      .moveToElement('//div[@class="column"][1]', 10, 10)
      .mouseButtonUp(0)

The API behaves at a lower level where we can control how the mouse behave. It would be nice to have something to describe generic behaviours.

cy.drag(selector: string, position: topLeft|center|topRight...., x: number, y: number)
cy.drag(selector: string, x: number, y: number)
// Maybe
cy.drag(fromSelector: string, toSelector: string) 

// Or a low level api to control the mouse
cy.mouse.moveTo(selector: string)
cy.mouse.press(button = 0)
cy.mouse.moveTo(selector: string)
cy.mouse.release()

[nwshane]

@jennifer-shehane I’m curious about contributing to this issue, if my company gives me the time to do so. Would you be open to that? Do you have an idea of approximately how long this would take to implement?

[smart625]

@asherccohen Checkout the cypress-drag-drop plugin -> https://github.com/4teamwork/cypress-drag-drop

@bierik This plugin does not work.