python 基于selenium实现鼠标拖拽功能

作者:高文祥888888 时间:2022-10-30 17:03:07 

1、准备html文件

首先我们需要准备一个鼠标滑动的html文件,用来演示鼠标滑动的效果,注意需要将我们的html文件放在自己的服务器上,

这样我们才能够通过selenium来进行验证。html文件如下:


<html>
<head>
 <meta charset="utf-8" />
 <style>
   body {
 margin: 0;
 padding: 0;
}

input{
 appearance:none;
 -moz-appearance:none;
 -webkit-appearance:none;
 background: none;
 border:none;
}

.wrap{
 margin: 200px 0 0 200px;
}

.box {
 position: relative;
 width: 200px;
 height: 30px;
 border-radius: 20px;
 background: #686B69;
 line-height: 30px;
 overflow: hidden;
 margin-bottom: 40px;
 color: #fff;
 font-size: 12px;
}

.btn {
 position: absolute;
 top: 0;
 left: 0;
 height: 30px;
 width: 30px;
 background: #0c7;
 border-radius: 20px;
 text-align: center;
}

.tips {
 text-align: center;
}

#submit{
 line-height: 28px;
 border-radius: 3px;
 background: #0c7;
 width: 200px;
 text-align: center;
 color: #fff;
}
 </style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="btn" id="dragEle"></div>
<div class="tips">>>拖动滑块验证<<</div>
</div>
<input type="button" value="提交验证" id="submit" />
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
 function DragValidate (dargEle,msgEle){
   var dragging = false;//滑块拖动标识
   var iX;
   dargEle.mousedown(function(e) {
     msgEle.text("");
     dragging = true;
     iX = e.clientX; //获取初始坐标
   });
   $(document).mousemove(function(e) {
     if (dragging) {
       var e = e || window.event;
       var oX = e.clientX - iX;
       if(oX < 30){
         return false;
       };
       if(oX >= 210){//容器宽度+10
         oX = 200;
         return false;
       };
       dargEle.width(oX + "px");
       //console.log(oX);
       return false;
     };
   });
   $(document).mouseup(function(e) {
     var width = dargEle.width();
     if(width < 200){
       //console.log(width);
       dargEle.width("30px");
       msgEle.text(">>拖动滑块验证<<");
     }else{
       dargEle.attr("validate","true").text("验证成功!").unbind("mousedown");
     };
     dragging = false;
   });
 };

DragValidate($("#dragEle"),$(".tips"));
 $("#submit").click(function(){
   if(!$("#dragEle").attr("validate")){
     alert("请先拖动滑块验证!");
   }else{
     alert("验证成功!");
   }
 });
</script>
</body>
</html>

2、使用selenium进行鼠标拖拽操作,具体代码如下:


from selenium import webdriver
import unittest
from selenium.webdriver import ActionChains
import time
 
 
url = 'http://192.168.62.9:1234/easytest/tt'
driver = webdriver.Chrome(executable_path="C:\chromedriver.exe")
driver.get(url)
driver.maximize_window()
 # 获取第一,二,三能拖拽的元素
drag1 = driver.find_element_by_id('dragEle')
 
# 创建一个新的ActionChains,将webdriver实例对driver作为参数值传入,然后通过WenDriver实例执行用户动作
action_chains = ActionChains(driver)
# 将页面上的第一个能被拖拽的元素拖拽到第二个元素位置
# 将页面上的第三个能拖拽的元素,向右下拖动10个像素,共拖动5次
action_chains.drag_and_drop_by_offset(drag1, 208, 0).perform()
time.sleep(5)
driver.quit()

来源:https://www.cnblogs.com/win0211/p/12107003.html

标签:python,selenium,鼠标拖拽
0
投稿

猜你喜欢

  • django重新生成数据库中的某张表方法

    2024-01-23 01:14:45
  • windows系统下让mysql支持federated的storage engine

    2010-01-20 11:16:00
  • mysql启用skip-name-resolve模式时出现Warning的处理办法

    2024-01-25 09:38:44
  • Oracle数据表分区的策略

    2010-07-28 12:59:00
  • MySQL批量SQL插入性能优化详解

    2024-01-21 15:25:59
  • Python绘制计算机CPU占有率变化的折线图

    2021-08-11 05:50:37
  • python将天气预报可视化

    2021-01-19 01:37:46
  • Python可视化学习之matplotlib内置单颜色

    2021-07-27 06:43:46
  • python中查看.db文件中表格的名字及表格中的字段操作

    2022-03-17 22:00:29
  • 详解python的webrtc库实现语音端点检测

    2023-07-20 01:44:11
  • 详解sql中的参照完整性(一对一,一对多,多对多)

    2024-01-22 14:19:48
  • JavaScript解析任意形式的json树型结构展示

    2024-04-30 10:09:35
  • Python translator使用实例

    2021-02-09 22:40:24
  • Javascript——浅析注册事件

    2008-08-19 12:44:00
  • PHP与以太坊交互详解

    2023-10-21 13:59:36
  • CentOS 7下部署php7.1和开启MySQL扩展的方法教程

    2023-11-19 11:58:09
  • GoJs的文本绘图模板TextBlock使用实例

    2023-08-26 16:01:00
  • vue中的v-show,v-if,v-bind的使用示例详解

    2024-05-28 15:48:07
  • 详解利用python+opencv识别图片中的圆形(霍夫变换)

    2023-12-07 18:17:50
  • python实现数组求和与平均值

    2021-09-27 07:15:49
  • asp之家 网络编程 m.aspxhome.com