基于Vue的Web自动化测试平台设计与实现

张慧　肖光华　王寒芳

关键词：Python；Selenium；自动化测试；回归测试

中图分类号：TP3 文献标识码：A

文章编号：1009-3044（2023）12-0051-03

0 引言

随着软件技术的逐渐成熟，新技术产生的同时，促进了软件测试的改变。由于现在的社会的变化，敏捷开发模式逐渐成熟，同时它对软件质量可以进行持续、及时和全面的跟踪，很多传统的开发模式正在逐步朝着敏捷开发模式转变。随着敏捷开发模式的使用，版本的发布越来越频繁。同时回归测试中的代码也变得越来越频繁。因此市场上逐渐开发出了一些成熟的自动化测试框架[1]，例如robotframework等，虽然利用这些工具，可以提供测试的工作效率，但是这些框架也有一定的局限性，必须按照工具原有的规则来编写测试用例，这类自动化测试用例往往存在冗余度高和复用性地的问题。本次自动化平台设计解决了这样的问题，根据测试的实际需求，实现一个方便维护、减少冗余、提高自动化测试用例的复用性自动化框架结构。

1 自动化测试的意义

当软件的功能比较成熟、稳定性较好的时候，软件版本迭代频繁，改动性较小，主流程测试用例在每次迭代更新时都需要执行，比较费人力和时间。如果能将这些测试用例进行自动化测试用例，让它自动执行，那么就会节省成本。每次版本更新的时候，这些自动化测试用例可以在回归测试中自动执行。尤其是在测试周期很短的大项目中，回归测试用例较多，几百个测试用例回归执行时，手动执行可能需要一个工程师十天的工作量，但是在自动化测试用例则可能几个小时就可以执行完毕。同时自动化测试用例的时间灵活。较多自动化运行上千个测试用例的时间段，且时间灵活，且能够在非工作内执行，充分利用了公司的资源。同时自动化的脚本没有变化，重复执行时可保证原有功能不发生变化。

2 自动化测试的相关技术

2.1 Python 语言与自动化测试

Selenium是应用在Web类型的自动化测试工具。它的能够支持Java、Python、C#、PHP Perl和Ruby等多种语言，所以不同的语言需要安装对应的Selenium库包文件。Python语言是一个极简的语言，它非常简单容易上手。近年来，由于Python语言的诸多优点：简洁性、易读性和可扩展性，使得Python语言越来越成熟，越来越多的公司选用了Python语言。虽然Java语言在市场上仍然占有很大的分量，但是在未来的一段时间内，Python占的比重将越来越高。在自动化测试语言的选择中，越来越多的自动化测试工程师选择了Python语言。它不需要让开发或测试人员搞明白语言本身，能够让测试功能师能很快上手，花更多的时间在研究问题上。

2.2 Selenium 自动化测试工具

Selenium是目前使用最广泛的一个Web用户界面自动化测试套件之一。它可以使用支持的任何一种编程语言进行编写，同时可以在大部分的Web浏览器中直接运行。它对应了多种语言，其中Python和C# 两种Selenium Web驅动目前使用最多的。

2.3 Pytest 单元测试框架

test相Py比te起st是来，P更yth加on简的洁一和种高单效元。测它试有框以架下，它的几与点un优it?点：上手简单，入门容易，文档也很丰富，文档中也提供了很多的示例进行参考；能够很好地支持测试用例集和测试用例的运行；支持参数化；在执行的过程中可以跳过测试用例，或者将预定失败的测试用例标记为失败；支持重复执行失败的用例；能够生成HTML 测试报告，还可以与Allure相结合生成好看的测试报告；可以自定义扩展第三方插件。

2.4 Allure

