testing - 如何在Testcafe中只拖放而不拖放

Question

所以我有一个场景，每当我将一个元素拖到另一个元素时，我想捕获一个弹出元素消息。

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

现在我已经改变了拖动的速度，但捕捉我想要的消息仍然太快，因为 dragToElement 函数会丢弃它。有没有办法只拖住它？

Answer 1

目前，TestCafe 不允许您开箱即用地拖动。您可以模拟事件序列（mousedown、mousemove 或 HTML5 拖动事件）

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

此外，TestCafe 1.15 将包含t.dispatchEvent方法，该方法允许您使用 TestController 触发事件。