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识别技术，太耗时了，还不一定学的会；我们就选择这种单枪匹马的思路，干就完事了。

亲自有效，有任何问题，可留言，笔者可通过向日葵远程连接你电脑，帮你操作好。