写点什么

Web UI 自动化的设计和实践

发布于: 2021 年 07 月 16 日
Web UI自动化的设计和实践

背景

UI 自动化测试,即通过自动化的手段来控制机器模拟人进行手工操作。随着 GrowingIO 业务的不断发展,新需求的不断增加,回归测试的任务越来越重,现有测试的资源已经不足以应对繁重的回归测试任务,亟需 UI 自动化来代替人手工进行回归测试,解放回归测试的人力去做更精准的测试。因此,引出下文在 GrowingIO 的 Web UI 自动化的建设,本文主要就以下两个方面展开介绍:


  1. 框架搭建

  2. 集成质量平台


框架搭建

PageObject

众所周知,UI 自动化测试,是位于测试金字塔塔尖的位置,ROI 低。其痛点主要体现在:

1.测试用例维护成本高,页面元素定位方式或者布局有一些细微的变动,之前写好的代码可能就有很大的改动;

2.代码冗余,复用性低,可读性不好。


针对以上痛点,同时也通过大量调研,决定使用 PageObject 设计模式,其核心思想为六大原则:


  • 公共方法代表页面提供的服务

  • 不要暴露页面细节

  • 不要把断言和操作细节混用

  • 方法可以 Return 到新的页面

  • 不要把整页内容都放到 PageObject 中

  • 相同的行为产生不同的结果,可以封装不同结果


依据以上六大原则,并结合 GrowingIO 具体业务的情况,目录层级设计如下:


  • BasePage 层:封装对网页的一些基础操作的方法,比如打开浏览器、查找元素、截屏等

  • Component 层:继承 BasePage 层,封装了对页面中公共组件的操作方法,比如时间组件

  • Page 层:继承 Component 层,该层中的每个方法都对应当前页面的一个功能,方法里可以调用 Component 层中的方法或调用 BasePage 层中封装的方法

  • TestCase 层:调用业务 Page 层中封装的方法,编写业务 Case,并做断言


实际项目的目录分层如下:


├── basepage│   └── base_page.py├── component│   └── element_design.py├── conf│   ├── conf.py├── datas├── log│   └── all.log├── log.py├── page│   ├── home_page.py│   ├── login_page.py│   ├── main_page.py├── pytest.ini├── report│  ├── requirements.txt├── run_all_cases.py├── testcase│   ├── conftest.py│   ├── testcase.py└── util └── util.py
复制代码


Selenium + Python

语言选择 Python,对于新人友好且组内人员比较熟悉,可以迅速上手;


目前市场上的 Web UI 自动化测试方案百花齐放,基于底层技术的不同大体上分为以下几类:


1.WebDriver Protocol 类:

如 Selenium 3,WebdriverIO,Protractor,Nightwatchjs


2.Proxy JS 注入类:

如 Selenium RC,TestCafe,Cypress


3.DevTool Protocol 类:

如 Puppeteer, Playwright t


我们选择使用 Selenium 3,优势如下:


  • 开源、免费

  • 多浏览器支持:Firefox、Chrome、IE、Opera、Edge

  • 多平台支持:Linux、Windows、Mac

  • 多语言支持:Java、Python、Ruby、C#、JavaScript、C++

  • 对 Web 页面有良好的支持

  • 简单(API 简单,API:在类里面封装好的方法,即暴露给别人的一个可用的接口)、灵活(用开发语言驱动)、足够稳定


最主要的是 Selenium 的 Grid 方案即分布式方案非常成熟,而所谓的分布式就是由一个 Hub 节点和若干个 Node 代理节点组成。Hub 用来管理各个代理节点的注册信息和状态信息,并且接受远程客户端代码的请求调用,然后把请求的命令转发给代理节点来执行,最后再汇总各个代理节点的执行结果返回给远程客户端。无论是与 Jenkins 集成,还是对用例执行时间的要求,分布式执行才是 UI 自动化的最终态,这里使用 docker-compose 来创建 Hub 和 Node 节点


docker-compose.yml 文件内容如下:

version: '3'
services: hub: container_name: selenium-hub image: selenium/hub restart: always ports: - 4445:4444 environment: HUB_HOST: hub health-timeout: 30 SE_NODE_SESSION_TIMEOUT: 30000 JAVA_OPTS: -Xmx1024m chrome: image: selenium/node-chrome-debug:3.141.59-20210311 container_name: chrome_test restart: always depends_on: - hub ports: - 4446:5900 volumes: - /etc/hosts:/etc/hosts - /dev/shm:/dev/shm environment: JAVA_OPTS: -Xmx512m HUB_HOST: hub NODE_MAX_SESSION: 5 NODE_MAX_INSTANCES: 5 firefox: image: selenium/node-firefox-debug:3.141.59-20210311 container_name: firefox_test restart: always ports: - 4447:5900 volumes: - /etc/hosts:/etc/hosts - /dev/shm:/dev/shm depends_on: - hub environment: - JAVA_OPTS=-Xmx512m - HUB_HOST=hub - NODE_MAX_SESSION=4 - NODE_MAX_INSTANCES=4
复制代码


Grid 模式执行用例的流程图



Pytest

管理和组织测试用例的框架选用 Pytest 框架,其优点如下:


  • 简单灵活,容易上手,文档丰富

  • 支持参数化,可以细粒度地控制要测试的测试用例

  • 具有很多第三方插件,并且可以自定义扩展,比较好用的如 allure-pytest(完美测试报告)、pytest-rerunfailures(失败 case 重复执行)、pytest-xdist(多 CPU 分发)等

  • 可以很好的和 Jenkins 结合


说到 Pytest 就不得不提其精髓:Fixture,Fixture 与传统的测试框架的(Setup/Teardown)相比更加灵活:


  • 有独立的命名,并通过声明它们从测试函数、模块、类或整个项目中的使用来激活

  • 按模块化的方式实现,每个 Fixture 都可以互相调用

  • Fixture 的作用范围灵活可配置,可以 scope 参数,指定 Fixture 的作用域:函数(Function),模块(Module),类(Class),或整个项目(Session),执行顺序为:Session > Module > Class > Function


本项目中大量使用了 @pytest.fixtrue 装饰器来装饰方法,被装饰的方法名作为一个参数传入测试方法中,可以使用这种方式来完成测试之前的初始化,也可以返回数据库给测试函数,尤其是跟 conftest 文件和 yield 搭配使用


conftest.py

import pytestfrom selenium import webdriverfrom selenium.webdriver import DesiredCapabilities
@pytest.fixture(scope='session')def init_driver(): if browser == "chrome": driver = webdriver.Chrome() elif browser == 'firefox': driver = webdriver.Firefox() elif browser == 'safari': driver = webdriver.Safari() elif browser == 'remote': capabilities = DesiredCapabilities.CHROME driver = webdriver.Remote(command_executor='http://localhost:4445/wd/hub', desired_capabilities=capabilities) else: driver = '' print('浏览器类型暂不支持!!') driver_obj = OpBasePage(driver) yield init_driver.open_op_url().login_op_by_gui(username, password) # 关闭浏览器 driver_obj.close_browser()
复制代码


test_dashboard.py


class TestDataBoard: @pytest.fixture() def board(self, init_driver): yield init_driver.jump_to_board_by_url()
def test_board_sort(self, board): board.click_button_go_to_board_manage().check_board_sort()
复制代码


从以上 2 个文件中可以看到,conftest.py 文件中方法名 init_driver 传入了,test_dashboard.py 文件中的 board 方法中,board 方法被 @pytest.fixtrue 装饰器装饰后,又传入了 test_board_sort 测试方法,所以当运行测试方法 test_board_sort 时,程序执行顺序为



Allure

Allure 是一款轻量级并且非常灵活的开源测试报告框架。 它支持绝大多数测试框架, 例如 TestNG、Pytest、JUint 等。它简单易用,易于与 Jenkins 集成,展示多次测试用例的趋势情况。


Allure 装饰器:


测试用例中使用

import allureimport pytest
@allure.feature("distribute-analysis")class TestDistributionAnalysis: @pytest.fixture() def distribution_analysis(self, init_driver): yield init_driver.jump_to_distribution_analysis_by_url()
@allure.story("check distribute analysis") def test_analysis_success(self, distribution_analysis): with allure.step("create chart"): distribution_name, save_toast, distribute_detail_analysis = distribution_analysis.click_button_to_create_distribute_analysis().create_distribution_analysis() distribution_list_name, distribute_analysis = distribute_detail_analysis.click_crumb_to_distribution_analysis().get_first_distribution_chart_name() assert distribution_name == distribution_list_name, '新建分布分析单图后未展示在列表页' with allure.step("delete chart"): distribute_analysis.delete_first_distribution_chart()
复制代码


测试报告样例


嵌入截图的失败用例样例


至此,Web UI 自动化框架(PageObject + Selenium + Pytest + Allure)搭建完成,框架整体的执行流程如下:



集成质量平台

自动化框架搭建完成,但这仅仅是第一步,为了便于跟踪和验证自动化发现的问题,又将自动化框架与自研的质量平台进行集成,并与飞书和 Jira 打通,形成一个完整可追踪的闭环流程,具体流程如下:


1.在质量平台的页面上,选择测试环境地址和项目 ID,然后点击【启动 Web UI 测试】按钮,即在选定的测试环境和项目下,执行自动化用例

2.自动化用例执行完成,会发送飞书通知,并且自动爬取每一条失败用例的数据,展示在质量平台上

3.测试人员检查,剔除掉非 bug 的用例,勾选剩余数据,点击【提交 BUG 】按钮,即自动在 Jira 上,批量创建 sub-bug 并指派给对应的开发人员

4.当开发人员修改完成后,重复步骤 1~3,直到测试用例全部通过


集成质量平台后的流程图



总结

本文主要介绍了 Web UI 自动化在 GrowingIO 的框架搭建和集成质量平台两大部分,整体的一个思路就是:首先,选择合适的框架并落地,其次就是,自动化发现的问题,要及时跟踪和验证,让整个流程形成一个完整的闭环。当然上文提到的 Web UI 自动化的搭建和集成质量平台的整个流程,一定还存在诸多需要打磨的地方,希望大家不吝赐教。



发布于: 2021 年 07 月 16 日阅读数: 10
用户头像

GrowingIO 技术团队经验分享 2020.05.09 加入

GrowingIO(官网网站www.growingio.com)的官方技术专栏,内容涵盖微服务架构,前端技术,数据可视化,DevOps,大数据方面的经验分享。 公众号:GrowingIO技术团队

评论

发布
暂无评论
Web UI自动化的设计和实践