Typescript types for dragAndDrop are incorrect

[reallymello]

Description of the bug/issue

When I try to use browser.element('#myElement').dragAndDrop({x: 0, y: 0}) in a TypeScript test I expect my IDE to not show syntax errors, but instead I'm told Object literal may only specify known properties, and 'x' does not exist in type 'DragAndDropDestination'

When I try to use an object destination instead of coordinates per the help examples on https://nightwatchjs.org/api/element/dragAndDrop.html#dragAndDrop I get

Argument of type 'WebElement' is not assignable to parameter of type 'DragAndDropDestination'. Type 'WebElement' is missing the following properties from type 'DragAndDropDestination': xOffset, yOffsetts(2345)

Steps to reproduce

In a TypeScript test try to use the dragAndDrop command with x and y properties for the passed in object.

'Drag and drop': () => {
    browser.url('https://letcode.in/draggable');

    browser.element('#sample-box').dragAndDrop({ x: 100, y: 100 });
  },

The user is informed Object literal may only specify known properties, and 'x' does not exist in type 'DragAndDropDestination'.ts(2353)

The TypeScript definitions seem to want you to use properties "xOffset" and "yOffset"

However, if you run with those you'll receive an error
Error Error while running .dragElement() protocol action: Invalid drag target; must specify a WebElement or {x, y} offset

If you ignore the IDE warnings and use the properties of x and y instead of xOffset and yOffset the test runs.

If you use a web element as a destination

    const destWebElement = await browser.element.find('.dest-section');
    browser.element.find('.section').dragAndDrop(destWebElement);

You get an error Argument of type 'WebElement' is not assignable to parameter of type 'DragAndDropDestination'. Type 'WebElement' is missing the following properties from type 'DragAndDropDestination': xOffset, yOffsetts(2345)

Sample test

import { NightwatchTests } from 'nightwatch';

const exampleTest: NightwatchTests = {
  'Drag and drop': () => {
    browser.url('https://letcode.in/draggable');

    browser.element('#sample-box').dragAndDrop({ x: 0, y: 0 });
  },
  'Drag and drop2': () => {
    browser.url('https://letcode.in/draggable');

    browser.element('#sample-box').dragAndDrop({ xOffset: 0, yOffset: 0 });
  },
  'Drag and drop3': async () => {
    browser.url('https://letcode.in/draggable');

    const destWebElement = await browser.element.find('.dest-section');
    browser.element.find('.section').dragAndDrop(destWebElement);
  },
  after: () => {
    browser.end();
  },
};

export default exampleTest;

Command to run

npx nightwatch

Verbose Output

No response

Nightwatch Configuration

No response

Nightwatch.js Version

3.9.0

Node Version

21.6.2

Browser

Chrome

Operating System

Windows 11

Additional Information

No response

[ShreySinha02]

@reallymello hii i tried adding types for x,y and webelement #4329 this is my pr please review this