selenium拖动滑块（slider）到指定值

测试积点老人 · 发表于 2022-9-16 11:14:19

我需要拖动网页上滑块到指定的值，但是实际上精度总是差一些，而且看不到拖动效果，大家帮忙看看是什么原因

import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
def set_slider_value(sliderValue):
"""
1.根据滑轨的长度和支持的值的范围计算出滑块每移动1个值对应的像素-per_px
2.sliderValue为要设置的值，需要移动的像素是sliderValue*per_px
3.用滑轨的起点x坐标+sliderValue*per_px即可得到要移动到的位置
:return:
"""
print("需要设置滑块的值为：",sliderValue)
driver.get(r"file:///D:\3.html")
driver.maximize_window()
time.sleep(3)
act = ActionChains(driver)
"""定位滑轨元素"""
slider_ele=driver.find_element_by_css_selector('[type="range"]')
print(slider_ele.rect)
#滑轨的起点坐标和高宽
sliderH,sliderW,sliderX,sliderY=slider_ele.rect.values()
"""滑轨支持的值范围"""
slider_min=float(slider_ele.get_property("min"))
slider_max=float(slider_ele.get_property("max"))
current_slider_value = float(slider_ele.get_property("value"))
"""滑块值每变化1对应的像素(px)"""
per_px=sliderW/(slider_max-slider_min)
print("per_px:",per_px)
print("滑块初始值为:",slider_ele.get_property("value"))
print("滑块的当前x坐标：",current_slider_value * per_px + sliderX)
time.sleep(2)
"""移动到的x坐标"""
offsetX = sliderValue * per_px + sliderX
print((offsetX, sliderY))
# pyautogui.mouseUp()
act.w3c_actions.pointer_action.move_to_location(current_slider_value * per_px + sliderX, sliderY).click_and_hold()
act.w3c_actions.pointer_action.move_to_location(offsetX, sliderY).release()
act.w3c_actions.perform()
print("点击后滑块的值为:", slider_ele.get_property("value"))
set_slider_value(10)

复制代码

html文件

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
   * {
      padding: 0;
      margin: 0;
   }

   .slider-panel {
      background-color: #fcc688;
      height: 450px;
      width: 600px;
      padding: 20px;
      margin: auto;
   }

   .slider-panel .slider-box {
      background-color: darkgray;
      margin-top: 40px;
      display: inline-block;
      width: 400px;
      height: 6px;
      position: relative;
      border-radius: 5px;
   }

   /* 滑条划过的宽度，默认值为0 */
   .slider-panel .slider-box .slider-value {
      background-image: linear-gradient(90deg, #82E0F7 0%, #009DDC 52%);
      height: 6px;
      width: 0;
      border-radius: 5px;
   }

   /* 滑条的样式。默认透明 */
   .slider-panel input {
      position: absolute;
      left: 0;
      top: 0;
      -webkit-appearance: none;
      -ms-appearance: none;
      background: transparent;
      width: 200px;
      height: 2px;
      outline: none;
   }

   /* 圆形滑块的样式 */
   .slider-panel input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 12px;
      width: 12px;
      background-color: #eaecee;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 4px 0 #212B35;
      background: #4BBEEC;
      border: 2px solid #FFFFFF;
   }
</style>
<script type="text/javascript">
   $(function() {
      //绑定鼠标滑动事件
      $(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)

      function moveSlider() {
      // 获取当前滑条的动态值
      let sliderValue = parseInt($(this).val());
      // 将滑条的值赋值给滑条划过后p标签的宽度
      $('.slider-value').css('width', sliderValue + '%');
      // 显示当前滑条的动态值
      $('.slider-percentage').text(sliderValue);
      }

   })
</script>
<title>彩色渐变滑动条</title>
  </head>
  <body>
<div class="slider-panel">

   <div class="slider-box">

      <p class="slider-value"></p>

      <input type="range" min="0" step="1" max="100" value="40">
   </div>
   <p><span class='slider-percentage'>0</span>%</p>
</div>
</div>
  </body>
</html>

applepen · 发表于 2022-9-16 21:26:40

感觉这种就别用selenium模拟了。直接上js操作吧。

bellas · 发表于 2022-9-19 13:55:02

用js比较好一点

郭小贱 · 发表于 2022-9-19 15:03:14

建议使用js吧

jingzizx · 发表于 2022-9-19 16:44:30

这么精度就是没有这么准

		自动登录	找回密码
密码			(注-册)加入51Testing

selenium拖动滑块（slider）到指定值

站长推荐 /1