526互联

Selenium鼠标事件

发布时间 2023-03-28 17:19:06作者: ll=ll

前言：执行自动化测试过程中遇到鼠标的操作，例如：左键单击、左键双击、右键单击、鼠标悬停、鼠标拖动等等操作，如何模拟鼠标的操作？

1、导入ActionChains包

想使用selenium中的鼠标事件，首先我们必须导入ActionChains包，需要注意的是包名称ActionChains两个单词首字母需要大写

from selenium.webdriver.common.action_chains import ActionChains  # 使用鼠标操作，要导入ActionChains包

2、鼠标操作分类

1）鼠标事件 proform()
调用 ActionChains 类方法时，不会立即执行，而是将所有操作都存储在一个队列里，当调用 perform() 方法时，队列里的操作会依次执行。可以理解为对鼠标事件的提交操作，所以首先要记住这个方法。

2）鼠标事件分类

  • perform()：执行所有存储的动作

  • click(on_element=None)：单击鼠标左键
    on_element：指被点击的元素，如果该参数为None，将单击当前鼠标所在位置

  • double_click(on_element=None)：双击鼠标左键
    on_element：指被点击的元素，如果该参数为None，将单击当前鼠标所在位置

  • click_and_hold(on_element=None)：长按鼠标左键
    on_element：指被点击的元素，如果该参数为None，将单击当前鼠标所在位置

  • context_click(on_element=None)：单击鼠标右键
    on_element：指被点击的元素，如果该参数为None，将单击当前鼠标所在位置

  • move_to_element(to_element)：鼠标悬停到某个元素
    to_element：鼠标悬停到该元素上

  • drag_and_drop(source, target)：把元素拖动到另一个元素后松开
    Source：鼠标拖动的元素(元素定位)
    Target：鼠标释放的目标元素(元素定位)

  • drag_and_drop_by_offset(source, xoffset, yoffset)：把元素拖到某个坐标然后松开
    Source：鼠标拖动的元素(元素定位)
    xoffset：x轴坐标
    yoffset：y轴坐标

  • move_by_offset(xoffset, yoffset)：鼠标从当前位置移动到某个坐标

  • move_to_element_with_offset(to_element, xoffset, yoffset)：鼠标移动到距某个元素（左上角坐标）多少距离的位置
    to_element：指鼠标移动后停止到该元素上
    xoffset：x轴坐标
    yoffset：y轴坐标

  • release(on_element=None)：在某个元素位置松开鼠标左键
    on_element：被鼠标释放的元素

  • send_keys(*keys_to_send)：发送单个或多个参数到当前焦点的元素
    *keys_to_send：可变参数，可同时传入多个参数，如send_keys("a", "b")

  • send_keys_to_element(element, *keys_to_send)：发送单个或多个参数到指定元素
    element：定位的元素
    *keys_to_send：可变参数，可同时传入多个参数

  • key_down(value, element=None)：按下某个键盘上的键
    value：输入的参数(键盘上的键)
    element：指被定位的元素，如果该参数为None，将当前定位元素输入

  • key_up(value, element=None)：松开某个键盘上的键

3、鼠标操作方法

from selenium.webdriver.common.action_chains import ActionChains  # 使用鼠标操作，要导入ActionChains包

# 打开Chrome浏览器
driver = webdriver.Chrome("../login/chromedriver.exe")
# 打开本地的html代码
driver.get("file:///D:/test.html")

# 通过id定位到单击
clk = driver.find_element_by_id("d")
# 使用AActionChains的click()方法对指定元素点击鼠标左键
dan = ActionChains(driver).click(clk)
# 使用perform()执行
dan.perform()

# 通过id定位到双击
dou = driver.find_element_by_id("s")
# 使用ActionChains的double_click()方法对指定元素双击鼠标左键
sh = ActionChains(driver).double_click(dou)
# 使用perform()执行
sh.perform()

# 通过id定位到悬停
xt = driver.find_element_by_id("x")
# 使用ActionChains的move_to_element()方法使鼠标移动到指定元素悬停
xua = ActionChains(driver).move_to_element(xt)
# 使用perform()执行
xua.perform()

