为什么在 Firefox 和 IE 中单击滑块元素没有选择正确的值?
Why is clicking on the slider element not picking the right value in Firefox and IE?
我在试图通过 Selenium 测试的网页上有一个滑块控件。 HTML如下:
<div class="slider theme1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" data-action="Slider" data-step="True" data-input="CurrentGoalValue">
<div class="slider-main">
<span class="ui-slider-handle ui-state-default ui-corner-all ui-state-active" style="top: 35%; left: 25%;"></span>
<ul>
<li data-val="0" style="left: 0%; width: 12.5%;" class="slider-item">7</li>
<li data-val="12.5" style="left: 12.5%; width: 12.5%;" class="slider-item ">8</li>
<li data-val="25" style="left: 25%; width: 12.5%;" class="slider-item ">9</li>
<li data-val="37.5" style="left: 37.5%; width: 12.5%;" class="slider-item ">10</li>
<li data-val="50" style="left: 50%; width: 12.5%;" class="slider-item">11</li>
<li data-val="62.5" style="left: 62.5%; width: 12.5%;" class="slider-item ">12</li>
<li data-val="75" style="left: 75%; width: 12.5%;" class="slider-item ">13</li>
<li data-val="87.5" style="left: 87.5%; width: 12.5%;" class="slider-item ">14</li>
<li data-val="100" style="left: 100%; width: 12.5%;" class="slider-item">15</li>
</ul>
</div>
</div>
对于我的测试,我找到了合适的 <li>
项目并调用点击它来模拟用户点击数字(我有另一个测试,我在其中测试点击)。奇怪的是,“7”值一直失败,点击它而不是产生“8”值。这对我来说似乎是奇怪的行为。有谁知道它为什么会这样?
这是我 select 给定项目的 Selenium 代码:
IWebElement sliderValue = wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//li[normalize-space(@class)='slider-item' and text()='" + Days.ToString() + "']")));
if (sliderValue != null)
{
sliderValue.Click();
}
else
{
Assert.Fail(String.Format("No slider value was available for {0}.", Days));
}
我最初的猜测是测试框架点击了元素的远边缘,但文档表明不同,点击起源于元素的中心。
奇怪的是 Chrome 驱动程序没有这个问题,只有 Firefox 和 IE。而且,需要明确的是,它在网页本身上运行良好,点击这些数字 select 是正确的数字,即使对于最低值的数字也是如此。
我有答案和解决方案。用于指示滑块位置的列表项跨越从数字到下一个数字开头的整个距离。单击的默认位置在中心。中心线点击四舍五入到下一个数字。以下代码用于点击,以便点击中心左侧(插入政治笑话)并且问题消失:
Actions clicker = new Actions(Driver);
clicker.MoveToElement(sliderValue).MoveByOffset(-5, 0).Click().Perform();
我在试图通过 Selenium 测试的网页上有一个滑块控件。 HTML如下:
<div class="slider theme1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" data-action="Slider" data-step="True" data-input="CurrentGoalValue">
<div class="slider-main">
<span class="ui-slider-handle ui-state-default ui-corner-all ui-state-active" style="top: 35%; left: 25%;"></span>
<ul>
<li data-val="0" style="left: 0%; width: 12.5%;" class="slider-item">7</li>
<li data-val="12.5" style="left: 12.5%; width: 12.5%;" class="slider-item ">8</li>
<li data-val="25" style="left: 25%; width: 12.5%;" class="slider-item ">9</li>
<li data-val="37.5" style="left: 37.5%; width: 12.5%;" class="slider-item ">10</li>
<li data-val="50" style="left: 50%; width: 12.5%;" class="slider-item">11</li>
<li data-val="62.5" style="left: 62.5%; width: 12.5%;" class="slider-item ">12</li>
<li data-val="75" style="left: 75%; width: 12.5%;" class="slider-item ">13</li>
<li data-val="87.5" style="left: 87.5%; width: 12.5%;" class="slider-item ">14</li>
<li data-val="100" style="left: 100%; width: 12.5%;" class="slider-item">15</li>
</ul>
</div>
</div>
对于我的测试,我找到了合适的 <li>
项目并调用点击它来模拟用户点击数字(我有另一个测试,我在其中测试点击)。奇怪的是,“7”值一直失败,点击它而不是产生“8”值。这对我来说似乎是奇怪的行为。有谁知道它为什么会这样?
这是我 select 给定项目的 Selenium 代码:
IWebElement sliderValue = wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//li[normalize-space(@class)='slider-item' and text()='" + Days.ToString() + "']")));
if (sliderValue != null)
{
sliderValue.Click();
}
else
{
Assert.Fail(String.Format("No slider value was available for {0}.", Days));
}
我最初的猜测是测试框架点击了元素的远边缘,但文档表明不同,点击起源于元素的中心。
奇怪的是 Chrome 驱动程序没有这个问题,只有 Firefox 和 IE。而且,需要明确的是,它在网页本身上运行良好,点击这些数字 select 是正确的数字,即使对于最低值的数字也是如此。
我有答案和解决方案。用于指示滑块位置的列表项跨越从数字到下一个数字开头的整个距离。单击的默认位置在中心。中心线点击四舍五入到下一个数字。以下代码用于点击,以便点击中心左侧(插入政治笑话)并且问题消失:
Actions clicker = new Actions(Driver);
clicker.MoveToElement(sliderValue).MoveByOffset(-5, 0).Click().Perform();