6.selenium鼠标操作和js代码执行

一、鼠标操作

鼠标是通过底层接口执行的，需要调用ActionChains对象来执行对应的方法

1.1 鼠标操作实现方式

在selenium中将操作鼠标的方法封装在ActionChains类中，实例化对象action=ActionChains(driver)

1. context_click(element)           右击 --> 模拟鼠标右键点击效果
2. double_click(element)            双击 --> 模拟鼠标双击效果
3. drag_and_drop(source, target)    拖动 --> 模拟鼠标拖动效果
4. move_to_element(element)         悬停 --> 模拟鼠标悬停效果
5. 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.4 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.5 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.6 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.7 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.8 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.9鼠标链式操作

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[0].scrollIntoView(false);", div)
    # arguments[0]表示传入第一个值div，arguments[1]表示传入第一个值div2，
    # driver.execute_script("arguments[0].scrollIntoView(false);alert(arguments[1]);", div,1)
    time.sleep(2)
    # 移动到元素的顶端与当前窗口的顶端对齐
    driver.execute_script("arguments[0].scrollIntoView();", div)
    time.sleep(2)