javaseleniumselenium-webdriverselenium-rc

how to move slider towards left and right using selenium java

I want to drag from a step to other step using selenium java .I referred many posts on stackoverflow but none of them was relevant to my case I think so. Below is my HTML code : 

 <div style="width: 100%; height: auto; font-weight: normal; font-family: Tahoma; font-size: 8pt; font-style: normal; text-decoration: none;" class="QvSliderObject">
    <div style="width: 711px; height: 61px;">
    <canvas height="61" width="711" style="width: 711px; height: 61px;">
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 21px; top: 11px; width: 8px; height: 14px;">1</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 58px; top: 11px; width: 8px; height: 14px;">2</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 95px; top: 11px; width: 8px; height: 14px;">3</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 132px; top: 11px; width: 8px; height: 14px;">4</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 168px; top: 11px; width: 8px; height: 14px;">5</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 205px; top: 11px; width: 8px; height: 14px;">6</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 242px; top: 11px; width: 8px; height: 14px;">7</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 279px; top: 11px; width: 8px; height: 14px;">8</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 316px; top: 11px; width: 8px; height: 14px;">9</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 350px; top: 11px; width: 14px; height: 14px;">10</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 386px; top: 11px; width: 14px; height: 14px;">11</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 423px; top: 11px; width: 14px; height: 14px;">12</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 460px; top: 11px; width: 14px; height: 14px;">13</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 497px; top: 11px; width: 14px; height: 14px;">14</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 534px; top: 11px; width: 14px; height: 14px;">15</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 571px; top: 11px; width: 14px; height: 14px;">16</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 607px; top: 11px; width: 14px; height: 14px;">17</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 644px; top: 11px; width: 14px; height: 14px;">18</div>
    <div style="position: absolute; font-size: 8pt; overflow: visible; color: rgb(54, 54, 54); font-family: Tahoma; font-weight: normal; text-align: center; left: 681px; top: 11px; width: 14px; height: 14px;">19</div></canvas> 
<canvas style="width: 8px; height: 12px; position: absolute; left: 646px; top: 40px; cursor: inherit;" width="8" height="12"></canvas>
    <canvas style="width: 10px; height: 12px; position: absolute; left: 696px; top: 40px;" width="10" height="12"></canvas>
    <canvas style="width: 10px; height: 12px; position: absolute; left: 5px; top: 40px;" width="10" height="12"></canvas></div></div>

Below is my java code : 

WebElement sliderLocation = driver.findElement(By.xpath("(//*[@id='64']//following::canvas)[2]"));
        // Used points class to get x and y coordinates of element.
        Point classname = sliderLocation.getLocation();
        int xcordi = classname.getX();
        int ycordi = classname.getY();
        int width = sliderLocation.getSize().getWidth();
        System.out.println(
                "Element's Position from left side of window " + xcordi + "and from right side of Window " + ycordi);
        try {
            Thread.sleep(3000);
            Actions move = new Actions(driver);
            Action action1 = (Action) move.dragAndDropBy(sliderLocation, 60, 0).build();
            action1.perform();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

and tried all possible solutions suggested on this and this link but still of no use. What should I set in the coordinates section. By default it is on 18 and its coordinates position from left side of window is 1319 and from right side of Window is 252.
I have attached image of that scroll bar . Suppose I want to drag from 18 to 17 so how can I do this ? Please help me . I am badly stuck .
enter image description here

Solution

  • Following code will move your slider to "17" scale:

    WebElement sliderLocation = driver.findElement(By.xpath("(//*[@id='64']//following::canvas)[2]"));
  WebElement elem17 = driver.findElement(By.xpath("//*[@id='64']/div[2]/div[1]/div/div[17]"));

Actions action = new Actions(driver);
action.clickAndHold(sliderLocation).moveToElement(elem17).release(sliderLocation).build().perform();

    I am assuming that sliderLocation refers to this element enter image description here