如何使用 selenium java 向左和向右移动滑块

Question

我想使用 selenium java 从一个步骤拖到另一个步骤。我在 Whosebug 上提到了很多帖子，但我认为其中 none 与我的案例相关。下面是我的 HTML 代码：

 <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>

下面是我的 java 代码：

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 this link 上建议的所有可能的解决方案，但仍然没有用。我应该在坐标部分设置什么。默认情况下它在 18 上，它的坐标位置从 window 的左侧是 1319，从 Window 的右侧是 252.
我附上了那个滚动条的图片。假设我想从 18 拖到 17 那么我该怎么做呢？请帮我。我卡得很厉害。

Answer 1

以下代码会将您的滑块移动到“17”比例：

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();

我假设 sliderLocation 指的是这个元素

如何使用 selenium java 向左和向右移动滑块

how to move slider towards left and right using selenium java

java

selenium

selenium-webdriver

selenium-rc