Web自动化---解决登录页面随机验证码问题
一、抛出问题
在日常的测试工作中，遇到了这样一个登录页面，如下图：
像我们之前做过UI自动化的同学就知道，自动输入账号和密码，这个简单，但是怎么样来识别验证码呢？验证码的形式有多种，有纯数字的，纯字母的，有字母和数字的，有计算的等等；而且每次都是随机出现的，这种情况我们怎么来识别呢？如何解决这个难题？
二、分析问题
在测试环境中，遇到这种情况，分析了一下，大概有以下几种思路：
1、 让开发在测试环境中，去掉验证码；
2、 测试环境中，设置一个万能的验证码；
3、 通过cookie绕过登录；
4、 通过自动识别技术，来识别验证码；
对于以上方法，前三种都不太好方便，需要依赖上游，所以，我们尽可能的自己单枪匹马去解决。现在主要来讲第4种方法。
自动识别技术，其实就是通过第三方网站的力量来实现快速识别，花1块钱，就能用500次，有现成的东西，直接借助打码平台的自动识别技术使用就行，少喝一瓶矿泉水的钱，就能帮我们解决大问题。我们这里以某一个打码平台为示例来讲解：
百度搜索：图鉴打码平台，找到结果，并点击进入。
点击开发文档，可以看到导航条可以用多种编程语言将其写好了，这些都是可以直接拿来使用的；我们这里以python语言为例，借助使用一下。但是，需要花钱，也就充值1块钱，就可以用500次。为了，第一步就是要在这个打码平台上进行注册，登录，再充值1元即可。有以下重要信息需要用到：你的账号和密码。
接下来，我们对这段python代码来简单分析一下：
比如，你的验证码是纯数字，你就传1；你的验证码是纯英文，你就传2；如果你的验证码是数字字母混合的，那就传3；像我遇到的，是计算题验证码，我就传了11。
=================================================================
那么，我们先来写一下思路：
# 第一步：打开浏览器，访问登录页面
# 1.1启动浏览器
# 1.2 打开后台监控平台的登录页面
# 第二步：输入账号、密码
# 输入账号
# 输入密码
# 第三步：识别验证码图片中的内容
# 3.1截取网站中的验证码图片
# 3.1.1、对当前网页进行截图,并保存为图片
# 3.1.2 定位页面的图片元素，
# 3.1.3 获取图片在页面中的坐标位置(此处计数位置要考虑屏幕的缩放比例)
# 验证码左边界位置
# 验证码上边界位置
# 验证码右边界位置
# 验证码下边界位置
# 3.1.4 通过验证码的位置进行截图
# 3.1.5 保存截取下来的验证码为code.png的图片
# 3.2 调用验证码识别的方法去识别
# 第四步：输入识别之后的结果，点击登录
# 4.1 输入计算结果之后的验证码
# 4.2点击登录按钮
# 第五步：关闭浏览器
======================================================================
所以，重点就在第三步，尤其要注意一个细节，就是屏幕缩放比。
如果你忘记这里，有可能对验证码截图截不到。
接下来上代码
from selenium import webdriver import base64 import json import requests from PIL import Image # 64位编码流 def base64_api(uname, pwd, img, typeid): with open(img, 'rb') as f: base64_data = base64.b64encode(f.read()) b64 = base64_data.decode() data = {"username": uname, "password": pwd, "typeid": typeid, "image": b64} result = json.loads(requests.post("http://api.ttshitu.com/predict", json=data).text) if result['success']: return result["data"]["result"] else: return result["message"] # 第一步：打开浏览器，访问登录页面 # 1.1启动浏览器 driver = webdriver.Chrome() # 1.2 打开后台监控平台的登录页面 driver.get('') # 第二步：输入账号、密码 # 输入账号 driver.find_element_by_xpath('//input[@placeholder="账号"]').send_keys('') # 输入密码 driver.find_element_by_xpath('//input[@placeholder="密码"]').send_keys('') # 第三步：识别验证码图片中的内容 # 3.1截取网站中的验证码图片 # 3.1.1、对当前网页进行截图,并保存为page.png的图片 driver.save_screenshot('page.png') # 3.1.2 定位页面的图片元素， pic_ele = driver.find_element_by_xpath('//div//img') # 3.1.3 获取图片在页面中的坐标位置(此处计数位置要考虑屏幕的缩放比例) rec = pic_ele.rect # 验证码左边界位置 left = rec['x'] * 1.50 # 验证码上边界位置 top = rec['y'] * 1.50 # 验证码右边界位置 right = (rec['x'] + rec['width']) * 1.50 # 验证码下边界位置 button = (rec['y'] + rec['height']) * 1.50 location = (left, top, right, button) # 3.1.4通过验证码的位置进行截图 page = Image.open('page.png') code_pic = page.crop(location) # 3.1.5 保存截取下来的验证码为code.png的图片 code_pic.save('code.png') # 3.2 调用验证码识别的方法去识别 result = base64_api(uname='', pwd='', img='code.png', typeid=11) print("识别的结果是：", result) # 第四步：输入识别之后的结果，点击登录 # 4.1 输入计算结果之后的验证码 driver.find_element_by_xpath('//input[@placeholder="验证码"]').send_keys(result) # 4.2点击登录按钮 driver.find_element_by_xpath('//button[@type="button"]').click()
对代码进行讲解和注意的细节。这个脚本是可以直接复制粘贴拿过去用的
三、总结思路
结尾要简单聊两句：首先，这个打码平台不止一个，还有其他的打码平台的也可以借助使用，也会有类似的开发文档代码，他山之石，可以攻玉，只需花1块钱就可以，任何一个打码平台都行。至于开发文档的语言，也是可以任选的，有的web自动化是python写的，有的是java写的，甚至有的是javascript写的，都行，自由选择即可。
因为，我们基本可以总结出如下思路：
1、 任选一个打码平台，注册登录并充值1元
2、 进入该平台的开发文档，选择你所用到的编程语言一类，复制粘贴代码
3、 把你刚才所充值的平台的账号、密码；传参传进去，对应的typeid也改一下
4、 检查你的电脑屏幕缩放比例，在所对应的坐标位置代码块中乘以比例
最后，在pycharm，run一下，会给你期望的惊喜那般，哇塞，贼6
好了，以上就是很简单很实用并且性价比极高的解决方法，不需要跟开发吵架，让他特意为了方便你测试，故意改代码块；也不需要跟着学习其他深度的OCR识别技术，太耗时了，还不一定学的会；我们就选择这种单枪匹马的思路，干就完事了。
亲自有效，有任何问题，可留言，笔者可通过向日葵远程连接你电脑，帮你操作好。
