web-dev-qa-db-ja.com

分度器でドラッグアンドドロップアクションをシミュレートする方法は？

私はダブルスライダーを持っています、そしてそれが操作可能であり、正しいデータを返すことをテストしたいと思います。スライダーには最小ハンドラーと最大ハンドラーがあり、「フックできるブレークポイント」もいくつかあります。

シミュレートしたいのは

  • 「.handler-max」要素のtouchStart
  • クラス「.step-3」の要素上での親指の動き
  • 「.handler-max」要素のtouchEnd

touchStartイベントとtouchEndイベントをトリガーする方法を見つけました。親指の動きをシミュレートする方法がわかりません

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

P.S.この質問の範囲は、ユーザーがダブルスライダーディレクティブを操作したときにアプリケーションに何が起こるかをテストする統合テストです。

angularjstestingprotractorangularjs-e2e
9
Alexandros Spyropoulos

elem =移動したい要素;

target = elemをドロップする要素。

WebdriverJSの場合：-

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

分度器の場合：-

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

これは最近では非常に簡単です。

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

ここで dragAndDrop舞台裏 は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();
};
9
alecxe

遊んでみると、もっと良い方法があることがわかりました。おそらく私が以前探していた情報源は時代遅れでした。次のスクリプトは、非常にクリーンで簡単なトリックを実行します...

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;

乾杯

4
Alexandros Spyropoulos
        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();

これは私たちのために働きます。私のシナリオは、ターゲット要素を持たないポップアップダイアログボックスをドラッグすることです。

1
randomguy

自動化プロジェクトを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();
}
_

少しかさばるのは知っていますが、もっと良い選択肢は見つかりませんでした

0
Sergey Pleshakov