Selenium 模拟点击拖拽

本质上是调用鼠标模拟点击的模块ActionChains，实现点击不松开->模拟移动鼠标->松开鼠标的这么一个操作。这里依然以迅捷图片作为示范

1. 打开网站并上传图片(index)

依然使用selenium打开网站，相比之前要多引入ActionChains模块，用来模拟点击。

from selenium import webdriver
# 模拟点击的模块
from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Firefox()
# 使用浏览器访问网址
browser.get('http://app.xunjietupian.com/crop')

接下来手动上传图片，自动上传图片的的教程可以看我之前写的博客《python+Selenium+AutoIT上传本地资源》
现在的页面应该是这个样子(这是一个锚点)

2. 实现模拟点击

这一步的作用实际上是为了定位，用来查看当前鼠标在哪个位置。这里分为两步：

1. 获取图片所在的元素
2. 执行点击

第一步：通过阅读源码，可以得到该元素的classname，直接获取该对象

canvas = browser.find_element_by_class_name('upper-canvas')

第二步：使用下列函数进行模拟点击：

# 首先设置点击的坐标
x = 300
y = 300
# 执行点击操作
ActionChains(browser).move_to_element_with_offset(canvas,x,y).context_click().perform()

• move_to_element_with_offset指的是鼠标在canvas(画布)上移动到(x,y)的位置
• context_click指的是右键点击
• perform是执行前面的所有操作

就可以得到如下结果：

弹出菜单的位置就是坐标为(300,300)的那个点了。如果要用鼠标左键的话，将context_click修改为click就可以了。

3. 实现模拟拖拽

除了context_click、click之外，还有一个函数click_and_hold，意思是点击后不松开，这也就是要实现截图的主要函数了。接下来的代码分成三个步：

1. 点击并不松开
2. 移动鼠标
3. 松开鼠标

第一步：将点击函数替换成click_and_hold即可

ActionChains(browser).move_to_element_with_offset(canvas,200,200).click_and_hold().perform()

第二步：执行move_by_offset函数，将鼠标在之前的基础上移动xoffset,yoffset的距离

ActionChains(browser).move_by_offset(xoffset=300,yoffset=200).perform()

第三步：执行release即可

ActionChains(browser).release().perform()

顺序执行后，就可以看到裁剪框出现了。

4. 完整代码

from selenium import webdriver
import os
import time
from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Firefox()
# 使用浏览器访问网址
browser.get('http://app.xunjietupian.com/crop')

从这里开始手动上传图片，达到这样的效果
接下来执行以下代码

canvas = browser.find_element_by_class_name('upper-canvas ') ActionChains(browser).move_to_element_with_offset(canvas,200,200).click_and_hold().perform()
ActionChains(browser).move_by_offset(xoffset=300,yoffset=200).perform()
ActionChains(browser).release().perform()

当当~结束