dragAndDrop(draggedElementSelector, draggedOnElementSelector [,options])


This is a TDK feature

This is not supported in Testim's visual editor

Drags and drops on the given element onto another element on the page using HTML5 drag and drop events.

  • draggedElementSelector {string | TDKStepLocator} a CSS selector or smart locator for the element being dragged.
  • draggedOnElementSelector {string | TDKStepLocator} a CSS selector or smart locator for the element being dragged onto.
  • options {object} optional extra arguments for dragAndDrop. Currently none supported
  • returns: Promise which fulfills when the drag and drop has been executed.
// ✅ drags the active item to the item done list
await dragAndDrop('.item:active', '.done-item-list');
// ✅ drops the user picture on the gallery
await dragAndDrop('.user-picture', '.gallery');

// ❌needs to know where to drop the element
await dragAndDrop('.user-picture');
// ❌needs to know what to drop where
await dragAndDrop();

Full usage example:

'use strict';

const expect = require('chai').expect;
const { go, dragAndDrop, it, evaluate } = require('testim');

it("performs drag and drop correctly", async () => {
    await go('http://jsbin.testim.io/put/2');
    await dragAndDrop('#drag1', '#div1');

    const innerHtml = await evaluate(() => {
        return document.querySelector('#div1').innerHTML;