Protractor not able to move price slider

Question

I am new to protractor, trying to test price slider which may sort products based on provided price range, i could not able to drag the slider(min point) using protractor. how to move the slider?

Html

<span _ngcontent-serverapp-c119="" ngxsliderhandle="" class="ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min" ng-reflect-ng-style="[object Object]" role="slider" tabindex="0" aria-orientation="" aria-label="" aria-labelledby="" aria-valuenow="10" aria-valuetext="10" aria-valuemin="10" aria-valuemax="100" style="opacity: 1; visibility: visible; left: 0px;"></span>

Slider Image

I tried with

    const priceTogggle = element(
        by.xpath(
            '//span[@class="ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min"]'
        )
    );

browser.actions().dragAndDrop(priceTogggle,{x:100,y:0}).mouseUp().perform();  
and   
browser.actions().mouseMove(priceTogggle).mouseDown().mouseMove({x:100,y:0 }).mouseUp().perform()

score 0 · Answer 1 · answered Sep 21 '20 at 14:20

This is what I use

     /**
     * Drags first element to the second one. The destination can either be an elementFinder or an offset in pixels
     * @param    {ElementFinder}        $element
     * @param    {(ElementFinder|{x: number, y: number})}       $destination
     * @returns  {promise.Promise}
     */
    let 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()
            );

And then call

await dragAndDrop($leftGrip, {x: 10, y: 0});

But x might need to be negative depending on direction you're moving to

I'm sure it does work for me. So problem is in your locator probably. Maybe you need to drag another element — Sergey Pleshakov, Sep 22 '20 at 12:46

score -1 · Answer 2 · answered Sep 21 '20 at 11:30

I am not familiar with Protractor. However, if you can send me link to a sample site on which the slider is implemented, i can try with selenium-webdriver java.

In the meantime, you can look at the code in my answer to the below question to see if it helps you.

Issue for Trip Advisor 5-star rating

Protractor not able to move price slider

2 Answers2

Linked