Of Stack

python Realizes Mouse Drag and Drop Function Based on selenium

  • 2021-08-31 08:45:08
  • OfStack

1. Prepare html file

First of all, we need to prepare a mouse sliding html file to demonstrate the effect of mouse sliding. Pay attention to the need to put our html file on our own server.

In this way, we can verify it through selenium. The html file is as follows: 


<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">>> Drag the slider to verify <<</div>
  　  　  </div>
 　 <input type="button" value=" Submit validation " 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;// Slider drag identification 
    var iX;
    dargEle.mousedown(function(e) {
      msgEle.text("");
      dragging = true;
      iX = e.clientX; // Get initial coordinates 
    });
    $(document).mousemove(function(e) {
      if (dragging) {
        var e = e || window.event;
        var oX = e.clientX - iX;
        if(oX < 30){
          return false;
        };
        if(oX >= 210){// Container width +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(">> Drag the slider to verify <<");
      }else{
        dargEle.attr("validate","true").text(" Verification succeeded! ").unbind("mousedown");
      };
      dragging = false;
    });
  };

  DragValidate($("#dragEle"),$(".tips"));
  $("#submit").click(function(){
    if(!$("#dragEle").attr("validate")){
      alert(" Please drag the slider to verify first! ");
    }else{
      alert(" Verification succeeded! ");
    }
  });
</script>
</body>
</html>

2. Use selenium to drag and drop the mouse. The specific code is as follows: 


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()
 #  Get the 1 , 2 , 3 Elements that can be dragged 
drag1 = driver.find_element_by_id('dragEle')
 
#  Create 1 A new one ActionChains , will webdriver Instance pair driver Pass in as a parameter value, and then pass the WenDriver Instance performs user actions 
action_chains = ActionChains(driver)
#  Set the number on the page 1 Elements that can be dragged to 2 Element position 
#  Set the number on the page 3 Elements that can be dragged and dragged down to the right 10 Pixels, drag together 5 Times 
action_chains.drag_and_drop_by_offset(drag1, 208, 0).perform()
time.sleep(5)
driver.quit()

The above is the python based on selenium mouse drag-and-drop function of the details, more about the python mouse drag-and-drop information please pay attention to other related articles on this site!

Related articles: