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()