Extend dragAndDrop command to allow offset values

Is your feature request related to a problem? Please describe. Currently, dragAndDrop command allows only to move one element to another

$(selector).dragAndDrop(target, duration)

There is no way to move a single element to a certain offset

Describe the solution you’d like

Create a new command dragTo, which performs the same actions, but allows to specify offset, instead of a target selector

$(selector).dragTo(xoffset, yoffset, duration)

Describe alternatives you’ve considered Currently I can implement this myself, using performActions command, but this is not cross-browser and I had to maintain w3c/jsonwp implementations, which is cumbersome.

Having this in the webdriverio library might be useful for somebody.

Additional context I am testing a slider component, which requires dragging interactions, but there is no target element, the slider itself is being dragged. The proposed command could resolve my use-case

[just-boris]

Here is our custom implementation

const ACTION_BUTTON = 0;
const dragDuration = 100;

async function dragAndDrop(browser, sourceSelector, targetX = 0, targetY = 0) {
        if (!browser.isW3C) {
            const element = await browser.$(sourceSelector);
            await element.moveTo();
            await browser.buttonDown(ACTION_BUTTON);
            await element.moveTo(targetX, targetY);
            await browser.buttonUp(ACTION_BUTTON);
            return;
        }
        const center = await getElementCenter(browser, sourceSelector);
        // W3C way of handle the drag and drop action
        await browser.performActions([
            {
                type: 'pointer',
                id: 'mouse',
                parameters: { pointerType: 'mouse' },
                actions: [
                    { type: 'pointerMove', duration: 0, x: center.x, y: center.y },
                    { type: 'pointerDown', button: ACTION_BUTTON },
                    { type: 'pointerMove', duration: dragDuration, origin: 'pointer', x: targetX, y: targetY },
                    { type: 'pointerUp', button: ACTION_BUTTON }
                ]
            }
        ]);
        // make sure all controls are properly released to avoid conflicts with further actions
        await browser.releaseActions();
    }

[christian-bromann]

Fixed in #5282