WebUI 自动化测试框架搭建之需求整理、详细设计和框架设计

作者：虫无涯

2023-03-02
陕西
本文字数：3903 字
阅读完需：约 13 分钟

1 总体需求

1.1 实现目的

基于 BS 架构，模拟用户（鼠标、键盘）操作，达到快速、重复执行测试用例；
便于回归测试，快速覆盖主线用例或功能；
线上或线下巡检测试，结合持续集成，及时发现运行环境存在的问题；
提升个人自动化测试技术能力，为业务提供强有力的测试手段。

1.2 功能需求

基于 Unittest，封装、调用和组织所有的测试用例，进行批量或指定用例运行；
支持邮件服务，可添加任意团队成员邮箱，及时通知团队成员自动化运行结果；
支持 log 日志，保存运行过程所有或需要记录的数据；
支持 HTML 测试报告，直观展示测试结果和数据；
支持用例设计和测试结果分离，便于数据管理；
支持 Json、conf、excel 等配置文件读取，提供灵活的配置文件操作方法；
支持用户登录封装，后续所有的用例登录公用一个方法；
支持任意修改 HTMLTestRuner，可定制测试报告模板；
支持测试报告多语言（英文和中文）；
支持截图功能；
支持 Jenkins 持续集成。

1.3 其他要求

适用所有 bs 架构自动化测试；
模块化设计，项目框架形式组织代码；
公共方法封装，统一调用；
数据和结果分开，清晰明了；
支持邮件自定义；
代码注释清晰。

1.4 适用人员

有一定测试基础的软件测试人员；
有一定的代码（Python/Java）功底；
致力于学习 web UI 自动化测试的所有人员。

1.5 学习周期

两个星期到一个月，可达到独立进行 web UI 自动化测试；

1.6 学习建议

建议按照文章顺序，一步一步进行学习和实践；
文章是从基本的环境搭建到最终框架完全搭建的一个过程，相对来说还是比较详细的；
文章偏向于项目实战，未有太多的理论介绍和名词解释，所以对 0 基础的人员来说，可能需要额外的时间去补充一下知识。

2 详细设计

2.1 需求分析

对实现需求进行详细分析，主要有下：

2.2 技术栈

3 框架设计

3.1 框架说明

3.2 框架执行流程

4 预期结果

4.1 测试过程 log 日志

4.2 测试报告 html 格式

4.3 测试报告邮件格式

5 特别说明

代码基本完成，如果有好的建议，可交流学习心得。

6 第一个 WebUI 自动化测试程序

在开始自动化框架搭建之前，我们先写一个简单的自动化测试脚本，来体会一下什么是 web UI 自动化测试，以及元素的基本操作，为后续的框架搭建鉴定基础。

6.1 Selenium 基本理论

6.1.1 Selenium 安装

直接打开 cmd 窗口，输入以下命令在线安装：

pip3 install selenium

复制代码

安装完后，在 cmd 窗口中输入以下命令，可以看到 selenium 已经安装了

pip list

复制代码

6.1.2 WebDriverAPI

selenium 提供了很多的 WebDriverAPI，可以来进行：

元素的识别、定位
元素的单击、双击
滚动条的拖动
浏览器控制如窗口大小、前进后退、刷新、表单切换、多窗口切换、文件双传下载、cookie 操作、验证码等等
详情请参考以下：

Selenium WebDriver API 学习笔记（一）：元素定位

Selenium WebDriver API 学习笔记（二）：浏览器控制

Selenium WebDriver API 学习笔记（三）：浏览器控制

6.2 浏览器驱动安装

要想使用 selenium 来操作浏览器上的元素，必须安装浏览器驱动；
这个要根据具体的浏览器版本来定义；
本文使用的是 Chrome 浏览器，版本为 88.0.4324.182（正式版本）（32 位）；

6.2.1 Chromedriver 下载

下载地址：Chrome浏览器各版本对应的驱动

6.2.2 Chromedriver 安装

