Some websites do have slider elements like you can see in some travel websites like given below. this moment is possible using mouse event and concept would be very much similar to the old article on the mouse event. I will take a simple example of working code with dummy data inside so you can pass your input and see this working. Here is a detailed explanation: You need to keep few things in mind:
- Slider bar size may or may not vary based on browser size.
- You may need to slide either by the number of pixels or percentage of slider bar length.
I will take very generic example of http://jqueryui.com/slider/ to explain all steps. First reason to select this example is that the size of slider bar is adjusting based on browser size and secondly its available for everyone J. In the code below, I will first try to get the size of bar at the current browser size where I want to perform slider action and then based on req I will move the slider. Make sure you don’t change the browser size in between reading the slider bar size and doing sliding action.
-
Open URL via selenium code.
-
Switch to the container frame to reach the slider and slider bar web element.
-
Select the bar and get the width.
- Now we need to move slide to 50% (231px) or 100px. We can write small java/.net program to calculate the desired percentage in pix using the width of the bar as 463 in my case. But I will move only 40pixels.
-
Get web element for the slider on the bar.
-
Now we want to move the slider on right side horizontally means towards Y axis. To perform movement action we will use action class and use mouse event. To move horizontally we need to move in the Y direction of the screen so we can use MoveByOffset
i.e. X-axis: 0 & Y axis: 40px. So first create action, Click and hold the slider, move to some pix as follows.
Now the script has completed and you can perform the whole action in one go!!!
Happy testing!!