Question

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

我想要模拟的是

＆＃34; .handler-max＆＃34;的触摸开始元件
用类＆＃34; .step-3＆＃34;
触及＆＃34; .handler-max＆＃34;元件

虽然我发现了如何触发touchStart和touchEnd事件。我对如何模拟拇指的移动一无所知

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

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

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本机异步/等待的中间。以前，我一直在使用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

正如已经提到的（但是有些过时），您还可以通过仅提供x，y坐标将滑块移动到任何方向：

browser.actions().dragAndDrop(sliderElement, {x: 10}).perform()

browser.actions().dragAndDrop(sliderElement, {x: -10}).perform()

browser.actions().dragAndDrop(modalElement, {x: 100, y:100}).perform()

Answer 7

['b', 'c']
['b', 'c', 'ab']
['b', 'c', 'ab', 'ac']
['b', 'c', 'ab', 'ac', 'aab']
['b', 'c', 'ab', 'ac', 'aab', 'aac']
['b', 'c', 'ab', 'ac', 'aab', 'aac', 'aaab']
['b', 'c', 'ab', 'ac', 'aab', 'aac', 'aaab', 'aaac']
['b', 'c', 'ab', 'ac', 'aab', 'aac', 'aaab', 'aaac', 'aaaab']
['b', 'c', 'ab', 'ac', 'aab', 'aac', 'aaab', 'aaac', 'aaaab', 'aaaac']

Answer 8

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

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

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

8 个答案: