Web自动化—解决登录页面随机验证码问题

一、抛出问题

在日常的测试工作中,遇到了这样一个登录页面,如下图:

 Web自动化—解决登录页面随机验证码问题插图

像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母的,有字母和数字的,有计算的等等;而且每次都是随机出现的,这种情况我们怎么来识别呢?如何解决这个难题?

二、分析问题

在测试环境中,遇到这种情况,分析了一下,大概有以下几种思路:

1、  让开发在测试环境中,去掉验证码;

2、  测试环境中,设置一个万能的验证码;

3、  通过cookie绕过登录;

4、  通过自动识别技术,来识别验证码;

对于以上方法,前三种都不太好方便,需要依赖上游,所以,我们尽可能的自己单枪匹马去解决。现在主要来讲第4种方法。

自动识别技术,其实就是通过第三方网站的力量来实现快速识别,花1块钱,就能用500次,有现成的东西,直接借助打码平台的自动识别技术使用就行,少喝一瓶矿泉水的钱,就能帮我们解决大问题。我们这里以某一个打码平台为示例来讲解:

百度搜索:图鉴打码平台,找到结果,并点击进入。

Web自动化—解决登录页面随机验证码问题插图1

点击开发文档,可以看到导航条可以用多种编程语言将其写好了,这些都是可以直接拿来使用的;我们这里以python语言为例,借助使用一下。但是,需要花钱,也就充值1块钱,就可以用500次。为了,第一步就是要在这个打码平台上进行注册,登录,再充值1元即可。有以下重要信息需要用到:你的账号和密码。

 Web自动化—解决登录页面随机验证码问题插图2

接下来,我们对这段python代码来简单分析一下:

 Web自动化—解决登录页面随机验证码问题插图3

比如,你的验证码是纯数字,你就传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点击登录按钮

# 第五步:关闭浏览器

======================================================================

所以,重点就在第三步,尤其要注意一个细节,就是屏幕缩放比。

 Web自动化—解决登录页面随机验证码问题插图4

如果你忘记这里,有可能对验证码截图截不到。

接下来上代码

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()

对代码进行讲解和注意的细节。这个脚本是可以直接复制粘贴拿过去用的

Web自动化—解决登录页面随机验证码问题插图5

三、总结思路

结尾要简单聊两句:首先,这个打码平台不止一个,还有其他的打码平台的也可以借助使用,也会有类似的开发文档代码,他山之石,可以攻玉,只需花1块钱就可以,任何一个打码平台都行。至于开发文档的语言,也是可以任选的,有的web自动化是python写的,有的是java写的,甚至有的是javascript写的,都行,自由选择即可。

因为,我们基本可以总结出如下思路:

1、  任选一个打码平台,注册登录并充值1元

2、  进入该平台的开发文档,选择你所用到的编程语言一类,复制粘贴代码

3、  把你刚才所充值的平台的账号、密码;传参传进去,对应的typeid也改一下

4、  检查你的电脑屏幕缩放比例,在所对应的坐标位置代码块中乘以比例

最后,在pycharm,run一下,会给你期望的惊喜那般,哇塞,贼6

好了,以上就是很简单很实用并且性价比极高的解决方法,不需要跟开发吵架,让他特意为了方便你测试,故意改代码块;也不需要跟着学习其他深度的OCR识别技术,太耗时了,还不一定学的会;我们就选择这种单枪匹马的思路,干就完事了。

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

文章来源于互联网:Web自动化---解决登录页面随机验证码问题

THE END
分享
二维码