软件测试论坛 › [Selenium] › 分享Selenium鼠标操作和JS代码执行

lsekfe 发表于 2023-6-2 11:31:01

分享Selenium鼠标操作和JS代码执行

一、鼠标操作
　　鼠标是通过底层接口执行的，需要调用ActionChains对象来执行对应的方法。
　　1.1 鼠标操作实现方式
　　在selenium中将操作鼠标的方法封装在ActionChains类中，实例化对象action=ActionChains(driver)
　　context_click(element)         右击 --> 模拟鼠标右键点击效果
　　double_click(element)            双击 --> 模拟鼠标双击效果
　　drag_and_drop(source, target)    拖动 --> 模拟鼠标拖动效果
　　move_to_element(element)         悬停 --> 模拟鼠标悬停效果
　　perform()                        执行 --> 此方法用来执行以上所有鼠标操作


　　selenium提供鼠标操作的方法及步骤：
　　·需要导入ActionChains类
　　· 通过ActionChains实例化鼠标对象 action = ActionChains(driver) # driver表示的是浏览器驱动对象
　　· 调用鼠标的事件方法
　　· 调用鼠标的执行方法 action.perform()
　　1.2 clickAndHold单击（不释放）
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # click_and_hold 点击且不松开
　　    div = driver.find_element_by_xpath('//div[@onmousedown="mDown(this)"]')
　　    webdriver.ActionChains(driver).click_and_hold(div).perform()
　　    time.sleep(2)


　　1.3context_click单击
　　import time
　　from selenium import webdriver
　　from selenium.webdriver import ActionChains
　　dr = webdriver.Chrome()
　　url = r'http://www.baidu.com'
　　dr.get(url)
　　ipt = dr.find_element_by_id('kw')
　　action = ActionChains(dr)
　　action.context_click(ipt) # 在输入框中右键操作
　　action.perform()
　　time.sleep(3)
　　dr.quit()


　　1.4 double_click双击
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # double_click双击
　　    button = driver.find_element_by_xpath('//button[@ondblclick]')
　　    webdriver.ActionChains(driver).double_click(button).perform()
　　    time.sleep(2)


　　1.5 drag_and_drop拖动
　　此方法首先在源元素上单击并按住，然后移动到目标元素的位置后释放鼠标.
　　调用鼠标拖动事件方法 action.drag_and_drop(source, target) # source表示的是源元素，被拖动的元素， target表示是目标源，也就是要拖动到哪个元素上。
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    div1 = driver.find_element_by_id('draggable')
　　    div2 = driver.find_element_by_id('droppable')
　　    webdriver.ActionChains(driver).drag_and_drop(div1, div2).perform()
　　    time.sleep(3)


　　1.6 move_to_element悬停
　　此方法将鼠标移到元素的中间. 执行此操作时, 该元素也会滚动到视图中（悬停）
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # move_to_element
　　    div = WebDriverWait(driver,timeout=3).until(EC.visibility_of_element_located(('xpath','//div[@onmouseover="mOver(this)"]')))
　　    # 移动到
　　    # action=webdriver.ActionChains(driver)
　　    # action.move_to_element(div).perform()
　　    webdriver.ActionChains(driver).move_to_element(div).perform()
　　    time.sleep(2)


　　1.7 drag_and_drop_by_offset单元素拖动
　　action.drag_and_drop_by_offset(element, x, y) x, y 表示的元素拖动时横向和纵向移动的距离，单位为像素， element表示的是元素对象 移动的像素最终要比在web页面中看到的移动像素值要大，最好大于5个像素或者10像素
　　import time
　　from selenium import webdriver
　　from selenium.webdriver import ActionChains
　　dr = webdriver.Chrome()
　　url =
　　r'file:///C:/Users/tang/Desktop/pagetest/%E9%AA%8C%E8%AF%81%E7%A0%81/index.html'
　　dr.get(url)
　　h = dr.find_element_by_css_selector('.handler')
　　action = ActionChains(dr)
　　action.drag_and_drop_by_offset(h, 260, 0) # 单元素拖拽 滑动验证
　　action.perform()
　　time.sleep(5)
　　dr.quit()


