Need help in identifying the keyword for below element - slider

Libraries Browser
1

image

On this slider need keyword to work on.

Have tried scroll on and scroll to keyword

Scroll By id=select-weightage horizontal=${model_weightage}

Scroll To id=select-weightage horizontal=${model_weightage}

execution is green, but in screenshot values are not updated.

2

Here is the css

tempsnip
tempsnip854×453 32 KB

3

Hi @preeyakrish91,

Scroll By and Scroll To are for fields like textarea and multi-select option lists.

Your slider widget is a custom widget not a standard html form field so there will not be a builtin keyword for interaction with it.

id=select-weightage selects the top level element of the custom widget

You could try with an xpath like this: //*[@id=select-weightage]//input to get to the standard html form input element

Something like this should give you the current value of the slider:

${property} =    Get Property    //*[@id=select-weightage]//input    value

Not sure how you would move the slider though, as a guess, I’d try this first and see if it works:

Fill Text    //*[@id=select-weightage]//input    88

Dave.

1 Like
4

HI @damies13 I have tried the Fill Text but that element is not editable. hence its throwing error.

5

I wasn’t confident that would work, sometimes you just have to try stuff and see what works.

What you might need to do is use Get Style to get the width and height

${wdth}=   Get Style    //*[@id=select-weightage]      width
${hght}=   Get Style    //*[@id=select-weightage]      height

divide the height by 2 and the width by 100 (you might have to play with these numbers to allow for offsets). then use Click With Options and use the position_x and position_y to click at a point along the slider that matches the percentage you want

e.g.

${sbary}=    Evaluate    ${hght}/2
${sbarx}=    Evaluate    ( ${wdth} / 100 ) * 88

Click With Options    //*[@id=select-weightage]    position_x=${sbarx}    position_y=${sbary}

If that works, wrap it in a keyword called something like Set Slider Value and pass the locator and value as arguments so you have a reusable keyword

Dave.

6

@damies13 Sure let me try this.

7

@damies13 Sadly, the width and height of the element is set as auto :frowning:

8

Maybe you can use Execute Javascript to get the width and height?

I’m no expert in Javascript, but I cobbled this together from examples I found online

${wdth}=   Execute Javascript    document.getElementById('select-weightage').getBoundingClientRect().x
${hght}=   Execute Javascript    document.getElementById('select-weightage').getBoundingClientRect().y

Hopefully that works,

Dave.

9

@damies13 Since am trying via browser library unable to do like you mentioned. However i found this keyword
Drag And Drop Relative to id=select-weightage 80 steps=1

image

and using this able to move the slide but not to the desired value.

Am trying to understand that.

1 Like
10

I hadn’t seen that keyword, so awesome you found something that works :+1:

11

@preeyakrish91 Maybe you can use the info from this LinkedIn post https://www.linkedin.com/pulse/how-interact-sliders-using-playwright-eugene-truuts-5665f%3FtrackingId=6mti0EE4QDS3kiI%252FpQbbQQ%253D%253D/?trackingId=6mti0EE4QDS3kiI%2FpQbbQQ%3D%3D ? It’s for Playwright but since Browser Library is Playwright based I’m sure you can make it work for Browser Library.

12

Sure i will try this