Selenium 进阶技巧：实现 Web 端的鼠标操作功能

此文章来源于项目官方公众号：“AirtestProject”
版权声明：允许转载，但转载必须保留原链接；请勿用作商业或者非法用途

一、前言

大家在做selenium测试时，是否会遇到在网页上需要执行一些鼠标操作，如右键选择一些设置，或者双击点赞，双击放到屏幕等等，但是在日常使用中还是习惯使用selenium的基本库，而忽略了其实selenium也是有提供了丰富的鼠标操作库，通过动作链 (ActionChains)就可以实现上述操作。

二、Selenium 4 的鼠标操作

我们今天用到的是selenium内的动作链 (ActionChains)，可以模拟鼠标操作，比如左键单击，右键单击、双击、长按等等。但是看名字可以知道，动作链就是将动作行程一整个链条去执行，通过在操作后面加上.perform()去实行操作内容，我们可以通过这样调用：

#创建动作链实例
chains = ActionChains(driver)
#需要操作的元素
menu = driver.find_element_by_css_selector(".nav")
hidden_submenu = driver.find_element_by_css_selector(".nav #submenu1")
#执行动作链
chains .move_to_element(menu).click(hidden_submenu).perform()

也可以通过这样调用：

#创建动作链实例
chains = ActionChains(driver)
#需要操作的元素
menu = driver.find_element_by_css_selector(".nav")
hidden_submenu = driver.find_element_by_css_selector(".nav #submenu1")
#执行动作链
chains .move_to_element(menu)
chains .click(hidden_submenu)
chains .perform()

但是需要注意的是，.perform()是执行对应所创建的动作链实例内所写的操作，如果有多个操作，且中间会穿插其他selenium操作的话，需要在每次执行.perform()操作之前，重新创建动作链实例，否则会重复执行上一个动作链操作。如：

#创建动作链实例
chains = ActionChains(driver)
#需要操作的元素
menu = driver.find_element_by_css_selector(".nav")
hidden_submenu = driver.find_element_by_css_selector(".nav #submenu1")
#执行第一次动作链
chains .move_to_element(menu)
chains .perform()

print(driver.find_element_by_name('t2').get_attribute('value'))
driver.find_element_by_name('t2').click()
....
#重新创建动作链实例
chains = ActionChains(driver)
#执行第二次的动作链
chains .click(hidden_submenu)
chains .perform()

下面我们就来详细看一下每个操作具体的使用方式吧。

2.1 右键

常规在做selenium测试的时候，我们经常使用到的是左键单击，但有时候我们会需要使用到右键点击，唤出对应的相关设置进行使用，可以这时就可以参考下述的代码

#引入对应的动作库
from selenium.webdriver import ActionChains

#创建动作库实例
chains = ActionChains(driver)

#确认需要右键的元素
temp = driver.find_element(By.XPATH,"//video[@crossorigin='anonymous']")

#实行右键点击
chains.context_click(temp).perform()

2.2 双击

在web端测试时也会经常遇到双击放大视频画面、双击跳转链接等等的情况，这样我们可以参考下述的代码

#引入对应的动作库
from selenium.webdriver import ActionChains

#创建动作库实例
chains = ActionChains(driver)

#确认需要双击的元素
temp = driver.find_element(By.XPATH,"//video[@crossorigin='anonymous']")

#实行右键点击
chains.double_click(temp).perform()

2.3 长按

上面介绍的都是短按的情况，像日常刷b站视频的时候，也会有出现点赞长按三连的操作，或者是其他长按收藏，长按分享等等的操作，我们都可以参考下述的代码

#引入对应的动作库
from selenium.webdriver import ActionChains

#创建动作库实例
chains = ActionChains(driver)

#确认需要双击的元素
temp = driver.find_element(By.XPATH,"//video[@crossorigin='anonymous']")

#实行双击
chains.click_and_hold(temp).perform()

2.4 拖动

在web端上拖动操作不是特别常见，但是在动作库中，还是提供了对应的操作函数，具体使用代码可以参考下方

#引入对应的动作库
from selenium.webdriver import ActionChains

#创建动作库实例
chains = ActionChains(driver)

#确认需要拖动的两个元素
d1 = driver.find_element(By.ID,"dragger")
d2 = driver.find_element(By.XPATH,"/html/body/div[2]")

#实行将d1拖动到d2
chains.drag_and_drop(d1, d2).perform()

三、实际使用案例

通过上述的操作讲解，我们可以用一个小小的使用案例去看看整体的跑测效果是怎么样的。可以看到右键操作、长按、拖拽等效果都是满足于我们日常测试的情况的。

参考代码：

# -*- encoding=utf8 -*-
__author__ = "Airtest"

from airtest.core.api import *
from airtest_selenium.proxy import WebChrome
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.webdriver import ActionChains
from selenium import webdriver

# 设置Chrome选项
chrome_options = Options()
chrome_options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")


# 连接到已打开的Chrome浏览器
driver = webdriver.Chrome(options=chrome_options)

#创建链式实例
chains = ActionChains(driver)

video  = driver.find_element(By.XPATH,"//video[@crossorigin='anonymous']")
good = driver.find_element(By.XPATH,"//div[@title='点赞（Q）']")

#实行右键点击
chains.context_click(video).perform()
#点击复制视频链接
driver.find_element(By.XPATH,"//li[@data-action='copyLink']").click()
sleep(1.0)

#更新链式实例
chains = ActionChains(driver)

#实行长按点赞操作
chains.click_and_hold(good).perform()
sleep(3.0)

chains = ActionChains(driver)

#通过双击放大视频屏幕
chains.double_click(video).perform()
chains = ActionChains(driver)
sleep(3.0)


#跳转拖拽演示网站
driver.get("https://sahitest.com/demo/dragDropMooTools.htm")

sleep(3.0)

d1 = driver.find_element(By.ID,"dragger")
d2 = driver.find_element(By.XPATH,"/html/body/div[2]")

#实行拖拽操作
chains.drag_and_drop(d1, d2).perform()

四、小结

本周我们介绍了selenium的右键单击、长按、双击、拖拽的操作内容，也引入了selenium的动作链行为库，还有更多的方法可以自己去探索一下，根据自己的需求完善自己的脚本。

如果大家在使用过程中有一些新的使用方式或者遇到了问题，又或者有任何想要深入了解的知识点，欢迎在官方交流群（526033840）里告诉我们或者提交issue。

---

AirtestIDE下载：airtest.netease.com/
Airtest 教程官网：airtest.doc.io.netease.com/
搭建企业私有云服务：airlab.163.com/b2b

官方答疑 Q 群：526033840