时间戳

首页 > 解决方案 > 无法使用 selenium webdriver 和 java 在 Firefox 47.0 浏览器中移动滑块

selenium - 无法使用 selenium webdriver 和 java 在 Firefox 47.0 浏览器中移动滑块

问题描述

无法在 Firefox 浏览器中将滑块的一端移动到另一端。但是发现一端的元素被点击但没有移动到另一端。

使用的版本：Firefox：46.0​​ 和 47.0 Selenium：2.53.1

移动滑块之前的 html 代码：

<div class="Slider">
<form name="sliding" action="/sm/performance/slideItem/34912/978310/10445054" method="post">
<div id="moveSlider" style="margin:auto;" data-slide-on="false" data-slide-inactiveicon="url('/sm/resources/styles/common/sliderButton/arrow_button.svg')" data-slide-activeicon="url('/sm/resources/styles/common/sliderButton/move_button.svg')">
<div class="slide-slideWrapper" style="height: 50px; width: 300px;">
<div class="slide-slideButton" style="border-radius: 50px;">
<div class="slide-inner" style="width: 551px; margin-left: -245px;">
<div class="slide-off" style="height: 50px; width: 275px; line-height: 50px;">Slider Moved!</div>
<div class="slide-slider" style="height: 40px; width: 40px; margin-left: -25px; background-image: url(&quot;/sm/resources/styles/common/sliderButton/arrow_button.svg&quot;); background-position: center center; border-radius: 50px; margin-top: 5px;"></div>
<div class="slide-on" style="height: 50px; width: 275px; margin-left: -25px; text-indent: 16.6667px; line-height: 50px;">Move right to slide</div>
</div>
</div>
</div>
</div>
</form>
</div>

移动滑块后的html代码：

<div class="Slider">
<form name="sliding" action="/sm/performance/lockBooks/34912/978310/10445054" method="post">
<div id="moveSlider" style="margin:auto;" data-slide-on="false" data-slide-inactiveicon="url('/sm/resources/styles/common/sliderButton/arrow_button.svg')" data-slide-activeicon="url('/sm/resources/styles/common/sliderButton/move_button.svg')">
<div class="slide-slideWrapper"style="height: 50px; width: 300px;">
<div class="slide-slideButton" style="border-radius: 50px;">
<div class="slide-inner" style="width: 551px; margin-left: 0px;">
<div class="slide-off" style="height: 50px; width: 275px; line-height: 50px;">Slider Moved!</div>
<div class="slide-slider" style="height: 40px; width: 40px; margin-left: -25px; background-image: url(&quot;/sm/resources/styles/common/sliderButton/lock_button.svg&quot;); background-position: center center; border-radius: 50px; margin-top: 5px;"></div>
<div class="slide-on active" style="height: 50px; width: 275px; margin-left: -25px; text-indent: 16.6667px; line-height: 50px;">Move right to slide</div>
</div>
</div>
</div>
</div>
</form>
</div>

我们尝试移动滑块的代码：

By sliderBar = By.xpath("//div[@id='Slider']//div[contains(text(), 'slider')]");
By slider = By.xpath("//div[@id='Slider']//div[@class='slide-slider'][contains(@style, 'button.svg')]");

WebElement sliderBarEle = driver.findElement(sliderBar);
int sliderWidth = sliderBarEle.getSize().getWidth();

WebElement sliderEle = driver.findElement(slider);
Actions action = new Actions(driver);
action.clickAndHold(sliderEle);
Thread.sleep(3000);
action.moveByOffset(sliderWidth, 0).build().perform();

标签： seleniumfirefoxselenium-webdriver

解决方案

我通常更幸运地使用该SendKeys方法移动滑块，并发送 RightArrow 或 LeftArrow。我发现对于大多数滑块，它们对箭头键的响应比鼠标拖动/移动更好​​。请参阅这篇文章，了解如何执行此操作。

推荐阅读