下载下来后是一个 chromedriver.exe，如果是 w7 系统需要把 chromedriver.exe 放在 chrome 浏览器的安装目录，然后在系统环境变量中加入 chrome 浏览器的安装目录即可；如果是 w10 系统，需要 chromedriver.exe 放在 Python 的安装目录即可，如本文是：

6.3 代码设计思路

6.3.1 pycharm 新建脚本

打开之前创建的项目【Automated-UITest-demo】，在项目上右键，新建 python 文件即可，这里新建一个名为 test_baidu 的 python 文件
创建完后，如下多了一个 test_baidu 的 py 文件

6.3.2 自动化需求

这里我们做以下 UI 自动化测试：
1、自动打开 chrome 浏览器
2、输入百度网址
3、打开百度首页，输入 helloworld
4、最大化浏览器窗口
5、搜索 helloworld.并回车
6、浏览器窗口大小缩小为 640*480
7、先进行浏览器后退，再次输入 csdn 进行搜索
8、清空输入的内容
9、判断是否进入 csdn 官网

6.3.3 需求分析

以上方法具体使用，参考【1.2 WebDriverAPI】

6.3.4 元素定位

以上需求已经搞清楚了，那么接下来要进行元素定位，这里大概可以对需求再拆解下，需要哪些元素？

那如何定位元素，知道使用哪种定位方式？

A、我们打开百度首页，然后按【F12】打开浏览器的调试模式

B、点击调试模式窗口左上角的小三角

C、鼠标移动到百度搜索输入框

D、点击一下即可，然后看到搜索输入框的元素属性，即要使用的元素定位方法

6.4 代码实现

6.4.1 包/模块的引入

打开刚才新建的 test_baidu.py 文件
然后输入以下内容：

from selenium import webdriver  # 引入selenium模块的webdriverfrom selenium.webdriver.common.keys import Keys  # 键盘输入，所以要用到Keys  import time  # 元素等待时间，所以引入time模块

复制代码

6.4.2 打开百度

driver = webdriver.Chrome()  # 打开Chrome浏览器driver.get("http://www.baidu.com")  # 输入百度网址
print("============验证浏览器的基本控制==========")

复制代码

6.4.3 定位搜索框输入 helloworld，窗口最大化

def search():    print("1、搜索helloworld.并回车......")    time.sleep(2)    driver.find_element_by_id("kw").send_keys("helloworld")  # 输入“helloworld”    time.sleep(2)    driver.find_element_by_id("kw").send_keys(Keys.ENTER)  # 回车进行搜索    time.sleep(2)    driver.maximize_window()  # 最大化当前窗口

复制代码

6.4.4 窗口缩小为 640*480

def windows_size():    print("2、浏览器窗口大小缩小为640*480......")    time.sleep(2)    driver.set_window_size(640, 480)  # 控制浏览器显示尺寸为640*480    time.sleep(0.5)    driver.maximize_window()  # 最大化当前窗口    time.sleep(2)

复制代码

6.4.5 窗口刷新

ef back_refresh():    print("3、先进行浏览器后退，再次输入csdn进行搜索")    driver.back()    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(1)    driver.refresh() # 刷新

复制代码

6.4.6 清空输入内容

def serach_clear():    print("4、清空输入的内容......")    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(2)    driver.find_element_by_id("kw").clear()    time.sleep(0.5)

复制代码

6.4.7 进入 csdn 官网并判断

def csdn():    print("5、进入csdn官网")    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(2)    driver.find_element_by_id("kw").send_keys(Keys.ENTER)  # 回车进行搜索    time.sleep(2)    driver.find_element_by_xpath("//*[@id='1']/h3/a[1]").click()    time.sleep(2)    windows = driver.window_handles    driver.switch_to.window(windows[-1])    now_url = driver.current_url    m_get_url = "https://www.csdn.net/"    if now_url == m_get_url:        print("经过判断，已经进入csdn官网！！")    else:        print("未进入到csdn官网，请检查代码！")

复制代码

6.4.8 调用方法

