Selenium自动化时滑块验证处理

Posted 2023-03-16

参考技术A Selenium中对滑块的操作基本是采用元素拖拽的方式，而这种方式需要用到Selenium的Actionchains功能模块的drag_and_drop_by_offset方法

drag_and_drop_by_offset（source,xoffset,yoffset）

source：鼠标拖动的原始元素

xoffset：鼠标把元素拖动到另一个位置的x坐标

yoffset：鼠标把元素拖动到另一个位置的y坐标

思路 ：1. 获取滑块元素，求出滑块的长度和宽度 

              获取滑块区域元素，求出其长度和宽度

           2. 使用drag_and_drop_by_offset方法移动滑块到滑块区域的最大长度及宽度

以携程网登录页面举例

"""实现携程网站的登录功能"""

from seleniumimport webdriver

import time

from selenium.webdriver.common.action_chainsimport ActionChains

driver = webdriver.Chrome("C:/Users/Administrator/PycharmProjects/untitled/chromedriver.exe")

driver.implicitly_wait(30)

driver.get("https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index")

driver.maximize_window()

# 点击登录

driver.find_element_by_css_selector("#nav-bar-set-login > a > span").click()

# 登录账号

account =123

driver.find_element_by_id('nloginname').send_keys(account)

# 登录密码

password ="***"

driver.find_element_by_id('npwd').send_keys(password)

# 拖动滑块

slider = driver.find_element_by_css_selector("#sliderddnormal > div.cpt-drop-box > div.cpt-drop-btn")

# print(slider.size['width'])    方便理解，打印出来40px

# print(slider.size['height'])   打印出来40px

slider_area = driver.find_element_by_css_selector("#sliderddnormal > div.cpt-drop-box > div.cpt-bg-bar")

# print(slider_area.size['width'])  打印出来288px

# print(slider_area.size['height'])  打印出来40px

ActionChains(driver).drag_and_drop_by_offset(slider,slider_area.size['width'],slider.size['height']).perform()

time.sleep(3)

python+Selenium之自动滑块破解滑块验证码

参考技术A 头大系列：以虎嗅网注册页面的滑块验证码为例：

打开浏览器调试工具，点击左上角按钮进行页面元素跟踪，然后将鼠标移动到滑块验证码的图像上，就发现问题了，这也是关键所在：

验证码的图像是由很多个这样的10x58（宽10高58）的小方块拼接而成的。再检查一下元素标签，发现每一个小方块的元素标签里面都有background-image：url以及background-position这两个关键的信息。

既然是url，就不妨打开链接来观察。发现打开的链接是一张图片，但却是一张乱七八糟的图片。

得到这张乱七八糟的图片，第一感觉是重影。试猜想，会不会将每一个小方块的url链接图片都重叠在一起或拼接在一起就能组成我们所看到的验证码图片。

但经打开每一张图片发现，每个小方块后面的url链接的图片是一样的。
这就说明不可能是将图片进行重叠或拼接了。那就有可能是另外一种可能：将这张完整的验证码图片的部分区域切割然后打乱排序，形成一张新的图片，而这张新的图片就是我们现在所看到的乱七八糟的图片。

再观察发现，每个小方块后面还有background-position这个重要的信息。发现里面正是-157px -58px; -145px -58px;这种形式，是不是很像坐标的形式了。而进一步猜想，将我们刚刚的乱七八糟的图按每一个小方块的坐标进行切割，然后再进行排序，是不是就能得到原来完整的验证码图片了。

进行实践：
运用PIL模块的切割crop（）以及粘贴paste（），重新将图片进行整合。效果神奇出现：

先不管其他了的。先把两张完整的图片拼接出来再进行下一步吧。
按照相同的方法，找到页面元素中鼠标点击后的出现缺口的验证码图片位置，找到缺口图片乱七八糟的url链接。

通过相同方法拼接：

已经得到两张关键的验证码图片，那接下来就是PIL大显身手的时候了，对比两张图片的像素点，缺口位置明显黑了一块，也就是RGB三色必然与周围的像素RGB三色差别明显。

将两张图片的每个像素点进行遍历对比，RGB三色任意一色差距大于一定的范围即视为是滑块的缺口。

找到缺口之后返回遍历的像素点的x坐标值（因为滑块只能X轴左右移动，所以y轴可以不需要用到），而x坐标就是滑块需要移动的距离。

完美拼接。但被吃了，也是美中不足：
快速，匀速，准确，所谓的“快，准，稳”，一样不差。
那就认定你是机器人来滑动的吧，把你吃掉！