Selenium鼠标事件

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

1、导入ActionChains包

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

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

2、鼠标操作分类

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

2)鼠标事件分类

  • perform():执行所有 ActionChains 中存储的行为

  • 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):鼠标从当前位置移动到某个坐标
    xoffset:x轴坐标
    yoffset:y轴坐标

  • 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>

posted @ 2023-03-28 17:11  ll=ll  阅读(548)  评论(0编辑  收藏  举报