How to set attributes of the object using protractor

[vishalshivnath]

I have a slider bar in the application. The bar is being used to narrow down the search criteria. When I move the slider bar the attribute values get set . The following piece of HTML code would give you some idea about the attritbutes that get set when i move my slider bar.For ex high-val="873" low-val="206" are getting set , I wanted to simulate this slider event or set these attributes that will achieve my objective

206 - 873

[juliemr]

I don't see the HTML. Can you include it?

In general, you can't set attributes directly, since you're restricted to using the webdriver protocol to interact with elements as a user would. So you may have to do an action sequence of clicks.

[vishalshivnath]

Here is the HTML Code:- (removed some of the HTML syntax "< " since github parser parse the html code and remove the entire line of code) div class="sliderContainer ng-scope" data-ng-init="score.searchCriteria.scoreRange = [0, 1000]"> label class="leftcolumnhead" for="scoresearch"> Score: span class="rangeData ng-binding" data-ng-show="score.searchCriteria.scoreRange">111 - 846 /label> div class="left-slider ng-valid ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ng-dirty" high-val="846" low-val="111" is-range="true" max-val="1000" min-val="0" data-ng-model="score.searchCriteria.scoreRange" data-range-slider=""> div class="ui-slider-range ui-widget-header" style="left: 11.1%; width: 73.5%;">

[vishalshivnath]

Hello Julie, Can you please respond to my query. Please let me know if you need any other details from my side

[juliemr]

See http://github.github.com/github-flavored-markdown/ to learn about formatting code in github.

[juliemr]

See http://stackoverflow.com/questions/11966287/unable-to-control-slider-captcha-jquery-using-selenium-webdrive/12050145 for information about how to deal with sliders. You will need to translate this to JavaScript - the question is in Java Webdriver.

[vishalshivnath]

Thanks for the information.

[vishalshivnath]

Tried this thing today but didn't work . The code didn't throw any error while execution but i don't see slider bar moving :

    ptor.get('URL');
    var slider = ptor.findElement(protractor.By.xpath(".//*[@id='leftcolumn']/div[2]/div/a[1]"));
    ptor.actions().dragAndDrop(slider,{x:dx,y:0}).perform();
    ptor.sleep(10000);

[mcalthrop]

Hi @juliemr

I looked at the SO link you posted, and I couldn't see a solution: there was no answer marked as being correct.

Are you referring to this answer?

If so, I can't see a reference to DragAndDropToOffset(), Build() or Perform() in the Protractor docs.

Am I missing something?

Also: I'm wondering if there is an alternative solution, whereby you give the slider element focus (via click()), and then simulate pressing the right and/or left arrow keys.

Only thing is, it's not clear in the documentation how to use sendKeys() to send arrow keys.

How would I do this?

Matt

[mcalthrop]

Regarding the use of sendKeys() to send an arrow keypress: I found this on the protractor object.

So to move a slider to the right, do something like this:

sliderEle = element(by.id('html-id-of-slider'));
sliderEle.click();
sliderEle.sendKeys(protractor.Key.ARROW_Right);