Allure是一个非常灵活的轻量级开源测试框架，它能够支持Pytest。同时有上手简单和易于集成的特点。在使用的时候通过语句“pytest.main （–alluredir report/result Demo.py）”，就会在当前文件夹创建一个report文件夹，在report文件夹下创建result，生成json 类型的测试报告。通过语句os.system“（ allure + gen? erator./report/result+‘-o‘+‘./report/result‘+-‘o‘+./report/html‘+--clean”）将json格式测试报告转化为好看的HTML测试报告的命令字符串；并通过OS的System函数将字符串转化为命令执行。

3 自动化测试平台的设计

自动化测试平台的设计，应该有前端页面，主要包含有用户管理、测试用例管理和挑选待运行的自动化测试用例的功能[2]。测试用例管理能够列举出所有的测试用例，也能也能查看每个用例的运行记录。因此本Web自动化测试平台采用的是前后端分离的模式进行设计的，前端的内容采用的是Vue框架来实现的，后端的业务通过Python和Selenium编写的自动化框架实现[3]，数据库的存储使用的MySQL数据库来实现的，主要用来存储用户信息和测试用例的执行结果，如图1所示。

4 自动化测试平台实现

4.1 前端功能实现

自动化测试平台的前端主要是现实测试用例集以及其下面的测试用例，在前端页面中，测试人员可以根据需要挑选合适的自动化测试用例执行。

前端由Vue完成，其中用户的管理页面包含创建用户，用户权限、编辑用户等功能。数据则保存在数据库之中。

前端页面中也可以显示用例集和测试用例。首先便利测试用例文件夹下的所有文件，然后通过Py? thon中的dir（）函数，查看每个文件包含的全部成员（函数和类），记录在文件中。通过采用读取文件的方式，得到所有的测试用例集合以及测试用例，然后在前端页面列举出来[4]。

前端页面也能自定义勾选选择相关的测试用例集和测试用例进行执行，加入到会执行列表中，进行执行。

4.2 后台的实现

基于自动化测试的分层思想，本文论述的自动化测试在实现上分为4 层，分别为公共处理层、业务处理层、测试用例层、执行结果表现层。

1） 公共处理层是一些通用的基本功能，如初始化配置文件、日志处理模块、webdriver驱动模块、文件读取与解析、常用的页面操作方法封装、数据库操作封装、生成随机数据等功能，和测试结果数据或测试报告文件的存放信息。

2） 业务处理层是以PageObject设计模式展开，包含了以页面为单位封装的操作和属性。包含了该页面的每个页面元素的定位属性或者定位表达式，以及每个页面元素的操作方法。在PageObject设计模式中，元素定位属性和页面元素的操作是分开定义的，减少了自动化框架的耦合性。当页面元素的属性发生变化时，只需要修改页面元素的定位属性，而不需要操作方法。该层的实现是为了测试用例执行的时候简化调用和减少重复代码。

3） 测试用例层含有测试用例套件和测试用例两个部分。该层是自动化测用例执行的主入口。测试的数据是通过数据驱动的方式发送，执行时首先对数据驱动方法进行执行，得到测试数据。数据的输入采用的是Pytest框架的数据驱动，它是一款由Pytest自动化测试框架自带的一个数据驱动。它是由pytest.emtrairzke（）方法实现的 。Pytest.mark.param-etrize是pytest的一个内置装饰器，允许在class类和函数function上定义多组参数后者通过fixture装饰器扩展数据驱动来实现驱动。根据业务功能点编写自动化测试用例文档，再在相应的测试套件中，根据测试用例文档编写自动化测试用例。最后获取断言的实际结果，与期望结果进行断言对比。在执行自动化测试用例的过程中，能够在不同的测试套件中挑选自动化测试用例进行组合。

4）执行结果表现层是通过pytest框架来实现，Py-test是Python第三方的测试库。提供了比unittest更加强大更灵活的测试机制。通过pytest-repeat和pytest-xdist框架实现了重复测试和并行测试。对于结果显示本文使用的是pytest和allure来实现的，通过pytest和allure结合实现漂亮的测试报告。Allure是一个轻量级语言测试报告工具，它具有灵活性的特点，能够将测试结果以简洁的报告呈现出来。同时也将测试用例的步骤生成了运行日志模块，可记录测试用例的执行过程和执行情况，通过日志也可以查询测试用例失败的原因。也可以为自动化测试用例的维护和优化提供依据。同时有众多的插件可以实现更多测试场景[5]。同时，也将测试用例的执行结果插入数据库的结果表单中，以保存每次运行的测试结果。

