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 webdriverimport base64import jsonimport requestsfrom PIL import Image# 64位编码流def base64_api(uname, pwd, img, typeid):with open(img, 'rb') as f:base64_data = https://www.huyubaike.com/biancheng/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.50location = (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()