　　1.8 moveByOffset:
　　此方法将鼠标从其当前位置(或0,0)移动给定的偏移量. 如果坐标在视图窗口之外, 则鼠标最终将在浏览器窗口之外.
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # 移开 move_by_offset
　　    webdriver.ActionChains(driver).move_by_offset(xoffset=500,yoffset=500).perform()
　　    time.sleep(2)


　　1.9 release（释放）
　　此操作将释放按下的鼠标左键. 如果WebElement转移了, 它将释放给定WebElement上按下的鼠标左键
　　import time
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    # 打开本地文件中的html文件
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # release   松开鼠标
　　    webdriver.ActionChains(driver).release(div).perform()
　　    time.sleep(2)


　　1.10鼠标链式操作
　　from selenium import webdriver
　　from selenium.webdriver.support.ui import WebDriverWait
　　from selenium.webdriver.support import expected_conditions as EC

　　with webdriver.Chrome() as driver:
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/action.html')

　　    # 创建一个动作链
　　    action=webdriver.ActionChains(driver)

　　    # move_to_element
　　    div1 = WebDriverWait(driver, timeout=3).until(
　　      EC.visibility_of_element_located(('xpath', '//div[@onmouseover="mOver(this)"]')))
　　    # 指定等待时间为2s
　　    action.move_to_element(div1).pause(2)

　　    # 移开 move_by_offset
　　    action.move_by_offset(xoffset=500, yoffset=500).pause(2)

　　    # click_and_hold 点击且不松开
　　    div2 = driver.find_element_by_xpath('//div[@onmousedown="mDown(this)"]')
　　    action.click_and_hold(div2).pause(2)

　　    # release   松开鼠标
　　    action.release(div2).pause(2)


　　    # 执行动作链
　　    action.perform()



　　    # 以上代码可重合在一起执行
　　    action.move_to_element(div1).pause(2).move_by_offset(xoffset=500, yoffset=500).pause(2).click_and_hold(div2).pause(2).release(div2).pause(2).perform()


　　二、执行js代码
　　selenium执行js有几个方法，通常使用 execute_script方法。
　　2.1 页面滚动指定距离
　　import time
　　from selenium import webdriver

　　with webdriver.Chrome() as driver:
　　    driver.get('https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111')
　　    # 滚动100px 100表示滚动条距离页面顶部100像素0是x方向，100是y方向
　　    driver.execute_script("window.scrollTo(0,100)")
　　    time.sleep(1)
　　    # 200表示滚动条距离页面顶部200像素
　　    driver.execute_script("window.scrollTo(0,200)")
　　    time.sleep(1)
　　    driver.execute_script("window.scrollTo(0,300)")
　　    time.sleep(3)
　　    # 移动到底部
　　    driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")
　　    time.sleep(3)
　　    # 移动到顶部
　　    driver.execute_script("window.scrollTo(0,0)")
　　    time.sleep(3)


　　2.2 页面滚动至指定位置
　　执行js时，可以传递参数给js脚本。
　　案例：打开页面，滚动到指定的元素可见。
　　import time
　　from selenium import webdriver

　　with webdriver.Chrome(executable_path='./chromedriver') as driver:
　　    driver.get('file:///Users/superfan/工作/myproject/study/po/scroll.html')
　　    time.sleep(2)
　　    div = driver.find_element_by_xpath('//div')
　　    # 移动到元素的底端与当前窗口的底部对齐
　　    driver.execute_script("arguments.scrollIntoView(false);", div)
　　    # arguments表示传入第一个值div，arguments表示传入第一个值div2，
　　    # driver.execute_script("arguments.scrollIntoView(false);alert(arguments);", div,1)
　　    time.sleep(2)
　　    # 移动到元素的顶端与当前窗口的顶端对齐
　　    driver.execute_script("arguments.scrollIntoView();", div)
　　    time.sleep(2)

查看完整版本: 分享Selenium鼠标操作和JS代码执行