一种Web前端性能自动化测试方法及系统与流程

一种web前端性能自动化测试方法及系统
技术领域
1.本发明涉及数据处理技术领域，特别是涉及一种web前端性能自动化测试方法及系统。


背景技术：

2.在现有应用的前端性能测试中，测试人员需要收集每个页面的白屏时间、首屏时间、渲染时间、堆内存消耗及回收等性能指标。无论是在实施项目中，还是主线产品，其性能测试均依靠测试人员通过手工请求各页面，采集各类性能指标数据，并且使用excel手动记录各项数据，最后加工生成性能测试报告，以此确定前端页面性能是否满足需求。但是，现有技术存在以下缺点：
3.1.产品版本发布较频繁时，受限于有限的测试资源，纯粹依靠手工执行测试，无法覆盖全部产品版本及全部内容。此外，不同项目的页面配置及页面关联的业务功能不尽相同，如果只根据其继承的某个版本的产品性能，来判断项目自身的页面性能，显然并不可靠。因此，有些项目需要单独做变更页面的性能测试。
4.2.测试过程中，对于菜单访问方式的前端测试，需要人工通过浏览器中的开发者工具录制事件日志，并手动筛查统计各项指标对应的事件节点时间，来获取性能数据，人工操作步骤较繁杂。
5.3.对于菜单访问方式，无法通过chrome接口获取各类前端事件时间，无法直接计算白屏、首屏、渲染等耗时，需要人工录制，并从录制结果中筛选各类事件，测试耗时会更长、效率更低。
6.4.收集堆内存时，也需要肉眼观察内存起始值、峰值、稳定值，不仅误差大，且获取数值时极易出现错误。
7.5.当手工记录测试结果的页面较多时，可能存在输入错误数据，影响测试结果的正确性。
8.6.前端性能测试存在直接通过url和通过系统菜单点击访问两种方式，因为收集计算前端渲染等时间指标需要分别测试这两种方式，以保证数据及场景的全面性，这也导致人工要记录的数据更多，耗时更长。


技术实现要素：

