Web UI 自動(dòng)化測(cè)試方案（超級(jí)干貨）看完不會(huì)你找我

時(shí)間：2023-04-18 10:40:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-18 10:40:01 來源：網(wǎng)站運(yùn)營(yíng)

Web UI 自動(dòng)化測(cè)試方案（超級(jí)干貨）看完不會(huì)你找我：

項(xiàng)目討論

一、項(xiàng)目中符合自動(dòng)化測(cè)試的部分有哪些？(目標(biāo)和范圍 scope， 準(zhǔn)入準(zhǔn)出標(biāo)準(zhǔn))

1、穩(wěn)定的需求點(diǎn)、變動(dòng)較少的頁面
2、每日構(gòu)建后的測(cè)試驗(yàn)證 daily build
3、比較頻繁的回歸測(cè)試
4、需要在多平臺(tái)上運(yùn)行的相同測(cè)試案例、組合遍歷型的測(cè)試、大量的重復(fù)任務(wù)
二、自動(dòng)化用例在整個(gè)項(xiàng)目的測(cè)試用例的覆蓋率
1、一般的要求 50% +
2、重點(diǎn)的要求 80% +
3、根據(jù)項(xiàng)目的具體要求，變動(dòng)特別大的項(xiàng)目需要額外單獨(dú)考慮覆蓋率

本文純干貨，自備飲料，免得把自己[噎住] ( *⊙~⊙)

團(tuán)隊(duì)建設(shè)

建立自動(dòng)化測(cè)試的組，理想狀態(tài)下有4個(gè)人員，測(cè)試開發(fā)、中高級(jí)自動(dòng)化測(cè)試工程師、2個(gè)初級(jí)自動(dòng)化工程師；非理想的情況下，可能只有一個(gè)人。

測(cè)試開發(fā)：

基礎(chǔ)答案：自動(dòng)化框架的建設(shè)，確定自動(dòng)化框架的設(shè)計(jì)模式、第三方代碼工具的封裝、中間公共模塊的設(shè)計(jì)和調(diào)用、測(cè)試用例、測(cè)試套件的管理和執(zhí)行、測(cè)試報(bào)告和測(cè)試結(jié)果的輸出（文件輸出和郵件通知）

可選高級(jí)：如果可能的話，需要搭建持續(xù)集成服務(wù)器（CI，Continuous Integration Server）的環(huán)境，進(jìn)行持續(xù)交付和自動(dòng)化的冒煙測(cè)試等。

培訓(xùn)的任務(wù)，需要將設(shè)計(jì)的框架以及封裝的驅(qū)動(dòng)，對(duì)其他成員進(jìn)行培訓(xùn)。

有自動(dòng)化方案的實(shí)施經(jīng)驗(yàn)、有開發(fā)背景、以及持續(xù)集成的背景等。

中高級(jí)自動(dòng)化測(cè)試工程師：

配合測(cè)試開發(fā)人員，實(shí)施測(cè)試框架的建設(shè)。主要負(fù)責(zé)中間公共模塊的實(shí)現(xiàn)和實(shí)例化等，以及部分高難度和流程復(fù)雜的自動(dòng)化用例腳本編寫和調(diào)試等工作。

有參與過自動(dòng)化方案的建設(shè)、腳本編寫經(jīng)驗(yàn)豐富、會(huì)代碼調(diào)試、懂Web測(cè)試等。

初級(jí)自動(dòng)化測(cè)試工程師：

根據(jù)中間公共模塊的設(shè)計(jì)，進(jìn)行實(shí)例化公共模塊、方法組合，實(shí)現(xiàn)自動(dòng)化用例腳本的編寫。
有計(jì)算機(jī)編程思維、有代碼經(jīng)驗(yàn)、可以讀懂腳本和HTML等。

若只有我一個(gè)人：

首先實(shí)現(xiàn)自動(dòng)化用例的維護(hù)和執(zhí)行。在這個(gè)基礎(chǔ)上不斷的抽取實(shí)現(xiàn)公共模塊的設(shè)計(jì)以及測(cè)試報(bào)告的生成等工作。通過經(jīng)驗(yàn)的積累，以及后續(xù)人員的補(bǔ)充，早日做好自動(dòng)化框架的建設(shè)工作。

技術(shù)方案

Selenium WebDriver、Python(unittest) Java(JUnit)、CI Server

技術(shù)方案：

選擇Python + Selenium 的技術(shù)方案。

首先技術(shù)工具是免費(fèi)的，Python的工具用PyCharm社區(qū)版，Selenium的WebDriver是開源工具。利用比較簡(jiǎn)潔的Python語言進(jìn)行自動(dòng)化測(cè)試，對(duì)于人員的學(xué)習(xí)成本來講比較實(shí)用，學(xué)習(xí)時(shí)間短，有優(yōu)勢(shì)。

另外Python自帶的unittest單元測(cè)試框架可以很方便的實(shí)現(xiàn)自動(dòng)化用例的設(shè)計(jì)和執(zhí)行以及自動(dòng)化用例套件的管理等任務(wù)。Python是純面向?qū)ο蟮恼Z言，后續(xù)也可以過渡到Java + Selenium進(jìn)行更加豐富的自動(dòng)化測(cè)試。
此外，可以選擇Jenkins作為持續(xù)集成服務(wù)器，配合Python+Selenium的方案進(jìn)行自動(dòng)化冒煙測(cè)試。

源代碼管理工具（VCS, version control system)

選擇SVN(git)作為代碼的源代碼管理工具。集成在PyCharm中的步驟如下
1、把代碼放到SVN在本地簽出（check out）的文件夾目錄中，例如 D:/SVN/XXProject/Trunck
2、用PyCharm打開 剛剛部署的代碼
3、選擇PyCharm的 VCS|Enable VCS integration，選擇 Subversion（svn） 或者 Git
4、右鍵項(xiàng)目文件的根目錄，選擇 Subversion | add to VCS
5、右鍵項(xiàng)目文件的根目錄，或者選 VCS | Commit Directory...
6、每天打開代碼后，首先 Subversion | update project

硬件：

硬件的要求不高，主要需要獨(dú)立的測(cè)試環(huán)境。另外測(cè)試人員用的電腦最好是Windows桌面操作系統(tǒng)，需要安裝Firefox瀏覽器，避免47.0的最新版本。測(cè)試人員最好也使用Chrome瀏覽器輔助進(jìn)行Web元素的定位。

Selenium 學(xué)習(xí)總結(jié)

Selenium IDE (火狐的插件)
1、Selenium IDE
一個(gè)基于火狐瀏覽器的插件
2、錄制（需要確保右上角的錄制按鈕是按下去的），為了我們熟悉Selenium WebDriver/ RC
3、保存和另存為測(cè)試用例
4、無論是否保存用例，都可以直接回放
5、導(dǎo)出測(cè)試用例的對(duì)應(yīng)的編程腳本
6、C# Nunit WebDriver
7、Java Junit / testNG WebDriver
8、Python unittest WebDriver
9、Ruby Test::Unit WebDriver
10、插入、編輯、刪除命令
11、學(xué)習(xí)Selenium的WebDriver/ RC

Python + Selenium WebDriver

一、搭建環(huán)境步驟

a 安裝 python3.x （windows xp 不支持 python3.5+）
b 設(shè)置環(huán)境變量 path（安裝時(shí)候也可以解決 勾上 add python.ext to path）
c 安裝Selenium 用pip命令安裝 pip install -U selenium
有無問題？
路徑，pip可能定位不到，pip也可能定位到別的文件夾（perl）
方案：cd c:/python34/scripts
外網(wǎng)ip問題。交換機(jī)的原因，局域網(wǎng)里面是同一個(gè)ip，造成安裝超時(shí)
火狐的版本 46.0以及以下
windows 7 x64以上的系統(tǒng)，需要用管理員模式運(yùn)行cmd，否則會(huì)安裝失敗。
普通的使用

二、定位方式

by id, name, class_name, tag_name, css_selector, xpath, link_text, partial_link_text
主要用的 是 id,name, css_selector, xpath, link_text

Selenium 基本使用

Python + Selenium 環(huán)境搭建

安裝Python，3.x（3.4 3.5 3.6）
注意：環(huán)境變量path
需要添加 "C:/Python34;C:/Python34/Scripts;"到Path
步驟：

右鍵 我的電腦 屬性 | 高級(jí)系統(tǒng)設(shè)置 | 環(huán)境變量
找 系統(tǒng)變量 | Path 并 雙擊 | Ctrl+C | 編輯 | Ctrl+V
安裝 Selenium
cmd | pip install -U selenium

-U = --upgrade 升級(jí)安裝類似于linux命令
command -x param
容易出現(xiàn)的問題

1、環(huán)境變量
cd C:/Python34/Scripts
再安裝
2、管理員權(quán)限
右鍵 管理員方式運(yùn)行

WebDriver的基本使用

1、實(shí)例化一個(gè)WebDriver的對(duì)象(使用默認(rèn)的火狐瀏覽器 v46或者以下)
driver = webdriver.Firefox()

注意，一定要寫括號(hào)，代表實(shí)例化對(duì)象
2、打開網(wǎng)址
driver.get("http://localhost/ranzhi/www")

3、查找元素
用id : driver.find_element_by_id("account")
用name: driver.find_element_by_name("password")
用xpath css_selector

4、對(duì)元素的操作
clear()
click()
send_keys()
使用python的休眠，給瀏覽器留出時(shí)間加載頁面
sleep(2)

5、關(guān)閉退出火狐
driver.quit()

selenium WebDriver的進(jìn)階操作

unittest 單元測(cè)試框架的使用

驗(yàn)證：斷言 self.assertEqual(expected, actual, msg)

管理測(cè)試用例： 每一個(gè)以 test_ 開頭的方法

可以在自動(dòng)化測(cè)試用例中忽略的部分： 編號(hào) 名稱 優(yōu)先級(jí) 模塊（項(xiàng)目） ## 忽略必須在自動(dòng)化用例中強(qiáng)調(diào)的部分： 前置條件 setUp() 輸入數(shù)據(jù) 步驟 test_ 開頭的方法 預(yù)期結(jié)果 test_ 開頭的方法 清理 tearDown()新增的一個(gè)知識(shí)點(diǎn): 測(cè)試的初始化 以及 測(cè)試的結(jié)束

setUpClass() 和 tearDownClass()

注意 上述方法 與 setUp() 和 tearDown() 的調(diào)用順序

1、定位方式的使用

css_selector

方法調(diào)用：

driver.find_element_by_css_selector("#langs > button")

CSS的3種選擇器：

1、id: 使用#+id
2、tag: 使用tag
3、class: 使用.+class

CSS selector的獲取

可以使用開發(fā)者工具，定位的元素，右鍵 | 復(fù)制 selector（復(fù)制CSS路徑）

1、Chrome使用了相對(duì)路徑 #langs > button
2、Firefox(firebug)使用了絕對(duì)路徑 html.screen-desktop-wide.device-desktop body.m-user-login div.container div#login div.panel-head div.panel-actions div#langs.dropdown.open button.btn

class_name

通過 class定位元素，必須保持 class唯一，否則定位會(huì)失敗

driver.find_element_by_class_name("btn")link_text 和 partial_link_text

文字選擇正確就行了
xpath

chrome內(nèi)核的開發(fā)者工具，復(fù)制的是相對(duì)的xpath
firefox內(nèi)核的開發(fā)者工具（firebug），復(fù)制的絕對(duì)的xpath

特定的元素的處理

frame

<iframe> <html> <head></head> <body> <我們需要定位的元素> </body> </html></iframe>上述代碼中，我們需要定位的元素，處于 一個(gè)frame中：我們需要先切換到對(duì)應(yīng)的frame中，然之操作，之后再退出　　

# 我們需要先切換到對(duì)應(yīng)的frame中## 切換framedriver.switch_to.frame("frame_name")## 或者用保險(xiǎn)的辦法切換frameframe_element = driver.find_element_by_css_selector("#frame_id")driver.switch_to.frame(frame_element)## 開始做定位操作## <----------------->## 結(jié)束做定位操作## 切換frame必須成對(duì)的出現(xiàn)。## 退出切換的frame到默認(rèn)的網(wǎng)頁html中driver.switch_to.default_content()

select

select定位有個(gè)前提，元素標(biāo)簽必須是 select

<select> </select>12345## 部門是個(gè) select 元素 <select></select>## 需要3步驟：## 1. 找到 select 的元素，賦值給變量 dept_select## 2. 實(shí)例化 dept_select 為 Select()的對(duì)象 為 user_adding_dept## 3. 調(diào)用 user_adding_dept 的方法 select_by_index()給元素賦值示例代碼　　

# 找到 select 的元素，賦值給變量 dept_selectdept_select = driver.find_element_by_id("dept") # 實(shí)例化 dept_select 為 Select()的對(duì)象 為 user_adding_deptuser_adding_dept = Select(dept_select) # 調(diào)用 user_adding_dept 的方法 select_by_index()給元素賦值user_adding_dept.select_by_index(2)

清除 cookie

在打開瀏覽器的時(shí)候，需要清理cookie。

from selenium import webdriver driver = webdriver.Firefox()driver.delete_all_cookies()driver.get("...")

數(shù)據(jù)驅(qū)動(dòng)的方式編寫用例

主要有兩種形式進(jìn)行數(shù)據(jù)驅(qū)動(dòng)
數(shù)據(jù)驅(qū)動(dòng)：用外部數(shù)據(jù)來驅(qū)動(dòng)測(cè)試用例的執(zhí)行

數(shù)據(jù)庫驅(qū)動(dòng)：MySQL、Oracle、PostgreSQL、SQL Server

import pymysql connect = pymysql.connect(host="xx", port=3306, user="root", passwd="xxx", db="xx")cur = connect.cursor()cur.execute("SELECT...")mysql_data = cur.fetchall()for row in mysql_data: # 進(jìn)行測(cè)試 # 使用字典類型 data_to_test = { "key1": row[0], "key2": row[1] } cur.close()connect.close()數(shù)據(jù)文件驅(qū)動(dòng)：csv文件最典型、xml文件、txt文件

import csv csv_file = open("xxx.csv", "r", encoding="utf8")csv_data = csv.reader(csv_file)for row in csv_data: # 進(jìn)行測(cè)試 # 使用字典類型 data_to_test = { "key1": row[0], "key2": row[1] } csv_file.close()

需要掌握的知識(shí)點(diǎn)：

1、python的字典類型 dict 類型
2、python的讀寫文件
3、python的讀寫數(shù)據(jù)庫
4、for循環(huán)
5、注意資源的釋放
關(guān)閉數(shù)據(jù)庫游標(biāo)和連接
關(guān)閉文件

模塊化的方式編寫用例

需要將每個(gè)用例都需要用的公共的功能，抽取出來，放到一個(gè)公共類中，作為模塊化

創(chuàng)建一個(gè)Python Package "common"，在里面創(chuàng)建一個(gè)ranzhi_common.py文件，里面添加RanzhiCommon類

1、login() : 普通登錄，默認(rèn)用admin/123456登錄
2、logout()：退出系統(tǒng)
3、login_by_dict(user_to_login)：使用字典類型的參數(shù)進(jìn)行登錄，user_to_login 是一個(gè)字典類型 dict
4、change_language(lang)：zh_CN, en_US, zh_TW 切換語言，需要參數(shù)傳遞要切換的語言
5、select_app(app)：crm, admin, oa, cash, team 選擇App，需要傳遞選擇 后臺(tái)管理 | 客戶管理 。。。
6、select_menu_for_admin(menu): organization 選擇了后臺(tái)管理以后，選擇菜單 組織
7、add_user(user_to_add): 使用字典類型的參數(shù)進(jìn)行添加

創(chuàng)建測(cè)試用例的類，比如 ranzhi_test_01.py ranzhi_test_02.py ranzhi_test_03.py... 在這些類中調(diào)用上面創(chuàng)建的類，一般會(huì)放到setUp() 中

import unittestfrom common.ranzhi_common import RanzhiCommon class RanzhiTest01(unittest.TestCase): def setUp(self): ranzhi_common = RanzhiCommon() def test_xxx(self): ranzhi_common.login() ##...

Selenium 自動(dòng)化測(cè)試方案

基礎(chǔ)方案

1、使用unittest，主要是用 TestCase（測(cè)試用例）
2、使用模塊化(基本的模塊化，抽取公共模塊)
3、使用數(shù)據(jù)驅(qū)動(dòng)的方式（主要包括 數(shù)據(jù)庫的形式 和文件讀取 ）
4、定制執(zhí)行需要測(cè)試的用例，使用unittest，主要用的是TestSuite（測(cè)試套件）、和 5、TextTestRunner（文本測(cè)試運(yùn)行器）[或者HTMLTestRunner]
6、生成測(cè)試報(bào)告（發(fā)送報(bào)告到指定郵箱）

方案實(shí)現(xiàn)的具體步驟：