5 自动化框架的应用

5.1 被测系统简介

被测系统是一款医药批发网站Web端，该网站主要包括了前台和后台两个部分：前端商城的功能主要包括有用户注册、用户登录、商品列表、查询商品、查看商品详情、加入购物车、购物车页面、提交订单页面、订单详情页面、取消订单、个人中心页面，而后台管理页面则包括用户管理、商品管理、订单管理、营销活动模块等功能。

5.2 测试需求

本文将以用户采购药品流程为例子，测试的步骤包括下面几点。

1） 用户注册

点击注册链接，进入“用户注册”页面，在该页面中填入用户名和密码等必填信息，点击提交按钮。由于验证码需要手机查看，所以本例子中使用的是开发设定的固定验证码来解决该问题。

2） 用户登录

在用户登录页面中，使用创建好的用户名、密码和验证码进行登录。登录页面中的验证码，与用户注册页面相同，采用的是开发设定的固定验证码。

3） 查询商品

登录成功后，进入列表页面，在商品查询页面上输入商品信息，点击查询按钮。

4） 验证商品价格

查询到商品后，验证该商品的原价与促销价是否正確。

5） 加入购物车

将该商品加入购物车，在购物车页面中，验证该商品的原价和促销价格。

6） 提交订单。

在购物车中勾选商品信息，然后点击提交订单按钮，进行下单操作。在订单页面中，验证该订单提交成功。

5.3 测试过程

1） 构建测试框架。

安装测试环境，安装Python环境，安装相关的Py? thon库包文件，pytest、selenium、allure。安装MySQL同时创建好相关的数据库表，安装Vue 前端开发架构软件。

2） 分析需求。

分析该条测试用例，涉及的页面有用户注册页面、用户登录页面、查询商品页面，商品详情页面，购物车页面以及提交订单页面。在设计模式中涉及的PageObject应该有6个页面。

第一个页面是用户注册页面，其中包含的操作有：① 点击注册按钮；② 用户名的定位，用户名的清除与输入操作；③ 密码的元素定位、密码的清除与输入操作；④ 验证码的元素定位，验证码的清除与输入操作；⑤ 点击注册按钮；⑥ 注册成功弹框提示期望值获取。

第二个页面是用户登录页面，该页面中包含的操作有：① 点击登录按钮；② 用户名的定位，用户名的清除与输入操作；③ 密码的元素定位、密码的清除与输入操作；④ 验证码的元素定位，验证码的清除与输入操作；⑤ 点击登录按钮；⑥ 登录成功弹框提示期望值获取。

第三个页面是查询商品页面，在页面中包含的操作有：① 按照传入的参数，获取指定的商品所在的位置；② 得到商品的总条数。

第四个页面是商品详情页面，在该页面中包含的操作有：① 商品的名称定位；② 商品的原价价格定位、商品的原价获取操作；③ 商品的促销价定位、商品的促销价获取操作；④ 加入购物车。

第五个页面是加入购物车页面，在该页面中包含的操作有：① 定位商品的信息元素、点击指定的商品加入购物车；② 点击“提交订单”按钮。

第六个页面是提交订单页面，在该页面中包含的操作有：① 定位付款方式位“余额抵扣”“确认提交”元素；② 选择付款方式为“余额抵扣”；③点击“确认提交”按钮。

3）实现自动化测试用例平台。

系统模块：医药批发网站，设计到的模块有：用户注册页、首页、查询商品页面、商品详情页面、购物车页面和提交订单页面。

概述：实现了一个订单流程的测试用例：自动化测试用例中用户注册、用户登录以及下订单的一个测试用例。

