如何在量角器中模拟拖放动作？

Question

我有一个双滑块，我想测试它是否可操作并返回正确的数据。滑块有一个min和max处理程序，它还有一些“我可以挂钩的断点”。

我想要模拟的是

• 一个“.handler-max”元素的touchStart
• 用类“.step-3”将拇指移动到元素上
• 触摸“.handler-max”元素的结尾

而我发现了如何触发touchStart和touchEnd事件。我对如何模拟拇指的移动毫无头绪

browser.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', filterHandler);
// <--- move event????
browser.executeScript('angular.element(arguments[0]).triggerHandler("touchend");', filterHandler);

附：这个问题的范围是一个集成测试，它测试当用户与双滑块指令进行交互时应用程序发生了什么是理想的结果。

Answer 1

elem =你要移动的元素;

target =要放弃elem的元素;

对于WebdriverJS： -

browser.driver.actions().dragAndDrop(elem,target).mouseUp().perform();

对于量角器： -

browser.actions().dragAndDrop(elem,target).mouseUp().perform();

Answer 2

现在这很简单：

browser.actions().dragAndDrop(elem, target).perform();

---

其中dragAndDrop behind the scenes是mouseDown + mouseMove + mouseUp：

/**
 * Convenience function for performing a "drag and drop" manuever. The target
 * element may be moved to the location of another element, or by an offset (in
 * pixels).
 * @param {!webdriver.WebElement} element The element to drag.
 * @param {(!webdriver.WebElement|{x: number, y: number})} location The
 *     location to drag to, either as another WebElement or an offset in pixels.
 * @return {!webdriver.ActionSequence} A self reference.
 */
webdriver.ActionSequence.prototype.dragAndDrop = function(element, location) {
  return this.mouseDown(element).mouseMove(location).mouseUp();
};

Answer 3

好好玩，我发现我有更好的方法。可能我以前看过的消息来源已经过时了。以下脚本将非常干净和简单...

it( 'step : 6 : select star rating min === 1 and max === 2' , function (done) {

    driver.actions()
        .mouseDown(element(by.css('.filter-editorial-rating .ngrs-handle-max')))
        .mouseMove(element(by.css('.filter-editorial-rating .step-2')))
        .mouseUp()
        .perform();


element( by.css( '.results-indicator' ) ).getText()
    .then( function ( text ) {
        resultsB = parseInt (text.split(" ")[0]);
        expect( resultsB ).toBeLessThan( resultsA );                            
        done();
    });
});

你可以得到这样的司机......

browser.get(url);
var driver = browser.driver;

干杯

Answer 4

        var plot0 = ptor.element(protractor.By.id(''));

        ptor.driver.actions()

        .dragAndDrop(plot0, {x: 200, y: 100})

        .mouseMove(plot0, {x: 200, y: 100}) // 200px from left, 200 px from top of plot0

        .mouseDown()

        .mouseMove({x: 600, y: 0}) // 600px to the right of current location

        .perform();

这适用于我们。我的方案是拖动一个没有目标元素的弹出对话框。

Answer 5

我正在将自动化项目从使用SELENIUM_PROMISE_MANAGER转换为使用JS本机async / await。以前，我一直在使用user3800138 ^描述的方式，但它不再适用于我以及此处描述的所有其他方法。对我有用的是通过像这样的then方法链接每一个动作

dragAndDrop: ( $element, $destination ) =>
    browser
        .actions()
        .mouseMove( $element )
        .perform()
        .then( () => browser
            .actions()
            .mouseDown( $element )
            .perform() )
        .then( () => browser
            .actions()
            .mouseMove( $destination )
            .perform() )
        .then( () => browser
            .actions()
            .mouseUp()
            .perform())

然后称它为await dragAndDrop($leftSlider, $lastDateTitle);

或者同样使用await将会是这样的

dragAndDrop: async( $element, $destination ) => {
    await browser.actions().mouseMove( $element ).perform();
    await browser.actions().mouseDown( $element ).perform();
    await browser.actions().mouseMove( $destination ).perform();
    await browser.actions().mouseUp().perform();
}

我知道它有点笨重，但我找不到更好的选择

Answer 6

对于像这样的问题，我从UI中隔离了业务代码（实际上对拖放事件做了一些有用的事情）。这样，我可以确保拖动启动代码将正确填充数据结构，我可以确保丢弃处理代码将做正确的事情，而不必实际发送真正的拖放事件。

这样，真正的事件处理代码只有1-2行，所以它在那里打破的可能性非常非常小。此外，没有理由测试浏览器或操作系统的拖放代码;这段代码应该有效。