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;
    });

    
    expect(innerHtml).to.contain('img');
    expect(innerHtml).to.contain('id="drag1"');
    expect(innerHtml).to.contain('src="https://www.testim.io/images/social/logo_1200x1200.jpg"');

});

🚧This is a TDK feature

Full usage example:

🚧
This is a TDK feature