51Testing软件测试论坛

标题: selenium拖动滑块（slider）到指定值 [打印本页]
作者: 测试积点老人    时间: 2022-9-16 11:14
标题: selenium拖动滑块（slider）到指定值
我需要拖动网页上滑块到指定的值，但是实际上精度总是差一些，而且看不到拖动效果，大家帮忙看看是什么原因
[attach]142977[/attach]
  1. import time
  2. from selenium import webdriver
  3. from selenium.webdriver.common.action_chains import ActionChains
  4. from selenium.webdriver.common.by import By
  5. def set_slider_value(sliderValue):
  6.     """
  7.     1.根据滑轨的长度和支持的值的范围计算出滑块每移动1个值对应的像素-per_px
  8.     2.sliderValue为要设置的值，需要移动的像素是sliderValue*per_px
  9.     3.用滑轨的起点x坐标+sliderValue*per_px即可得到要移动到的位置
  10.     :return:
  11.     """
  12.     print("需要设置滑块的值为：",sliderValue)
  13.     driver.get(r"file:///D:\3.html")
  14.     driver.maximize_window()
  15.     time.sleep(3)
  16.     act = ActionChains(driver)
  17.     """定位滑轨元素"""
  18.     slider_ele=driver.find_element_by_css_selector('[type="range"]')
  19.     print(slider_ele.rect)
  20.     #滑轨的起点坐标和高宽
  21.     sliderH,sliderW,sliderX,sliderY=slider_ele.rect.values()
  22.     """滑轨支持的值范围"""
  23.     slider_min=float(slider_ele.get_property("min"))
  24.     slider_max=float(slider_ele.get_property("max"))
  25.     current_slider_value = float(slider_ele.get_property("value"))
  26.     """滑块值每变化1对应的像素(px)"""
  27.     per_px=sliderW/(slider_max-slider_min)
  28.     print("per_px:",per_px)
  29.     print("滑块初始值为:",slider_ele.get_property("value"))
  30.     print("滑块的当前x坐标：",current_slider_value * per_px + sliderX)
  31.     time.sleep(2)
  32.     """移动到的x坐标"""
  33.     offsetX = sliderValue * per_px + sliderX
  34.     print((offsetX, sliderY))
  35.     # pyautogui.mouseUp()
  36.     act.w3c_actions.pointer_action.move_to_location(current_slider_value * per_px + sliderX, sliderY).click_and_hold()
  37.     act.w3c_actions.pointer_action.move_to_location(offsetX, sliderY).release()
  38.     act.w3c_actions.perform()
  39.     print("点击后滑块的值为:", slider_ele.get_property("value"))

  41. 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
感觉这种就别用selenium模拟了。直接上js操作吧。
作者: bellas    时间: 2022-9-19 13:55
用js比较好一点
作者: 郭小贱    时间: 2022-9-19 15:03
建议使用js吧
作者: jingzizx    时间: 2022-9-19 16:44
这么精度就是没有这么准



欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2