Taiko: User should be able to drag and drop an element to another location on the screen

[sguptatw]

Expected behavior
User should be able to drag and drop an element to another location on the screen

Current behavior
There is no support for the action drag and drop

Version

commit - 51de58ab2c042b63be0e5d19a79450de0cd03acd

[dinesarun]

Waiting for this feature folks.. Its needy in my case, as many steps involves drag and drop in my use case.

[NivedhaSenthil]

some thoughts on api design:

case 1: Move source element into destination
await dragAndDrop(sourceSelector, into(destinationSelector))

case 2: Move source element into destination with relative to other element on the destination
await dragAndDrop(sourceSelector, into(destinationSelector), below(someOtherSelector))

case 3: Move source element into given direction by some pixel
await dragAndDrop(sourceSelector, {up:10, down:10, right: 10, left:10 })

[sguptatw]

Question

• Apart from the APIs proposed in https://github.com/getgauge/taiko/issues/104#issuecomment-440918776, should the API support dropping an element at an absolute position?

[zabil]

@dinesarun can you share a gif showing how you use drag and drop? Will help us think of a better API

[dinesarun]

Hi @zabil ,

Thanks in Advance.. Can you please shoot a hello mail to [email protected]? Let me mail you GIF showing how I use drag and drop in my application.

And kudos for giving good intro about Taiko at Thoughtworks 'GeekNight'. That reminded me to try out this :)

[NivedhaSenthil]

UPDATE: case 1 and case 3 are available in master 14cfdbc.
await dragAndDrop(sourceSelector, into(destinationSelector))
await dragAndDrop(sourceSelector, {top:10, bottom:10, right: 10, left:10 })
Currently drag and drop of HTML 5 draggable element does not work properly as the mouse simulation gets interrupted by OS controls. There is an open upstream issue for the same https://github.com/ChromeDevTools/devtools-protocol/issues/130

[dinesarun]

UPDATE: case 1 and case 3 are available in master 14cfdbc.
await dragAndDrop(sourceSelector, into(destinationSelector))
await dragAndDrop(sourceSelector, {top:10, bottom:10, right: 10, left:10 })
Currently drag and drop of HTML 5 draggable element does not work properly as the mouse simulation gets interrupted by OS controls. There is an open upstream issue for the same ChromeDevTools/devtools-protocol#130

Thanks @NivedhaSenthil . Available in master branch means, it will be available in latest NPM install? Am using Windows OS.

[NivedhaSenthil]

It is yet to be released. Still it can be installed via npm from github
npm install git+https://github.com/getgauge/taiko.git

[NivedhaSenthil]

case 2: Move source element into destination with relative to other element on the destination
await dragAndDrop(sourceSelector, into(destinationSelector), below(someOtherSelector))

Above case won't be supported as it can be achieved by giving proximity selector for destination or by moving into position.

Issue related to HTML5 draggable elements is tracked in https://github.com/getgauge/taiko/issues/279

[sguptatw]

Suggestion
The API can be await dragAndDrop(sourceSelector, {up:10, down:10, right: 10, left:10 }) instead of await dragAndDrop(sourceSelector, {top:10, bottom:10, right: 10, left:10 })
since the destination co-ordinates are relative to the source.

[sguptatw]

Discussion update

Drag and drop performs the action and need not return anything.
The test has to assert if the element is at the expected location.

[NivedhaSenthil]

Updated api to accept up and down
await dragAndDrop(sourceSelector, {up:10, down:10, right: 10, left:10 })
d52fcec

[sguptatw]

Currently the element location can be found using evaluate(<element>, (element) => element.offsetLeft) and evaluate(<element>, (element) => element.offsetTop)