1、使用PyCharm創(chuàng)建新的PurePython項(xiàng)目

2、在項(xiàng)目中創(chuàng)建如下的文件夾（python package）

TestCase
Data
Common
TestRunner
Report
3、分別實(shí)現(xiàn)上述模塊

在Data中存放數(shù)據(jù)，CSV文件，或者也可以放到數(shù)據(jù)中，使用數(shù)據(jù)驅(qū)動(dòng)

## 使用csv文件csv.reader()## 使用數(shù)據(jù)庫(MySQL)，可以參考www.imooc.com的python操作MySQL的視頻cur.fetchall()在Common中，創(chuàng)建測(cè)試公共模塊，實(shí)現(xiàn)模塊化的操作　　

## __init__(self, driver: webdriver.Firefox, base_url)self.common = RanzhiCommon(self.driver, self.base_url)在TestCase創(chuàng)建自動(dòng)化測(cè)試用例，注意使用unittest.TestCase　

def setUp()def tearDown()det test_xxx()在TestRunner創(chuàng)建測(cè)試執(zhí)行器和測(cè)試套件，使用unittest.TestSuite和HTMLTestRunner(第三方)　

test_suite = unittest.TestSuite()test_suite.addTest(RanzhiLogonTc01("test_xxx")) html_test_runner = HTMLTestRunner(stream=report_file, title="xxx", description="dddd")html_test_runner.run(test_suite)項(xiàng)目根目錄創(chuàng)建main.py，作為測(cè)試項(xiàng)目的主入口，運(yùn)行測(cè)試。

檢查測(cè)試報(bào)告

Selenium 可能遇到的問題

有無問題？

a <iframe> f1 = find_element_by_css_selector(frame) switch_to.frame(f1) b <select> s1 = find_element_by_css_selector(select) ss1 = Select(s1) ss1.select_by_index(0) ss1.select_by_value("人事部")c 編碼問題 utf-8d 時(shí)間等待問題 sleep(5)單元測(cè)試框架

unittest

解決了什么問題？

unittest.TestCase 前置條件 清理 測(cè)試過程步驟 斷言 assertEqual(期望值, 實(shí)際結(jié)果, 錯(cuò)誤提示) 運(yùn)行測(cè)試 test_開頭的方法unittest.TestSuite addTest(xxx("test_batch_login")) 自定義的添加測(cè)試用例，并執(zhí)行unittest.TextTestRunner run(suite) 執(zhí)行創(chuàng)建并維護(hù)好的測(cè)試套件 test_runner test_suite test_case測(cè)試運(yùn)行器 測(cè)試套件 測(cè)試用例模塊化操作

面向?qū)ο蟮膶?shí)踐：1. 編寫一個(gè)類，類里面描述公共的方法2. 實(shí)例化這個(gè)類，調(diào)用這個(gè)類的方法有無問題？類的構(gòu)造方法，需要傳遞 webdriver.Firefox() self.common = RanzhiCommon(self.browser, self.base_url)數(shù)據(jù)驅(qū)動(dòng)測(cè)試

讀取csv，循環(huán)每一行數(shù)據(jù)進(jìn)行操作

讀取MySQL，用例存到MySQL中　

1. 中文編碼的問題。 # coding="utf-8" 讀csv的時(shí)候，添加 encoding='utf-8' csv.reader(open("xxx.csv", "r", -1, encoding="utf-8")2. 循環(huán)放到最外層3. 文件路徑在控制臺(tái)讀取不到的問題，需要用絕對(duì)路徑來指向文件

封裝WebDriver

1、避免第三方代碼的威脅，防止大批量修改測(cè)試用例
2、節(jié)約人力的成本（如果封裝以后，不需要每個(gè)自動(dòng)化測(cè)試工程師都會(huì)WebDriver）
3、標(biāo)準(zhǔn)化自動(dòng)化用例的操作，只需要調(diào)用公共的標(biāo)準(zhǔn)模塊就好。

以上是我給大家整理的一個(gè)關(guān)于自動(dòng)化的web ui的一個(gè)項(xiàng)目從開始到完成的方案

收藏+點(diǎn)贊，分享持續(xù)，關(guān)注公眾號(hào)，領(lǐng)取最新軟件測(cè)試大廠面試資料和Python自動(dòng)化、接口、框架搭建學(xué)習(xí)資料！