目标：验证一个订单的流程的实现。通过标准的框架结构为前提，通过PageObject框架结构，将每个页面分成了数据、元素和动作脚本三个脚本。使脚本易读取，易集成且便于维护，相关的方法还能重复调用，降低了维护的成本，同时也提高了代码利用率[5]。在pytest中编写测试用例，通过页面元素的获取，得到实际结果，与期望结果进行对比，来验证测试用例结果。自动化的测试用例的结果报告通过Allure可以生成。

对应的测试用例步骤如下：

①建立WebDriver初始类，其中包含了初始化浏览器驱动。同时打开初始化界面“首页”；

②新建一个Common文件，在该文件中新建二个类：第一个类是建立用于存放元素操作的基本操作的类，例如：点击、清除、先清除再输入数据、输入数据、滑动页面、读取页面元素数据、读取页面表格元素、点击表格中指定列的元素。第二个类是建立用于存放文件读取操作的类，例如：读取excel和csv操作、读取文件操作、写入excel和csv文件操作、写入文件操作。通过该类可以读取和写入文件数据。

③创建PageObject文件夹，在每个页面中新建两个文件，以供在测试用例中调用。一个用于存放数据和控件元素，另外一个用于存放页面操作的文件。当页面元素的定位或者数据发生变化的时候，只需要更新该控件元素的路径或数据值；

④创建TestCases文件平，创建测试用例集TestOrder类下创建测试方法test_order，该方法中用到的测试数据是通过pytest.mark.parametrize（）来设置的，在本测试用例中用到的测试数据有：用户名、密码、验证码、药品名“感冒药”，商品商量为“1”，单价为“20”，促销价为“18”。

在该类中依次调用如下方法：

①点击注册链接：调用“首页”中的点击“注册”方法；

②注册新用户：调用“注册”页面中的先清除再输入用户名、密码和确认密码，点击“确定”按钮方法；

③登录用户：调用“首页”中点击“登录”按钮，调用登录框中的先清除再输入用户名和密码操作，调用登录框中的点击“登录”按钮操作；

④查询商品，调用“首页”中的先清除和再输入值搜索框方法，调用“首页”中的点击“查询”按钮方法；

⑤验证查询结果：商品详情页面，调用“查询结果”中的点击“第一行记录”方法，进入商品详情页；调用商品详情页中的获取商品名称方法，得到期望的商品名称。在这一步中进行第一次验证，验证商品是否查询正确；

⑥加入购物车：调用“商品详情”页中的点击“加入购物车”图标；调用“商品详情”页中的點击“购物车”图标；

⑦下订单：调用“购物车”页面中的点击“提交订单”按钮；

⑧验证订单是否提交成功：调用“订单”页面中的点击“待付款”订单页面；调用“代付款”页面中的订单信息，如：商品与价格，验证订单是否正确。

在Vue实现的前端页面中列出所有的测试用例方法，并勾选出相关的测试用例集下的测试用例，写入记事本文件中。新建执行run_testcases 的执行文件，在该文件中通过pytest.main中的方法“pytest.main （‘[ -s，‘-v，‘-k ，‘从记事本中读取相关的测试方法路径，‘–alluredir，‘./report/xml]）”运行指定的测试用例，并将结果生成allure数据集合，再通过Python 命令os. system“（ allure generate ./temp -o ./report -- clean”）生成相关的allure 数据集合生成allure 报告文档。

6 结束语

随着软件技术越来越成熟，Web应用的发展通常采用了迭代快和周期短的敏捷开发模式，Web自动化测试用例的发展的也成为必然趋势，随着自动化测试技术的深入，如何有效地提高内部测试人员的效率，降低成本，具有很高的使用价值，但是该Web自动化平台依然还有很多值得改进的地方，例如：加入Jen? kins和Ant技术后，能够每日在指定的时间自动运行测试用例，这样能使运行时间更加灵活，希望在日后的使用过程中更加完善。