Drag Element

There are two ways to drag a page element.

The t.drag or t.dragToElement actions will not invoke integrated browser actions such as selecting text. Use them to perform drag-and-drop actions that are processed by webpage elements, not the browser. To select text, use t.selectText.

Drag an Element by an Offset

t.drag( selector, dragOffsetX, dragOffsetY [, options] )
Parameter Type Description
selector Function | String | Selector | Snapshot | Promise Identifies the webpage element being dragged. See Selecting Target Elements.
dragOffsetX Number An X-offset of the drop coordinates from the mouse pointer's initial position.
dragOffsetY Number An Y-offset of the drop coordinates from the mouse pointer's initial position.
options (optional) Object A set of options that provide additional parameters for the action. See Mouse Action Options.

The following example demonstrates how to use the t.drag action with a slider.

import { Selector } from 'testcafe';

const slider = Selector('#developer-rating');

fixture `My fixture`
    .page `http://www.example.com/`;

test('Drag slider', async t => {
    await t
        .click('#i-tried-testcafe');
        .expect(slider.value).eql(1)
        .drag('.ui-slider-handle', 360, 0, { offsetX: 10, offsetY: 10 })
        .expect(slider.value).eql(7);
});

Drag an Element onto Another One

t.dragToElement( selector, destinationSelector [, options] )
Parameter Type Description
selector Function | String | Selector | Snapshot | Promise Identifies the webpage element being dragged. See Selecting Target Elements.
destinationSelector Function | String | Selector | Snapshot | Promise Identifies the webpage element that serves as the drop location. See Selecting Target Elements.
options (optional) Object A set of options that provide additional parameters for the action. See DragToElement Action Options.

This sample shows how to drop an element into a specific area using the t.dragToElement action.

import { ClientFunction } from 'testcafe';

fixture `My fixture`
    .page `http://www.example.com/`;

const designSurfaceItems = Selector('.design-surface').find('.items');

test('Drag an item from the toolbox', async t => {
    await t
        .dragToElement('.toolbox-item.text-input', '.design-surface')
        .expect(designSurfaceItems.count).gt(0);
});