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