Support interaction to Drag and Drop

[Jidarofa]

Hi,

I need to do drag and drop in my UI project, I'm using serenity Js 2.x and reading the documentation this interaction doesn't exist yet.

If is possible add this interaction to serenity JS would fantastic.

Drag and drop webdriver.io (https://webdriver.io/docs/api/element/dragAndDrop/)

[jan-molak]

Example implementation (Serenity/JS 2.x):

import { actorCalled, Answerable, Interaction } from '@serenity-js/core';
import { Target } from '@serenity-js/webdriverio';
import { Element } from 'webdriverio';

const DragAndDrop = (source: Answerable<Element<'async'>>, destination: Answerable<Element<'async'>>) =>
  Interaction.where(`#actor drags ${ source } onto ${ destination }`,  async actor => {
    const sourceElement = await actor.answer(source);
    const destinationElement = await actor.answer(destination);

    await sourceElement.dragAndDrop(destinationElement)
  })
  
actorCalled('Jimmy').attemptsTo(
    DragAndDrop(Target.the('source').located(by....), Target.the('destination').located(by...))
)

[Jidarofa]

Hello again :( @jan-molak sorry me I'm trying to do that but appear this:

Do you have any idea.. sorry me!

[jan-molak]

No worries, your editor seems to have picked up the wrong implementation of Element; we need the one from webdriverio. I've updated the imports.

[Jidarofa]

Hello @jan-molak Thanks, the implementation work correctly, add evidence

https://user-images.githubusercontent.com/25329752/153018333-865a086f-7f5c-4dde-a42e-6f66f887749a.mov

[jan-molak]

Fab, thanks for confirming!

Note to contributors: When implementing this interaction, we could use the demo site from the above video as a test

[jan-molak]

Folding into 2132