# 通过id定位到按下
ax = driver.find_element_by_id("a")
# 使用ActionChains的click_and_hold()方法长按左键
an = ActionChains(driver).click_and_hold(ax)
# 使用perform()执行
an.perform()

# 通过id定位到移动
tu = driver.find_element_by_id("ele")
# 使用ActionChains的drag_and_drop_by_offset()方法把元素移动到x坐标75，y坐标10
tuo = ActionChains(driver).drag_and_drop_by_offset(tu, 75, 10)
# 使用perform()执行
tuo.perform()

# 鼠标移动到x轴为80，y轴为80的位置
ActionChains(driver).move_by_offset(80, 80).perform()

# 释放被长按在按下的的鼠标
shi = ActionChains(driver).release(ax).perform()


time.sleep(1)
# 链式用法，把所有的执行的鼠标操作串联一起执行
ActionChains(driver).click(clk).double_click(dou).move_to_element(xt).click_and_hold(ax).drag_and_drop_by_offset(tu, 75, 10).perform()

# 点击id为aa的输入框并点击到输入框
driver.find_element_by_id("aa").click()
# 使用ActionChains的send_keys()方法在当前定位的元素输入值"123"和"456"
ActionChains(driver).send_keys("123", "456").perform()

# 定位id为bb的输入框
bb = driver.find_element_by_id("cc")
# 使用ActionChains的send_keys_to_element()方法传入定位元素，输入参数"abc"和"def"
ActionChains(driver).send_keys_to_element(bb, "abc", "def").perform()

# 浏览器打开新的地址，把元素拖动到另一个元素
driver.get("https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable")

# 切入到iframe框中
driver.switch_to.frame("iframeResult")
# 根据元素id获取要拖动元素
e = driver.find_element_by_id("draggable")
# 根据元素id获取拖动到的元素
x = driver.find_element_by_id("droppable")

# 使用ActionChains的drag_and_drop()方法把元素e拖动到元素e的位置
ActionChains(driver).drag_and_drop(e, x).perform()

# 获取弹框
alert = driver.switch_to.alert
# 使用弹框的accept()方法确定弹框
alert.accept()

4、HTML代码

<head>
		<meta charset="utf-8">
		<style>
			#container{
				width: 570px;
				height: 200px;
			}
			dl{
				float: left;
			}
			dt{
				width: 90px;
				height: 90px;
				background-color: lightblue;
				border-radius: 20px;
				margin: 10px;
			}

			.yellow{
				background-color: lightgoldenrodyellow;
			}
			.blue{
				background-color: lightblue;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="container">
			<dl>
				<dt onclick="f1(this)" id='d'></dt>
				<dd>单击</dd>
			</dl>
			<dl>
				<dt ondblclick="f2(this)" id='s'></dt>
				<dd>双击</dd>
			</dl>
			<dl>
				<dt onmouseover="this.className='yellow'" onmouseout="this.className='blue'" id='x'></dt>
				<dd>悬停</dd>
			</dl>
			<dl>
				<dt onmousedown="this.className='yellow'" onmouseup="this.className='blue'" id='a'></dt>
				<dd>按下</dd>
			</dl>
			<dl>
				<dt id="ele" onmousemove="mouseMove(event)"></dt>
				<dd>移动</dd>
			</dl>
			<br><span id="echo"></span>
		</div></br>
		</br>
		<div >
			<div>
				账号：<input id='aa'></br>
				密码：<input id='cc'>
			</div>
		<script>
			var num1=0,num2=0;
			function f1(e){
				num1++;
				if(num1%2==0)
					e.className="blue";
				else
					e.className="yellow";
			}
			function f2(e){
				num2++;
				if(num2%2==0)
					e.className="blue";
				else
					e.className="yellow";
			}
			function mouseMove(ev){				
				ev=ev||window.event;
				var el=document.getElementById("ele");
				var x=ev.clientX-el.offsetLeft;
				var y=ev.clientY-el.offsetTop;
				if(x<el.offsetWidth/2)
					el.style.background="lightgoldenrodyellow";
				else 
					el.style.background="lightpink";
				document.getElementById("echo").innerHTML="x:"+x+"<br>y:"+y;
			}
		</script>
	</body>