Challenge
The input range element is one of the “new” input types. It consists of a slider and a thumb and it can have minimum and maximum values. We want to simulate the user dragging the slider thumb to a desired value.
Iterations to the solution
1. The value of any input element can be changed via javascript executor.
Unfortunately the javascript emulation does not trigger the oninput/onchange handlers associated with the element. Therefore the application under test behaves unlike in a real world scenario.
2. Calculate the click position by using the element’s width and use ActionChains to move the mouse to the position and click at it.
This will get you close, but as you’ll see it is not stable – on some ranges with some values, this will miss the desired value by some offset. It has probably something to do with the browser’s margins and paddings and the input element’s shadow DOM’s graphical representation. Certainly this is not stable across browsers.
3. Click on the calculated position and perform a binary search until the desired value is achieved
A stable solution will check that after the slider position has been changed, the current value is checked and the thumb possibly adjusted until the value is what we want.
The problem with this approach is that if you miss the target value by a pixel margin that is less than the width of the slider thumb, a follow-up click nearby won’t change the slider state because a click on the thumb won’t change the slider value. Therefore a binary search with clicks won’t be stable.
4. Click and hold the range thumb and perform a binary search by dragging the slider thumb
The problem of clicking on the thumb will be resolved by dragging the thumb – this is what real users would usually do. This solution will work except when the first click/release cycle on the slider thumb hits the goal and no adjustment by dragging is needed. In that case, the slider value won’t change and an oninput event won’t happen. This may sometimes be what is wanted, but generally if an input is changed in a test case, you’d usually expect the event handlers to trigger.
5. A stable cross-brosser solution
In the final stable solution we’ll perform a binary search by dragging. Before starting the search, we’ll drag the slider from minimum to maximum value. This will ensure we’ll generate an oninput event on the input range element. Here’s the code.
How would you solve this?
