1. 首頁 > 生活百科 > >

Web自動化---解決登錄頁面隨機驗證碼問題

生活百科

一、拋出問題在日常的測試工作中，遇到了這樣一個登錄頁面，如下圖：

Web自動化---解決登錄頁面隨機驗證碼問題

文章插圖
像我們之前做過UI自動化的同學就知道，自動輸入賬號和密碼，這個簡單，但是怎么樣來識別驗證碼呢？驗證碼的形式有多種，有純數字的，純字母的，有字母和數字的，有計算的等等；而且每次都是隨機出現的 ， 這種情況我們怎么來識別呢？如何解決這個難題？
二、分析問題在測試環境中 ， 遇到這種情況 ， 分析了一下，大概有以下幾種思路：
1、  讓開發在測試環境中，去掉驗證碼；
2、  測試環境中，設置一個萬能的驗證碼；
3、  通過cookie繞過登錄；
4、  通過自動識別技術 ， 來識別驗證碼；
對于以上方法，前三種都不太好方便，需要依賴上游，所以，我們盡可能的自己單槍匹馬去解決 。現在主要來講第4種方法 。
自動識別技術，其實就是通過第三方網站的力量來實現快速識別 ， 花1塊錢，就能用500次，有現成的東西，直接借助打碼平臺的自動識別技術使用就行 ， 少喝一瓶礦泉水的錢，就能幫我們解決大問題 。我們這里以某一個打碼平臺為示例來講解：
百度搜索：圖鑒打碼平臺 ， 找到結果，并點擊進入 。
Web自動化---解決登錄頁面隨機驗證碼問題

文章插圖
點擊開發文檔，可以看到導航條可以用多種編程語言將其寫好了 ， 這些都是可以直接拿來使用的；我們這里以python語言為例，借助使用一下 。但是，需要花錢，也就充值1塊錢，就可以用500次 。為了，第一步就是要在這個打碼平臺上進行注冊，登錄 ， 再充值1元即可 。有以下重要信息需要用到：你的賬號和密碼 。
Web自動化---解決登錄頁面隨機驗證碼問題

文章插圖
接下來，我們對這段python代碼來簡單分析一下：
Web自動化---解決登錄頁面隨機驗證碼問題

文章插圖
比如，你的驗證碼是純數字 ， 你就傳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自動化---解決登錄頁面隨機驗證碼問題

文章插圖
如果你忘記這里，有可能對驗證碼截圖截不到 。
接下來上代碼
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()

推薦閱讀