selenium之ActionChains

ActionChains

UI自动化测试过程中，经常遇到那种，需要鼠标悬浮后，要操作的才会元素出现的这种场景，那么就要模拟鼠标悬浮到某个位置，做一系列的连贯操作，Selenium给我们提供了ActionChains模块。

实际上ActionChains这个模块的实现的核心思想就是，当你调用ActionChains的方法时，不会立即执行，而是会将所有的操作按顺序存放在一个List里，当你调用perform()方法时，队列中的时间会依次执行。

ActionChains方法列表

click(on_element=None) ——单击鼠标左键

click_and_hold(on_element=None) ——点击鼠标左键，不松开

context_click(on_element=None) ——点击鼠标右键

double_click(on_element=None) ——双击鼠标左键

drag_and_drop(source, target) ——拖拽到某个元素然后松开

drag_and_drop_by_offset(source, xoffset, yoffset) ——拖拽到某个坐标然后松开

key_down(value, element=None) ——按下某个键盘上的键

key_up(value, element=None) ——松开某个键

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

move_to_element(to_element) ——鼠标移动到某个元素

move_to_element_with_offset(to_element, xoffset, yoffset) ——移动到距某个元素（左上角坐标）多少距离的位置

perform() ——执行链中的所有动作

release(on_element=None) ——在某个元素位置松开鼠标左键

send_keys(*keys_to_send) ——发送某个键到当前焦点的元素

send_keys_to_element(element, *keys_to_send) ——发送某个键到指定元素

move_to_element  移动

# 鼠标移动到某一个元素上,结束elementObj
ActionChains(driver).move_to_element(e)
 
# 鼠标移动到制定的坐标上，参数接受x，y
ActionChains(driver).move_by_offset(e['x'],e['y'])
 
例：
driver = webdriver.Chrome()
driver.maximize_window()
driver.get('http://ui.imdsx.cn/uitester/')
time.sleep(2)
driver.execute_script('window.scrollTo(0,0);')
time.sleep(1)
a = driver.find_element_by_css_selector('#a')  #定位元素
ActionChains(driver).move_to_element(a).perform()   #鼠标移动到元素上

click  点击 

# 单击事件,可接受elementObj
ActionChains(driver).click()
 
# 双击事件,可接受elementObj
ActionChains(driver).double_click()
 
# 点击鼠标右键
ActionChains(driver).context_click()
 
# 点击某个元素不松开,接收elementObj
ActionChains(driver).click_and_hold()
 
# # 某个元素上松开鼠标左键,接收elementObj
ActionChains(driver).release()

drag_and_drop  拖拽

# 将source元素拖放至target元素处，参数为两个elementObj
ActionChains(driver).drag_and_drop(source=source,target=target)
 
# 将一个source元素 拖动到针对source坐上角坐在的x y处 可存在负宽度的情况和负高度的情况
ActionChains(driver).drag_and_drop_by_offset(source, x, y)
 
# 这种也是拖拽的一种方式，都是以源元素的左上角为基准，移动坐标
ActionChains(driver).click_and_hold(dom).move_by_offset(169,188).release().perform()

举个例子

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('http://ui.imdsx.cn/uitester/')

driver.execute_script('window.scrollTo(0,0);') 
driver.maximize_window() 
time.sleep(1)

# 实现鼠标移动上去，显示点击按钮，然后单击
# 第一种 连贯操作
from selenium.webdriver.common.action_chains import ActionChains

element = driver.find_element_by_css_selector('#a')
element2 = driver.find_element_by_css_selector('#dis1')

ActionChains(driver).move_to_element(element).click(element2).perform() #将鼠标移动到元素上，再进行点击元素，perform最后执行整个过程
driver.switch_to.alert.accept() #弹框确认



# 第二种js实现
#修改元素的dispaly属性，使其显示出来，再点击
js = 'document.getElementById("dis1").style.display = ""'; 
driver.execute_script(js)

time.sleep(2)
driver.find_element_by_css_selector('#dis1').click()

另一个例子

# 拼图游戏
from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('http://ui.imdsx.cn/move/')

driver.execute_script('window.scrollTo(0,0);') 
driver.maximize_window()
time.sleep(1)

from selenium.webdriver.common.action_chains import ActionChains
s1 = driver.find_element_by_css_selector('#dragger')
s2 = driver.find_element_by_css_selector('#dragger1')
s3 = driver.find_element_by_css_selector('#dragger2')
s4 = driver.find_element_by_css_selector('#dragger3')
t1 = driver.find_element_by_css_selector('#i1')
t2 = driver.find_element_by_css_selector('#i2')
t3 = driver.find_element_by_css_selector('#i3')
t4 = driver.find_element_by_css_selector('#i4')


# 实例化一个类，然后往list里面添加，最后再执行
ActionChains(driver).drag_and_drop(s1,t1).drag_and_drop(s2,t2).drag_and_drop(s3,t3).drag_and_drop(s4,t4).perform()