Selenium实现滑动滑块验证码验证
你是否在自动化测试中被滑块验证码“挡住了去路”？
随着反爬虫技术的普及，滑动滑块验证码越来越多地出现在各大网站，防止自动化脚本的访问。这给测试人员带来了新的挑战——如何让自动化测试程序通过这种验证？今天我们就来探讨使用Selenium实现滑动滑块验证码验证的技巧与实战方法。
在部分的登录中有滑动验证码的验证，由于滑动验证码的缺块是随机的就导致实现起来比较困难！
滑块验证码的原理
滑块验证码要求用户通过拖动滑块完成验证，确认操作的是一个真实的人类用户而非自动程序。它通常通过监控滑块的拖动轨迹、速度等参数来区分人机操作。
-
模板匹配
通过openCV分析两个图片的相似度，获取两个相似度很高图片的坐标，从而计算两个图片的距离。
-
轮廓检测
通过openCV进行轮廓检测，即在大图片中找到缺口位置的坐标，然后计算小图片到缺口位置的距离。
python语言
这里不再赘述，本篇主要还是使用python技术来实现。
selenium库
selenium是一个用于测试Web应用程序的Python库。它可以模拟用户在浏览器中的操作，例如点击、填写表单等。Selenium可以与各种浏览器交互，并提供了丰富的API来控制浏览器行为和获取网页内容。
urllib库
urllib是Python标准库之一，用于处理URL相关的操作。它包含多个子模块，例如
-
urllib.request用于发送HTTP请求并获取响应
-
urllib.parse用于解析和构建URL
-
urllib.error用于处理URL相关的错误等
-
urllib常用于网络数据抓取、访问API等任务。
cv2库
cv2是OpenCV（Open Source Computer Vision）库的Python绑定。OpenCV是一个广泛使用的计算机视觉库，提供了丰富的图像处理和计算机视觉算法。cv2库为Python开发者提供了对OpenCV功能的访问，可以进行图像加载、处理、分析以及计算机视觉任务，如人脸识别、目标检测等。
安装注意事项：
如果直接通过pip install cv2安装报错的话，请使用下面的语句安装：pip install opencv-python
random库
random是Python的随机数生成库。它提供了多种随机数生成函数，包括生成伪随机数的函数和从序列中随机选择元素的函数。random库可用于模拟、游戏开发、密码学等领域，以及各种需要随机性的应用程序。
re库
re是Python的正则表达式模块，用于对字符串进行模式匹配和处理。正则表达式是一种强大的文本匹配工具，可以用来搜索、替换、提取特定模式的字符串。re库提供了函数和方法来编译正则表达式、执行匹配操作，并返回匹配结果，使得处理文本数据更加灵活和高效
time库
time库是处理时间的标准库，提供了获取系统时间、格式化输出、系统级精确计时等功能。
打开登录页切换密码登录
第一步，打开登录页面，并点击页面上的“密码登录”：
代码：
driver = webdriver.Edge() # 实例化驱动对象 driver.maximize_window() # 窗口最大化 driver.get("https://accounts.douban.com/passport/login") # 打开豆瓣登录页面 driver.implicitly_wait(5) # 隐式等待5秒 element = driver.find_element(By.XPATH, "//li[text()='密码登录']") # 定位【密码登录】元素 element.click() # 点击确认
输账密点击登录
第二步，输入账号密码，并点击“登录豆瓣”按钮：
代码：
element = driver.find_element(By.XPATH, "//input[@id='username']") # 定位元素 element.send_keys("18230630095") # 输入内容 element = driver.find_element(By.XPATH, "//input[@id='password']") # 定位元素 element.send_keys("123456") # 输入内容 element = driver.find_element(By.XPATH, "//a[text()='登录豆瓣']") # 定位元素 element.click() # 点击按钮
切换焦点并下载验证图片
将焦点切换至滑块验证区域，并下载加载好的滑块验证背景图片。
点击登录按钮后，就会出现滑块验证区域，这是一个新增的frame区域，此时我们需要将切换的焦点从主页面转换到这个frame区域上：
代码：
driver.implicitly_wait(5) # 隐式等待5秒 driver.switch_to.frame("tcaptcha_iframe_dy") # 切换到frame区域
然后我们需要获取整个需要对其的大图片，获取其路径并下载到本地，准备进行读取验证，下载图片效果：
代码：
element = driver.find_element(By.XPATH, "//div[@id='slideBg']") # 定位元素 s = element.get_attribute("style") # 获取元素值 p = 'background-image: url((.*)\);' # 正则表达式 \\. 表示转义 img1 = re.findall(p, s, re.S)[0] # re.S表示点号匹配任意字符，包括换行符 print("滑块验证图片下载路径:", img1) # 打印结果 cs.add_img(img1) # 下载图片
拖动滑块至缺口处
我们接下来要做的，是将小拼图图片，移动到缺口处：
我们需要获取小图片到缺口处的实际距离，一般用到两种方法。
-
第一种方法是模板匹配，通过openCV分析两个图片的相似度，获取两个相似度很高图片的坐标，从而计算两个图片的距离。
-
第二种方法是轮廓检测，通过openCV进行轮廓检测，即在大图片中找到缺口位置的坐标，然后计算小图片到缺口位置的距离。
这里因为我们无法单独获取小拼图的单独图片，所以不好使用模板匹配的方法，所以我们选择使用第二种轮廓检测的方法。
（1）得到缺口轮廓位置信息
首先我们计算一下缺口的坐标及面积大概有多大，使用PhotoShop打开下载的图片，单独将缺口按照正方形的尺寸抠出来，发现其长宽各是80像素：
所以这个封闭矩形的面积范围大概是在80*80=6400像素左右。周长是80*4=320像素。但是现实中这里是有缺口的，不是一个完整的图片，所以我们需要给它一定的误差范围，这里我们暂定目标区域面积为上下百分之四，周长为上下百分之四。
然后我们将计算距离：
# 实例化一个类对象 cs = CrackSlider() # 准备方法需要的参数 # 1、找到滑动按钮位置 element = driver.find_element(By.XPATH, "/div[@class='tc-fg-item tc-slider-normal']") # 2、图片位置（相对当前项目） img = 'img/img1.jpg' # 3、缺口像素长宽（长宽必须一致） gap_wide = 80 # 4、web图片宽度 web_wide = 340 # 5、原图片宽度 raw_wide = 672 # 调用方法获取返回的移动距离 dis = cs.get_pos(element, img, gap_wide, web_wide, raw_wide) # 打印一下移动距离 print("dis=", dis)
执行结果：
生成的目标区域画红框的计算图片：
好了，到此为止我们获取到了一个重要的数据，就是缺口的位置信息。
（2）匹配小滑块元素
得到小滑块元素，让其移动位置到上面计算的距离。
注意：
由于大部分网站有检测真人操作的逻辑，所以我们这里要模拟真人进行移动操作，不能一下移动到目标点，需要一点一点的移动。
# 调用方法移动滑块致缺口位置 # driver 浏览器驱动对象 # element 元素位置对象 # dis 移动距离 cs.slowly(driver, element, dis) # 整体等待5秒看结果 time.sleep(5) # 关闭浏览器 driver.quit()
执行结果
浏览器获取元素
-
打开F12
-
选择元素
-
复制元素XPath
-
检验元素XPath唯一性
Ctrl+F唤起搜索
输入复制的XPath
查看是否唯一
