@luminati-io/webdriverio8
Version:
Next-gen browser and mobile automation test framework for Node.js
90 lines (88 loc) • 6.12 kB
JavaScript
import { ELEMENT_KEY } from '../../constants.js';
import { getBrowserObject } from '../../utils/index.js';
const ACTION_BUTTON = 0;
const sleep = (time = 0) => new Promise((resolve) => setTimeout(resolve, time));
/**
*
* Drag an item to a destination element or position.
*
* :::info
*
* The functionality of this command highly depends on the way drag and drop is
* implemented in your app. If you experience issues please post your example
* in [#4134](https://github.com/webdriverio/webdriverio/issues/4134).
*
* :::
*
* <example>
:example.test.js
it('should demonstrate the dragAndDrop command', async () => {
const elem = await $('#someElem')
const target = await $('#someTarget')
// drag and drop to other element
await elem.dragAndDrop(target)
// drag and drop relative from current position
await elem.dragAndDrop({ x: 100, y: 200 })
})
* </example>
*
* @alias element.dragAndDrop
* @param {Element|DragAndDropCoordinate} target destination element or object with x and y properties
* @param {DragAndDropOptions=} options dragAndDrop command options
* @param {Number=} options.duration how long the drag should take place
*/
export async function dragAndDrop(target, { duration = 10 } = {}) {
const moveToCoordinates = target;
const moveToElement = target;
/**
* fail if
*/
if (
/**
* no target was specified
*/
!target ||
(
/**
* target is not from type element
*/
target.constructor.name !== 'Element' &&
/**
* and is also not an object with x and y number parameters
*/
(typeof moveToCoordinates.x !== 'number' ||
typeof moveToCoordinates.y !== 'number'))) {
throw new Error('command dragAndDrop requires an WebdriverIO Element or and object with "x" and "y" variables as first parameter');
}
/**
* allow to specify an element or an x/y vector
*/
const isMovingToElement = target.constructor.name === 'Element';
if (!this.isW3C) {
await this.moveTo();
await this.buttonDown(ACTION_BUTTON);
isMovingToElement
? await moveToElement.moveTo()
: await this.moveToElement(null, moveToCoordinates.x, moveToCoordinates.y);
await sleep(duration);
return this.buttonUp(ACTION_BUTTON);
}
const sourceRef = { [ELEMENT_KEY]: this[ELEMENT_KEY] };
const targetRef = { [ELEMENT_KEY]: moveToElement[ELEMENT_KEY] };
const origin = sourceRef;
const targetOrigin = isMovingToElement ? targetRef : 'pointer';
const targetX = isMovingToElement ? 0 : moveToCoordinates.x;
const targetY = isMovingToElement ? 0 : moveToCoordinates.y;
/**
* W3C way of handle the drag and drop action
*/
const browser = getBrowserObject(this);
return browser.action('pointer')
.move({ duration: 0, origin, x: 0, y: 0 })
.down({ button: ACTION_BUTTON })
.pause(10)
.move({ duration, origin: targetOrigin, x: targetX, y: targetY })
.up({ button: ACTION_BUTTON })
.perform();
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ0FuZERyb3AuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tbWFuZHMvZWxlbWVudC9kcmFnQW5kRHJvcC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFDaEQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFHdkQsTUFBTSxhQUFhLEdBQUcsQ0FBVSxDQUFBO0FBRWhDLE1BQU0sS0FBSyxHQUFHLENBQUMsSUFBSSxHQUFHLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBQTtBQVcvRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBOEJHO0FBQ0gsTUFBTSxDQUFDLEtBQUssVUFBVSxXQUFXLENBRTdCLE1BQWdELEVBQ2hELEVBQUUsUUFBUSxHQUFHLEVBQUUsS0FBeUIsRUFBRTtJQUUxQyxNQUFNLGlCQUFpQixHQUFHLE1BQTRCLENBQUE7SUFDdEQsTUFBTSxhQUFhLEdBQUcsTUFBNkIsQ0FBQTtJQUVuRDs7T0FFRztJQUNIO0lBQ0k7O09BRUc7SUFDSCxDQUFDLE1BQU07UUFDUDtRQUNJOztXQUVHO1FBQ0gsTUFBTSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEtBQUssU0FBUztZQUNyQzs7ZUFFRztZQUNILENBQ0ksT0FBTyxpQkFBaUIsQ0FBQyxDQUFDLEtBQUssUUFBUTtnQkFDdkMsT0FBTyxpQkFBaUIsQ0FBQyxDQUFDLEtBQUssUUFBUSxDQUMxQyxDQUNKLEVBQ0gsQ0FBQztRQUNDLE1BQU0sSUFBSSxLQUFLLENBQUMsaUhBQWlILENBQUMsQ0FBQTtJQUN0SSxDQUFDO0lBRUQ7O09BRUc7SUFDSCxNQUFNLGlCQUFpQixHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsSUFBSSxLQUFLLFNBQVMsQ0FBQTtJQUUvRCxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2QsTUFBTSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUE7UUFDbkIsTUFBTSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFBO1FBRXBDLGlCQUFpQjtZQUNiLENBQUMsQ0FBQyxNQUFNLGFBQWEsQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxDQUFDLE1BQU0sSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsaUJBQWlCLENBQUMsQ0FBQyxFQUFFLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxDQUFBO1FBRTlFLE1BQU0sS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFBO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUN2QyxDQUFDO0lBRUQsTUFBTSxTQUFTLEdBQXFCLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQTtJQUN4RSxNQUFNLFNBQVMsR0FBcUIsRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLGFBQWEsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFBO0lBRWpGLE1BQU0sTUFBTSxHQUFHLFNBQVMsQ0FBQTtJQUN4QixNQUFNLFlBQVksR0FBRyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUE7SUFFOUQsTUFBTSxPQUFPLEdBQUcsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFBO0lBQzNELE1BQU0sT0FBTyxHQUFHLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQTtJQUUzRDs7T0FFRztJQUNILE1BQU0sT0FBTyxHQUFHLGdCQUFnQixDQUFDLElBQUksQ0FBQyxDQUFBO0lBQ3RDLE9BQU8sT0FBTyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUM7U0FDM0IsSUFBSSxDQUFDLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUM7U0FDekMsSUFBSSxDQUFDLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxDQUFDO1NBQy9CLEtBQUssQ0FBQyxFQUFFLENBQUM7U0FDVCxJQUFJLENBQUMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQztTQUNoRSxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLENBQUM7U0FDN0IsT0FBTyxFQUFFLENBQUE7QUFDbEIsQ0FBQyJ9