一种基于vuex的可视化报表工具自动化测试方法及装置
技术领域
本发明涉及自动化测试技术领域,尤其涉及一种基于vuex的可视化报表工具自动化测试方法及装置。
背景技术
目前的可视化报表工具图形绘制,主要采用canvas绘制,使得可视化报表工具可以进行自动化操作。但由于是canvas直接绘制的原因,采用元素定位方式的常规的自动化脚本无法对执行结果进行校验,即可以自动化生成但无法自动化测试,这就导致测试结果无法有效反馈至测试端,增加了测试的不确定性和工作量,测试效率难以提高,导致测试成本难以降低。
又由于可视化报表工具自由化操作程度高,场景冗余多,在日常版本迭代维护过程中无法采用自动化测试执行,回归测试成本巨大。
因此,目前对于可视化报表工具的测试工作,存在测试成本高的问题。
发明内容
本发明的实施例提供一种基于vuex的可视化报表工具自动化测试方法及装置,能够降低回归测试阶段的测试人力成本。
为达到上述目的,本发明的实施例采用如下技术方案:
第一方面,本发明的实施例提供的方法,包括:
在浏览器启动加载项加入vuex插件,并运行所述浏览器;
通过自动化脚本进入报表页面;
获取所述报表页面的vuex配置数据,根据所述报表页面的vuex配置数据校验所述报表页面,并生成测试报告。
具体的,所述在浏览器启动加载项加入vuex插件,并运行所述浏览器,包括:
设置所述浏览器的驱动路径,将自动化测试工程指向所述浏览器;
在配置所述浏览器的启动加载项时引入vuex插件,所述vuex插件用于在所述浏览器中打开报表页面后,获取报表页面的vuex配置数据。
具体的,所述通过自动化脚本进入报表页面,包括:通过selenium框架的自动化脚本,进入所述报表页面。
所述获取所述报表页面的vuex配置数据,包括:执行数据提取命令,确定所述报表页面的vuex配置数据所在字段,并提取所述报表页面的vuex配置数据。
具体的,所述根据所述报表页面的vuex配置数据校验所述报表页面,包括:
将所获取的vuex配置数据中的校验参数的实际值与预期值比对,若所述校验参数的实际值与所述预期值匹配则校验成功。
第二方面,本发明的实施例提供的装置,包括:
插件管理模块,用于在浏览器启动加载项加入vuex插件,并运行所述浏览器;
执行模块,用于通过自动化脚本进入报表页面;
处理模块,用于获取所述报表页面的vuex配置数据,根据所述报表页面的vuex配置数据校验所述报表页面,并生成测试报告。
具体的,所述插件管理模块,具体用于设置所述浏览器的驱动路径,将自动化测试工程指向所述浏览器;
在配置所述浏览器的启动加载项时引入vuex插件,所述vuex插件用于在所述浏览器中打开报表页面后,获取报表页面的vuex配置数据。
所述执行模块,具体用于通过selenium框架的自动化脚本,进入所述报表页面。
所述处理模块,具体用于执行数据提取命令,确定所述报表页面的vuex配置数据所在字段,并提取所述报表页面的vuex配置数据。
所述处理模块,具体还用于将所获取的vuex配置数据中的校验参数的实际值与预期值比对,若所述校验参数的实际值与所述预期值匹配则校验成功。
现有方案中的问题在于,可视化报表工具自由化操作程度高,场景冗余多,日常版本迭代维护过程中,回归测试成本巨大(无法采用自动化测试执行回归测试)。本实施例的设计目的在于改善原有可视化报表工具(基于canvas绘图)无法进行页面自动化测试的问题,最大化的去覆盖自动化测试场景,降低回归测试阶段的测试人力成本。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它的附图。
图1为本发明实施例提供的方法流程示意图;
图2、3、4为本发明实施例提供的具体实例的示意图。
具体实施方式
为使本领域技术人员更好地理解本发明的技术方案,下面结合附图和具体实施方式对本发明作进一步详细描述。下文中将详细描述本发明的实施方式,所述实施方式的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施方式是示例性的,仅用于解释本发明,而不能解释为对本发明的限制。本技术领域技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本发明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件,但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解,当我们称元件被“连接”或“耦接”到另一元件时,它可以直接连接或耦接到其他元件,或者也可以存在中间元件。此外,这里使用的“连接”或“耦接”可以包括无线连接或耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的任一单元和全部组合。本技术领域技术人员可以理解,除非另外定义,这里使用的所有术语(包括技术术语和科学术语)具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是,诸如通用字典中定义的那些术语应该被理解为具有与现有技术的上下文中的意义一致的意义,并且除非像这里一样定义,不会用理想化或过于正式的含义来解释。
本发明实施例提供一种基于vuex的可视化报表工具自动化测试方法,如图1所示,包括:
S1,在浏览器启动加载项加入vuex插件,并运行所述浏览器。
其中,本实施例中所述的浏览器,指的是IE、Chrome等目前在台式电脑、一体化电脑、笔记本电脑等桌面端常用的网页浏览器。Vue.js是一种中心化状态管理方案,Vuex是一个专为Vue.js应用程序开发的状态管理模式,在实际应用中,通过编写相应的vuex插件来实现状态管理模式中的功能。
S2,通过自动化脚本进入报表页面。
其中,自动化脚本指的是按照指定的程序语言编写的,可以通过目前已有的一些脚本工具运行的程序,通常这些脚本程序在被触发后实现自动化运行。
本实施例中的“报表页面”指的是可视化报表的展示或者配置页面,目前业内通常称为“报表页面”,比如市面上的quickBi(阿里)、帆软等。
S3,获取所述报表页面的vuex配置数据,根据所述报表页面的vuex配置数据校验所述报表页面,并生成测试报告。
具体的,可以通过TestNg单元测试框架来组织测试用例,并生成测试报告。
本实施例中,所述在浏览器启动加载项加入vuex插件,并运行所述浏览器,包括:
设置所述浏览器的驱动路径,将自动化测试工程指向所述浏览器。在配置所述浏览器的启动加载项时引入vuex插件,所述vuex插件用于在所述浏览器中打开报表页面后,获取报表页面的vuex配置数据。本实施例中的“自动化测试工程”业内的一种通常称呼,由“软件工程”一词衍生而来,软件工程指的是:软件工程是研究和应用如何以***性的、规范化的、可定量的过程化方法去开发和维护软件,以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来,本实施例的“自动化测试工程”指的是,所有的自动化测试脚本及其相关测试数据,按***性、规范性等方法组合成的一个整体。“软件工程”或者“自动化测试工程”具体表现为计算机程序代码,并以代码集合、代码包的形式存储在计算机中。
例如图2所示的,S1可以扩展为:
101:设置浏览器驱动路径,使自动化测试工程运行指定的浏览器。
102:配置浏览器启动加载项引入vuex,主要用于打开主测试页面(报表页面)后,通过此插件作为媒介,通过JS执__VUE_DEVTOOLS_GLOBAL_HOOK__.store来获取报表页面的vuex配置。
其中,可以采用selenium框架的自动化脚本。所述通过自动化脚本进入报表页面,包括:103,通过selenium框架的自动化脚本,进入所述报表页面。
所述获取所述报表页面的vuex配置数据,包括:
执行数据提取命令,确定所述报表页面的vuex配置数据所在字段,并提取所述报表页面的vuex配置数据。
例如:图2中104:通过执行String expect=(String)driver.executeScript("return__VUE_DEVTOOLS_GLOBAL_HOOK__.store.state.charts.chartsOption[0].name")获取当前可视化报表的vuex配置数据。
进一步的,所述根据所述报表页面的vuex配置数据校验所述报表页面,包括:将所获取的vuex配置数据中的校验参数的实际值与预期值比对,若所述校验参数的实际值与所述预期值匹配则校验成功。校验参数指的是vuex配置数据中的用于校验功能的字段,通常表现为数值或者特定字符的形式,校验参数的实际值指的就是校验参数当前实际的数值或者字符内容。
例如:图2中105:将获取的vuex配置与预期值比对,完成数值正确的校验。
之后执行105,通过TestNg单元测试框架来组织测试用例,并生成测试报告。
举例来说,本实施例中对基于vue+elementUi+echart采用canvas绘制的可视化报表创建工具,通过校验其vuex配置仓库中的渲染数据、渲染配置来保证自动化测试校验的准确性。从而解决之前的方案中,处理可视化报表工具在自动化测试过程中无法执行校验的问题,如图3所示的,此框架采用selenium-java+vuex+TestNg其中selenium-java+TestNg处理正常的自动化操作,vuex则负责可视化报表的配置管理及自动化测试过程中的配置读取,通过读取的配置与预设值做校验,完成一个自动化测试场景。
首先,在自动化测试工程中引入vuex插件,用于自动脚本引用。
接着,自动化脚本在初始化浏览器前修改浏览器启动配置引入vuex具体可以采用vuex插件中的ChromeOptions options=new ChromeOptions();
和,options.addExtensions(new File("\\vue.crx"));
之后,进入设计器配置页面,执行测试步骤,生成报表配置,比如图4所示的报表配置。
然后,通过executeScript脚本执行器,获取当前报表页面的vue配置将配置转化成Map<String,Object>进行二次处理如:
Map<String,Object>map=(Map<String,Object>)driver
.executeScript("return__VUE_DEVTOOLS_GLOBAL_HOOK__.store.state");
或者,也可直接获取某一关键词的值如:
String expect=(String)driver.executeScript("return__VUE_DEVTOOLS_GLOBAL_HOOK__.store.state.charts.chartsOption[0].name";
从报表中引入配置的精度直接取决于去用js在vuex获取配置的精度。
最后,从Map中获取对应key的value值与预期值进行比较,如:map.get(data)获取当前渲染数据,与测试预期结果做比较,完成一条自动化测试案例。
现有方案中的问题在于,可视化报表工具自由化操作程度高,场景冗余多,日常版本迭代维护过程中,回归测试成本巨大(无法采用自动化测试执行回归测试)。
本实施例的设计目的在于改善原有可视化报表工具(基于canvas绘图)无法进行页面自动化测试的问题,最大化的去覆盖自动化测试场景,降低回归测试阶段的测试人力成本,使回归测试得到数据管控。较之同行业中采用页面转二进制对比法、坐标定位对比法,页面的纯样式修改及布局修改带来的脚本维护的压力会更小,也就提高了测试效率。减少纯样式调整对自动化脚本的影响,减少自动化脚本维护的人力投入,降低了回归测试成本。以及,解决了canvas直接绘制中,由于采用元素定位方式的常规的自动化脚本无法对执行结果进行校验,即可以自动化生成但无法自动化测试,导致的测试结果无法有效反馈至测试端的问题,实现了回归过程得到管控。
本发明实施例还提供一种基于vuex的可视化报表工具自动化测试装置,包括:
插件管理模块,用于在浏览器启动加载项加入vuex插件,并运行所述浏览器;
执行模块,用于通过自动化脚本进入报表页面;
处理模块,用于获取所述报表页面的vuex配置数据,根据所述报表页面的vuex配置数据校验所述报表页面,并生成测试报告。
其中,所述插件管理模块,具体用于设置所述浏览器的驱动路径,将自动化测试工程指向所述浏览器;
在配置所述浏览器的启动加载项时引入vuex插件,所述vuex插件用于在所述浏览器中打开报表页面后,获取报表页面的vuex配置数据。
所述执行模块,具体用于通过selenium框架的自动化脚本,进入所述报表页面。
所述处理模块,具体用于执行数据提取命令,确定所述报表页面的vuex配置数据所在字段,并提取所述报表页面的vuex配置数据。
所述处理模块,具体还用于将所获取的vuex配置数据中的校验参数的实际值与预期值比对,若所述校验参数的实际值与所述预期值匹配则校验成功。
现有方案中的问题在于,可视化报表工具自由化操作程度高,场景冗余多,日常版本迭代维护过程中,回归测试成本巨大(无法采用自动化测试执行回归测试)。
本实施例的设计目的在于改善原有可视化报表工具(基于canvas绘图)无法进行页面自动化测试的问题,最大化的去覆盖自动化测试场景,降低回归测试阶段的测试人力成本,使回归测试得到数据管控。较之同行业中采用页面转二进制对比法、坐标定位对比法,页面的纯样式修改及布局修改带来的脚本维护的压力会更小,也就提高了测试效率。减少纯样式调整对自动化脚本的影响,减少自动化脚本维护的人力投入,降低了回归测试成本。以及,解决了canvas直接绘制中,由于采用元素定位方式的常规的自动化脚本无法对执行结果进行校验,即可以自动化生成但无法自动化测试,导致的测试结果无法有效反馈至测试端的问题,实现了回归过程得到管控。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于设备实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应该以权利要求的保护范围为准。