一种DevOps模式下UI自动化测试左移思路的探究

lsekfe

随着科技的不断发展成熟，市场的变化也越来越迅速，为了更快捷地应对客户需求，更多的企业选择了快速迭代的方式进行产品的研发，因此DevOps也就应运而生。
　　DevOps模式是文化、流程、概念、结构、技术等方方面面的变革，同时也对测试工作提出了更加严格、高效的要求。在DevOps的趋势下，测试工作由原来的大量集中测试，变成了高频次的迭代测试，由原来的纯手工测试，演变成了依托工具和平台的自动化测试，由原来仅仅需要关注测试阶段，左移到了产品的开发设计阶段。
　　本文提供了一种DevOps模式下UI自动化测试左移的思路，将涉及到的环节进行了标记，如图1所示。

图1 产品周期概要图

　　该思路是将测试工作左移到了开发设计阶段，分为五个步骤实现：
　　·根据UI设计图，测试人员设计基于界面元素的业务流程图；
　　·根据业务流程图，测试人员补充界面元素的赋值情况，形成业务/数据流图；
　　·在编码阶段，开发人员根据业务/数据流图的信息，对界面元素加入定制化的描述，包括界面元素唯一验证、元素类型、操作、赋值等信息；
　　·在编码完成后，进行代码扫描，将之前加入的定制化描述抓取出来，根据唯一验证信息捕捉界面元素从而形成对象库，根据元素类型、操作、赋值等形成标准化案例步骤，并根据业务流程图的业务规则对标准化步骤进行排序，进而生成UI自动化案例；
　　·在部署完成后，可以通过前面步骤生成的UI自动化案例进行测试准入检测。
　　通过上面五个步骤，使得测试工作介入到了开发的设计阶段，在UI设计完成的同时，也完成了业务流图和数据流图的设计工作，实现了对业务逻辑的梳理和测试数据的准备，最终在代码部署之前，通过代码扫描的方式进行了UI自动化案例的自动生成，并以UI自动化执行冒烟测试。
　　我们以某报表查询交易为例，进行UI自动化测试左移思路的详细说明。

　　1.基于UI设计图与界面元素形成业务流程图
　　本文选取了某报表查询的界面为例，UI设计界面如图2所示：

图2 UI设计界面

　　由上图可知，该界面包含了2个文本框（查询机构和查询日期）、3个按钮（查询、重置和下载）、1个表格，共计6个界面元素。在UI设计完成后，结合需求对该界面的业务流程进行分析，可以得到界面元素的操作顺序，也即是该界面的业务流程图，如图3所示：

图3 界面元素业务流程图

　　2.基于业务流程图与数据赋值形成的业务/数据流图
　　依据图3的业务流程图，测试人员继续按照标准规范“对象|操作|数据”补充界面元素的赋值情况，例如文本框需要输入数据，则采用“文本框|输入|数据”的形式，如按钮不需要输入数据，则采用“按钮|点击”的形式，以此最终形成业务/数据流图，如图4所示：

图4 界面元素业务/数据流图

　　3.基于业务/数据流图完成界面元素的定制化描述
　　在测试人员完成业务/数据流图后，开发人员会根据流图内容和规范进行代码编写，通过在界面元素的Xpath中加入图4的ID，例如Frame("name:=udesk-tab-iframe-1").WebEdit("xpath:=//INPUT[@id='00001']")，以此来获取界面元素的定位信息与其他描述，从而形成UI自动化案例的界面对象库；通过加入定制化的界面元素描述例如“AutoTest 界面元素ID|步骤序号|界面元素类型|操作|数据 End”的方式，例如图4中的第二步则可以写成“AutoTest 00002|2|文本框|输入|20210512 End”，第七步则可写出“AutoTest 00003|7|按钮|点击 End”。

　　4.基于代码扫描与定制化描述生成UI自动化案例
　　开发人员按照上述标准对界面元素进行描述，在编码阶段完成后，便可对代码文本进行扫描，当扫描工具遇到AutoTest时则开始抓取后续信息，在遇到End后停止抓取，直到下次遇到AutoTest时则继续抓取信息。
　　将抓取的信息按照“|”进行拆分，根据“界面元素ID”形成对象库，根据“界面元素类型|操作|数据”形成标准化案例步骤，根据“步骤序号”进行案例的排序，并最终整合成完整案例。

　　5.利用UI自动化案例进行冒烟测试
　　根据上述代码扫描生成UI自动化案例，并将案例上传到管理平台，在进行相关流水线配置后即可进行UI自动化准入，执行冒烟测试。
　　通过这种思路，可以实现测试左移至开发设计阶段，在UI设计完成时，便开始进行业务流程图和数据流程图的设计工作，通过流程图的设计，达到了业务分析和数据准备的目的，并形成了流程图等相关项目资产。而通过UI自动化冒烟的方式，减少了人工的干预，用机器代替手工，提高了测试的效率，符合DevOps的相关要求。