1

So I have a scenario where I want to capture a popup element message whenever I drag one element to another element.

public async dragTransitiontToSegment(item: number, transitionName: string) {
    const _tailSegment = Selector('.rolling').nth(item);
    const _transitionPanel = Selector('.effects-selector.editor-panel .item-container')
    const _transitionType = _transitionPanel.withText(transitionName);
    await t.click(_transitionPanel);
    await t.dragToElement(_transitionType,_tailSegment,{speed:0.01});
}

Right now I've change the speed for the drag but it was still to fast to capture the message I want, because the dragToElement fucntion will drop it. Is there a way to just drag and hold it ?

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Jason Aw
  • 11
  • 2

1 Answers1

3

at present, TestCafe doesn't allow you to drag without drop out of the box. You can simulate the sequence of events (the mousedown, mousemove, or HTML5 drag events)

import { Selector, ClientFunction } from 'testcafe';
function triggerMouseEvent (selector, type, options) {
    const dispatchFunc = ClientFunction((type, options = {}) => {
        options.bubbles    = true;
        options.cancelable = true;
        options.view       = window;
        const event         = new MouseEvent(type, options);
        const targetElement = elementSelector();
        targetElement.dispatchEvent(event);
    }, { dependencies: { elementSelector: selector } });
    return dispatchFunc(type, options);
}
fixture`Fixture`
    .page`http://devexpress.github.io/testcafe/example`;
test('Test', async t => {
    await t.click('#tried-test-cafe');
    const slider = Selector('span.ui-slider-handle.ui-corner-all');
    await triggerMouseEvent(slider, 'mousedown');
    await t.wait(1000);
    const offsetLeft = await Selector('.slider-value').withText('5').offsetLeft;
    await triggerMouseEvent(slider, 'mousemove', { clientX: offsetLeft });
    await t.wait(1000);
    await t
        .expect(slider.offsetLeft).gte(352)
        .expect(slider.offsetLeft).lte(353);
});

Also, TestCafe 1.15 will include the t.dispatchEvent method that allows you to trigger events using TestController.

Pavel Avsenin
  • 254
  • 1
  • 2
  • Thanks. Really appreciate your help here. But is there a way to drag it to another element? Not by offset. – Jason Aw Jul 09 '21 at 13:39
  • The example by @pavel-avsenin does that. It drags the slider handle to the following element: `Selector('.slider-value').withText('5')` The `offsetLeft` property is used in this example to determine the element's position and pass it to event arguments. You can also use the [boundingClientRect](https://testcafe.io/documentation/402670/reference/test-api/domnodestate#members-specific-to-element-nodes) property to obtain the element's dimensions and calculate a point to drag to (e.g., the center of the element). – vasily.strelyaev Jul 12 '21 at 10:47