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

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 需求分析

对 实现需求 进行详细分析,主要有下:

功能 说明
使用Unittest框架 开源自动化测试框架,直接使用
批量或指定用例运行 Unittest框架可支持此功能
log日志 使用Python的logging库即可
生成HTML测试报告 使用HtmlTestRunner.py模块可实现此功能
用例设计和结果分离 使用配置文件如excel、json等组织用例数据
支持Json、conf、excel等配置文件读取 这里先使用excel进行页面元素的驱动
用户登录封装 直接把登录功能模块化,使用Unittest框架中的setup,teardown即可
定制测试报告模板 使用HTMLTestRuner.py模块
报告多语言 使用HTMLTestRuner.py模块
截图功能 使用Selenium的save_screenshot方法

2.2 技术栈

技术 版本及说明
Python V3.x(本文为3.7)===编程语言支撑
Selenium V3.141.0 ===UI元素、控件的识别、定位,以及浏览器控制等
HtmlTestRunner Python3版本===生成Html测试报告
Logging Python自带===生成log日志
Xlrd V1.2.0===excel读取方法
Unittest Python自带===自动化测试框架
Smtplib Python自带===邮件服务
email Python自带===邮件服务
os Python自带===系统模块
PyCharm Community 2020.2汉化版
操作系统 Windows10旗舰版64位
其它 后续补充

3 框架设计

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第1张图片

3.1 框架说明

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第2张图片

3.2 框架执行流程

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第3张图片

4 预期结果

4.1 测试过程log日志

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第4张图片

4.2 测试报告html格式

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第5张图片

4.3 测试报告邮件格式

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第6张图片

5 特别说明

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

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


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


6.1 Selenium基本理论

6.1.1 Selenium安装

  • 直接打开cmd窗口,输入以下命令在线安装:
pip3 install selenium

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第7张图片

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

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第8张图片

6.1.2 WebDriverAPI

selenium提供了很多的WebDriverAPI,可以来进行:

6.2 浏览器驱动安装

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

6.2.1 Chromedriver下载

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第9张图片

6.2.2 Chromedriver安装

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

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第10张图片

6.3 代码设计思路

6.3.1 pycharm新建脚本

  • 打开之前创建的项目【Automated-UITest-demo】,在项目上右键,新建python文件即可,这里新建一个名为test_baidu的python文件

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第11张图片
WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第12张图片

  • 创建完后,如下多了一个test_baidu的py文件

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第13张图片

6.3.2 自动化需求

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

6.3.3 需求分析

需求 分析
自动打开chrome浏览器 需要用到webdriver.Chrome()
输入百度网址 用到driver.get()方法
打开百度首页,输入helloworld 用到send_keys()方法
最大化浏览器窗口 使用maximize_window()方法
搜索helloworld.并回车 用到send_keys()方法
浏览器窗口大小缩小为640*480 用到 set_window_size()方法
浏览器后退 back()方法
清空输入的内容 clear()方法
判断 driver.current_url方法来判断当前的网址
  • 以上方法具体使用,参考【1.2 WebDriverAPI】

6.3.4 元素定位

  • 以上需求已经搞清楚了,那么接下来要进行元素定位,这里大概可以对需求再拆解下,需要哪些元素?
元素 说明 定位方式
百度输入框 用来输入helooworld find_element_by_id
搜索csdn后点击csdn官网 用来模拟点击进入到csdn官网 find_element_by_xpath
  • 那如何定位元素,知道使用哪种定位方式?

A、我们打开百度首页,然后按【F12】打开浏览器的调试模式
WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第14张图片
B、点击调试模式窗口左上角的小三角
WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第15张图片
C、鼠标移动到百度搜索输入框
WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第16张图片
D、点击一下即可,然后看到搜索输入框的元素属性,即要使用的元素定位方法
WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第17张图片

6.4 代码实现

6.4.1 包/模块的引入

  • 打开刚才新建的test_baidu.py文件
  • 然后输入以下内容:
from selenium import webdriver  # 引入selenium模块的webdriver
from selenium.webdriver.common.keys import Keys  # 键盘输入,所以要用到Keys  
import time  # 元素等待时间,所以引入time模块

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第18张图片

6.4.2 打开百度

driver = webdriver.Chrome()  # 打开Chrome浏览器
driver.get("http://www.baidu.com")  # 输入百度网址

print("============验证浏览器的基本控制==========")

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第19张图片

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()  # 最大化当前窗口

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第20张图片

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)

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第21张图片

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() # 刷新

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第22张图片

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)

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第23张图片

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官网,请检查代码!")

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第24张图片

6.4.8 调用方法

search()
windows_size()
back_refresh()
serach_clear()
csdn()

driver.quit()  # 关闭浏览器

WebUI自动化测试框架搭建之需求整理、详细设计和框架设计_第25张图片

6.5 完整源码

# 作者:Administrator
# 日期:2021/2/24 15:15
# 文件名称:test_baidu.py
# Function:打开百度网主页,在搜索栏输入“helloworld”

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import 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()  # 关闭浏览器

你可能感兴趣的:(WebUI自动化测试框架搭建之需求整理、详细设计和框架设计)