search()windows_size()back_refresh()serach_clear()csdn()
driver.quit()  # 关闭浏览器

复制代码

6.5 完整源码

# 作者：Administrator# 日期：2021/2/24 15:15# 文件名称：test_baidu.py# Function：打开百度网主页，在搜索栏输入“helloworld”
from selenium import webdriverfrom selenium.webdriver.common.keys import Keysimport time
driver = webdriver.Chrome()  # 打开Chrome浏览器driver.get("http://www.baidu.com")  # 输入百度网址
print("============验证浏览器的基本控制==========")
def search():    print("1、搜索helloworld.并回车......")    time.sleep(2)    driver.find_element_by_id("kw").send_keys("helloworld")  # 输入“helloworld”    time.sleep(2)    driver.find_element_by_id("kw").send_keys(Keys.ENTER)  # 回车进行搜索    time.sleep(2)    driver.maximize_window()  # 最大化当前窗口

def windows_size():    print("2、浏览器窗口大小缩小为640*480......")    time.sleep(2)    driver.set_window_size(640, 480)  # 控制浏览器显示尺寸为640*480    time.sleep(0.5)    driver.maximize_window()  # 最大化当前窗口    time.sleep(2)
def back_refresh():    print("3、先进行浏览器后退，再次输入csdn进行搜索")    driver.back()    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(1)    driver.refresh() # 刷新
def serach_clear():    print("4、清空输入的内容......")    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(2)    driver.find_element_by_id("kw").clear()    time.sleep(0.5)
def csdn():    print("5、进入csdn官网")    driver.find_element_by_id("kw").send_keys("csdn")  # 输入csdn    time.sleep(2)    driver.find_element_by_id("kw").send_keys(Keys.ENTER)  # 回车进行搜索    time.sleep(2)    driver.find_element_by_xpath("//*[@id='1']/h3/a[1]").click()    time.sleep(2)    windows = driver.window_handles    driver.switch_to.window(windows[-1])    now_url = driver.current_url    m_get_url = "https://www.csdn.net/"    if now_url == m_get_url:        print("经过判断，已经进入csdn官网！！")    else:        print("未进入到csdn官网，请检查代码！")
search()windows_size()back_refresh()serach_clear()csdn()
driver.quit()  # 关闭浏览器

复制代码

发布于: 2023-03-02阅读数: 17

原文链接:【http://xie.infoq.cn/article/50998421951491d844d926456】。文章转载请联系作者。

虫无涯

关注

专注测试领域各种技术研究、分享和交流~ 2019-12-11 加入

CSDN测试领域优质创作者 | CSDN博客专家 | 阿里云专家博主 | 华为云享专家 | 51CTO专家博主

发布

暂无评论

创作场景

WebUI 自动化测试框架搭建之需求整理、详细设计和框架设计

1 总体需求

1.1 实现目的

1.2 功能需求

1.3 其他要求

1.4 适用人员

1.5 学习周期

1.6 学习建议

2 详细设计

2.1 需求分析

2.2 技术栈

3 框架设计

3.1 框架说明

3.2 框架执行流程

4 预期结果

4.1 测试过程 log 日志

4.2 测试报告 html 格式

4.3 测试报告邮件格式

5 特别说明

6 第一个 WebUI 自动化测试程序

6.1 Selenium 基本理论

6.1.1 Selenium 安装

6.1.2 WebDriverAPI

6.2 浏览器驱动安装

6.2.1 Chromedriver 下载

6.2.2 Chromedriver 安装

6.3 代码设计思路

6.3.1 pycharm 新建脚本

6.3.2 自动化需求

6.3.3 需求分析

6.3.4 元素定位

6.4 代码实现

6.4.1 包/模块的引入

6.4.2 打开百度

6.4.3 定位搜索框输入 helloworld，窗口最大化

6.4.4 窗口缩小为 640*480

6.4.5 窗口刷新

6.4.6 清空输入内容

6.4.7 进入 csdn 官网并判断

6.4.8 调用方法

6.5 完整源码

虫无涯

评论