9.为解决以上现有技术问题，本发明提供一种web前端性能自动化测试方法及系统，实现web应用前端性能自动化测试。
10.本发明第一方面提供一种web前端性能自动化测试方法，包括：
11.获取并解析测试数据；
12.待测试通讯会话链路建立完成后，通过所述测试数据生成的测试指令对web端进行测试；
13.根据被测测试页面路径，分别对url场景和菜单场景进行访问，并接收url场景的
访问性能数据和菜单场景的访问性能数据；
14.将所述url场景的访问性能数据和所述菜单场景的访问性能数据通过重写方法写入测试报告中，待测试完成后，将所述测试报告自动发送至相关人员。
15.进一步地，所述分别对url场景和菜单场景进行访问，包括：对url场景进行访问，具体地：
16.待页面稳定及资源加载完成后，从开发者控制台中获取当前使用的js堆内存，并实时监控所述js堆内存；
17.由自动化测试框架重新请求该页面，直到请求及资源加载结束后，停止实时监控，并存储实时监控识别到的js堆内存峰值及页面稳定后的内存值。
18.进一步地，所述分别对url场景和菜单场景进行访问，包括：对菜单场景进行访问，具体地：
19.访问默认页面并记录页面稳定时的堆内存，清除缓存后，访问被测页面，并开始录制页面加载事件日志；
20.获取js堆内存的实时数据，待所述被测页面稳定后，停止录制页面加载事件日志，并将所述页面加载事件日志保存到本地；其中，所述页面加载事件日志包括：页面访问时间及页面渲染时间；
21.根据所述页面访问时间及页面渲染时间计算访问时间差及渲染时间差。
22.进一步地，所述获取并解析测试数据之后，包括：
23.建立测试通讯会话链路；具体地：
24.通过selenium调用webdriver，使用所述webdriver驱动chrome浏览器，并启动被测的web应用，以建立测试通讯会话链路。
25.本发明第二方面提供一种web前端性能自动化测试系统，包括：
26.数据处理模块，用于获取并解析测试数据；
27.测试模块，用于待测试通讯会话链路建立完成后，通过所述测试数据生成的测试指令对web端进行测试；
28.场景访问模块，用于根据被测测试页面路径，分别对url场景和菜单场景进行访问，并接收url场景的访问性能数据和菜单场景的访问性能数据；
29.测试报告生成模块，用于将所述url场景的访问性能数据和所述菜单场景的访问性能数据通过重写方法写入测试报告中，待测试完成后，将所述测试报告自动发送至相关人员。
30.进一步地，所述场景访问模块，还用于：
31.待页面稳定及资源加载完成后，从开发者控制台中获取当前使用的js堆内存，并实时监控所述js堆内存；
32.由自动化测试框架重新请求该页面，直到请求及资源加载结束后，停止实时监控，并存储实时监控识别到的js堆内存峰值及页面稳定后的内存值。
33.进一步地，所述场景访问模块，还用于：
34.访问默认页面并记录页面稳定时的堆内存，清除缓存后，访问被测页面，并开始录制页面加载事件日志；
35.获取js堆内存的实时数据，待所述被测页面稳定后，停止录制页面加载事件日志，
并将所述页面加载事件日志保存到本地；其中，所述页面加载事件日志包括：页面访问时间及页面渲染时间；
36.根据所述页面访问时间及页面渲染时间计算访问时间差及渲染时间差。
37.进一步地，所述数据处理模块，还用于：
38.建立测试通讯会话链路；具体地：
39.通过selenium调用webdriver，使用所述webdriver驱动chrome浏览器，并启动被测的web应用，以建立测试通讯会话链路。
40.本发明第三方面提供一种电子装置，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面中任意一项所述的web前端性能自动化测试方法。
41.本发明第四方面提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上述第一方面中任意一项所述的web前端性能自动化测试方法。
42.与现有技术相比，本发明实施例的有益效果在于：
43.本发明提供一种web前端性能自动化测试方法及系统，其中方法包括：获取并解析测试数据；待测试通讯会话链路建立完成后，通过所述测试数据生成的测试指令对web端进行测试；根据被测测试页面路径，分别对url场景和菜单场景进行访问，并接收url场景的访问性能数据和菜单场景的访问性能数据；将所述url场景的访问性能数据和所述菜单场景的访问性能数据通过重写方法写入测试报告中，待测试完成后，将所述测试报告自动发送至相关人员。本发明在测试过程中，操作chrome控制台监控各项测试数据，降低人工采集及计算的错误率，并减少工作量。
附图说明
44.为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
45.图1是本发明某一实施例提供的一种web前端性能自动化测试方法的流程图；
46.图2是本发明另一实施例提供的一种web前端性能自动化测试方法的流程图；
47.图3是本发明另一实施例提供的一种web前端性能自动化测试方法的流程图；
48.图4是本发明另一实施例提供的一种web前端性能自动化测试方法的流程图；
49.图5是本发明另一实施例提供的一种web前端性能自动化测试方法的流程图；
50.图6是本发明又一实施例提供的一种web前端性能自动化测试方法的流程图；
51.图7是本发明某一实施例提供的一种web前端性能自动化测试系统的装置图；
52.图8是本发明某一实施例提供的一种电子设备的结构图。
具体实施方式
53.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他
实施例，都属于本发明保护的范围。
54.应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。
55.应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
56.术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
57.术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
58.第一方面。
59.请参阅图1，本发明一实施例提供一种web前端性能自动化测试方法，包括：
60.s10、获取并解析测试数据。
61.s20、待测试通讯会话链路建立完成后，通过所述测试数据生成的测试指令对web端进行测试。
62.s30、根据被测测试页面路径，分别对url场景和菜单场景进行访问，并接收url场景的访问性能数据和菜单场景的访问性能数据。
63.s40、将所述url场景的访问性能数据和所述菜单场景的访问性能数据通过重写方法写入测试报告中，待测试完成后，将所述测试报告自动发送至相关人员。
64.在本发明实施例的某一具体实施方式中，所述分别对url场景和菜单场景进行访问，包括：对url场景进行访问，具体地：
65.待页面稳定及资源加载完成后，从开发者控制台中获取当前使用的js堆内存，并实时监控所述js堆内存；
66.由自动化测试框架重新请求该页面，直到请求及资源加载结束后，停止实时监控，并存储实时监控识别到的js堆内存峰值及页面稳定后的内存值。
67.所述分别对url场景和菜单场景进行访问，还包括：对菜单场景进行访问，具体地：
68.访问默认页面并记录页面稳定时的堆内存，清除缓存后，访问被测页面，并开始录制页面加载事件日志；
69.获取js堆内存的实时数据，待所述被测页面稳定后，停止录制页面加载事件日志，并将所述页面加载事件日志保存到本地；其中，所述页面加载事件日志包括：页面访问时间及页面渲染时间；
70.根据所述页面访问时间及页面渲染时间计算访问时间差及渲染时间差。
71.在本发明实施例的另一具体实施方式中，所述获取并解析测试数据之后，包括：
72.建立测试通讯会话链路；具体地：
73.通过selenium调用webdriver，使用所述webdriver驱动chrome浏览器，并启动被测的web应用，以建立测试通讯会话链路。
74.本发明提供的方法在测试过程中，操作chrome控制台监控各项测试数据，降低人工采集及计算的错误率，并减少工作量。
75.在本发明另一具体实施例中，本发明提供一种web前端性能自动化测试方法，包
括：
76.1.测试人员通过excel设计录入相关场景的页面，excel文档中每行数据均维护单个web页面，包括维护该页面的是否测试及页面访问路径。通过自动化测试平台web端维护文档和账号等信息并上传到测试服务器，点击开始测试后，自动读取excel文件。解析excel文件时，从第一行数据开始遍历，先通过是否测试的标识列提取需要测试的所有页面，并依次分解对应的访问路径，如一级菜单、二级菜单等，将页面的行位置及分解后的路径存储到指定全局变量中，并通过输入的系统地址、账号、密码、账号岗位登录访问被测系统，并开始执行性能测试(流程如图2)。
77.基于上述测试用例生成过程，主要达到了以下目的：
78.1)每个excel文件只需读取1次就可存储所有需执行的测试用例，降低了文件读写开销。
79.2)每次测试时都重新根据excel数据实时快速生成测试用例。因此，只需确保excel数据的正确性，测试用例脚本零维护，减少了工作量。
80.3)当需要对不同环境、不同账号做测试时，只需在自动化测试平台中填写环境及账号信息重新发起测试，减少人工成本。
81.4)当测试平台没有填写任何信息且直接发起测试时，系统自动追踪客户端地址，获取客户端最近的测试申请信息，直接执行性能测试任务，即一键完成测试任务。
82.2.如图3所示，测试脚本执行时，先通过selenium调用webdriver，使用webdriver驱动chrome浏览器，并启动被测的web应用，从而建立起完整的通讯会话链路。连接成功后，在chrome上的被测web应用中，通过python脚本执行测试指令，根据被测测试页面路径，对每个页面进行(url访问和菜单访问两种场景)访问，并采用不同的监控采集方法，分别收集这两种访问方式对应的性能数据：
83.注：url访问时会请求加载浏览器当前标签页的资源，菜单访问时只请求加载访问页面的资源
84.2.1如图4所示，url访问：按照页面路径访问页面后，刷新该页面，等待页面稳定及资源加载结束后，利用ai识别图像方法及文字解析，从开发者控制台中获取当前使用的js堆内存，并开启实时监控。再由自动化测试框架重新请求该页面，直到请求及资源加载结束后，停止ai监控，并存储ai监控识别到的js堆内存峰值及页面稳定后的内存值。同步采集chrome接口提供的firstpainttime、navigationstart、loadeventend、domcontentloadedeventend等事件对应的时间点，计算白屏时间、首屏时间、渲染时间等前端性能指标。
85.2.2如图5所示，菜单访问：先访问默认页面并记录该页面稳定时的堆内存，清除缓存后，访问被测页面。通过ai图像识别，记录开发者监控工具界面下稳定后的堆内存，重新访问被测页面，同时通过鼠键模拟控制chrome控制台录制页面加载过程，并保存录制数据。以及通过ai识别方式获取js堆内存的实时数据(页面访问前，页面访问峰值，页面访问稳定后)，待被测页面稳定后，停止页面加载事件日志录制并将日志保存到本地，该日志中tracingstartedinbrowser、paint分别代表页面访问及页面渲染时间。解析该录制数据，计算每个事件(如渲染事件)的时间差(渲染耗时)。
86.基于上述过程，达到以下目的：
87.1)综合了用户访问系统时存在的两种访问场景(url访问和菜单访问)，url访问时要加载整个浏览器标签页的资源，而菜单访问时只会加载被访问页面的资源文件，不会加载菜单和头像信息资源数据，即不会请求和加载menu.html和icon.png等其他非访问页面的文件，完善了测试场景。
88.2)图像识别方法能有效地监控堆内存变化，实时记录页面加载时的堆内存和页面加载结束后的堆内存，配合测试框架中的相关算法，输出两种访问方式的堆内存回收和消耗情况，更好地监测系统是否存在内存溢出问题。
89.3)结合鼠键模拟和chrome开放的相关方法，测试过程中可自由操控开发者控制台工作，便于快速打开堆内存测试工具、页面加载监测工具等，辅助采集测试数据，取代人工操作。
90.4)针对白屏、首屏和渲染时间等性能指标，采用日志文件解析和js接口请求方式进行采集，相对人工计算和手动执行更加精准和快速。
91.3.如图6所示，执行每个用例时，无论是url访问方式，还是菜单访问方式，系统都会依据用例文档上的指标顺序采集并解析堆内存的前后变化值以及各类事件耗时，通过调用第三方模块openpyxl重写方法将性能数据回写到测试报告中，用例执行结束后，系统读取数据库中提交人ip最新提交的邮件地址，调用测试框架中封装的邮件发送方法，将测试报告自动发送给相关人员。
92.本发明提供的方法使用基于python selenium chrome的技术手段，实现web应用前端性能自动化测试，并结合图像识别、鼠键模拟操作、文件数据读取、事件节点耗时计算等方式收集性能数据。
93.1.通过excel维护测试页面，并基于excel数据，依据预设模板，自动生成测试用例，通过脚本驱动测试。测试数据与测试脚本分离，降低维护成本。
94.2.测试人员无需大量编码，只需借助excel维护需要测试的页面，驱动chrome浏览器完成各项测试操作，大幅降低测试门槛。
95.3.测试过程中，操作chrome控制台监控各项测试数据，通过文件读取、数据筛选、ai图像识别、鼠键模拟等方法采集数据，降低人工采集及计算的错误率，并减少工作量。
96.4.借助python技术，将从chrome浏览器中收集的数据直接写入测试报告中，减少人工干预，降低成本。
97.5.同一提交人在前端无需重复上传相同测试用例和系统信息，零输入直接提交测试时，系统会自动通过捕捉其ip，提取其最近提交的测试用例和系统信息展开测试，降低操作繁琐度，操作更加便捷。
98.第二方面。
99.请参阅图7，本发明一实施例提供一种web前端性能自动化测试系统，其特征在于，包括：
100.数据处理模块10，用于获取并解析测试数据；
101.测试模块20，用于待测试通讯会话链路建立完成后，通过所述测试数据生成的测试指令对web端进行测试；
102.场景访问模块30，用于根据被测测试页面路径，分别对url场景和菜单场景进行访问，并接收url场景的访问性能数据和菜单场景的访问性能数据；
103.测试报告生成模块40，用于将所述url场景的访问性能数据和所述菜单场景的访问性能数据通过重写方法写入测试报告中，待测试完成后，将所述测试报告自动发送至相关人员。
104.在本发明实施例的某一具体实施方式中，所述场景访问模块30，还用于：
105.待页面稳定及资源加载完成后，从开发者控制台中获取当前使用的js堆内存，并实时监控所述js堆内存；
106.由自动化测试框架重新请求该页面，直到请求及资源加载结束后，停止实时监控，并存储实时监控识别到的js堆内存峰值及页面稳定后的内存值。
107.在本发明实施例的另一具体实施方式中，所述场景访问模块30，还用于：
108.访问默认页面并记录页面稳定时的堆内存，清除缓存后，访问被测页面，并开始录制页面加载事件日志；
109.获取js堆内存的实时数据，待所述被测页面稳定后，停止录制页面加载事件日志，并将所述页面加载事件日志保存到本地；其中，所述页面加载事件日志包括：页面访问时间及页面渲染时间；
110.根据所述页面访问时间及页面渲染时间计算访问时间差及渲染时间差。
111.在本发明实施例的另一具体实施方式中，所述数据处理模块10，还用于：
112.建立测试通讯会话链路；具体地：
113.通过selenium调用webdriver，使用所述webdriver驱动chrome浏览器，并启动被测的web应用，以建立测试通讯会话链路。
114.本发明提供的系统在测试过程中，操作chrome控制台监控各项测试数据，降低人工采集及计算的错误率，并减少工作量。
115.第三方面。
116.本发明提供了一种电子设备，该电子设备包括：
117.处理器、存储器和总线；
118.所述总线，用于连接所述处理器和所述存储器；
119.所述存储器，用于存储操作指令；
120.所述处理器，用于通过调用所述操作指令，可执行指令使处理器执行如本技术的第一方面所示的一种web前端性能自动化测试方法对应的操作。
121.在一个可选实施例中提供了一种电子设备，如图8所示，图8所示的电子设备5000包括：处理器5001和存储器5003。其中，处理器5001和存储器5003相连，如通过总线5002相连。可选地，电子设备5000还可以包括收发器5004。需要说明的是，实际应用中收发器5004不限于一个，该电子设备5000的结构并不构成对本技术实施例的限定。
122.处理器5001可以是cpu，通用处理器，dsp，asic，fpga或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本技术公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器5001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，dsp和微处理器的组合等。
123.总线5002可包括一通路，在上述组件之间传送信息。总线5002可以是pci总线或eisa总线等。总线5002可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
124.存储器5003可以是rom或可存储静态信息和指令的其他类型的静态存储设备，ram或者可存储信息和指令的其他类型的动态存储设备，也可以是eeprom、cd-rom或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。
125.存储器5003用于存储执行本技术方案的应用程序代码，并由处理器5001来控制执行。处理器5001用于执行存储器5003中存储的应用程序代码，以实现前述任一方法实施例所示的内容。
126.其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字tv、台式计算机等等的固定终端。
127.第四方面。
128.本发明提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现本技术第一方面所示的一种web前端性能自动化测试方法。
129.本技术的又一实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。