基于网页前端测试的问题定位方法及相关装置、系统制造方法及图纸

本申请公开了一种基于网页前端测试的问题定位方法及相关装置、系统，其基于与目标网页的开发语言对应的选择器确定网页前端测试得到的问题信息在目标网页的源码中的位置，得到问题定位信息，并生成用于描述所述问题信息的辅助代码，再根据所述问题定位信息将所述辅助代码添加至源码中，然后根据该具有辅助代码的源码执行网页展示，使得在显示源码对应的目标网页的同时，辅助代码对应的问题信息也显示于目标网页中，从而在执行网页展示时，问题信息可以显示于对应的异常网页元素的相关位置，实现自动化、可视化的问题定位，提高定位效率、减少定位耗时，有利于快速确定各个问题的优先级，优先修复影响严重的问题，降低甚至消除目标页面崩溃的风险。

【技术实现步骤摘要】

本申请涉及网页前端测试
，尤其涉及一种基于网页前端测试的问题定位方法及相关装置、系统。
技术介绍
网页(web)前端测试是指，对于通过HTML(即HyperTextMarkupLanguage，超文本标记语言)、CSS(CascadingStyleSheets，级联样式表)、XML(即ExtensibleMarkupLanguage，可扩展标记语言)及JavaScript等前端开发语言开发的网页，根据其源代码执行静态分析及动态分析，来获取网页的问题信息，以便根据该问题信息实现问题定位及修复，达到优化网页展示效果、提高网页加载速度的目的。所谓问题定位，即确定问题信息对应的异常网页元素在网页中的位置。常用的问题定位方法需要人工辅助分析，即，相关技术人员首先通过分析问题信息中的ID、class(类)、url(即UniformResourceLocator，统一资源定位符)等特征来确定网页源码中存在相应特征的异常代码的位置，再通过比对源码和网页展示规则来确定异常代码对应的网页元素在网页中的位置，也即异常网页元素在网页中的位置。上述基于人工辅助分析实现问题定位，不仅效率低、成本高，还导致无法快速确定网页中各个问题的影响面和修复优先级，不利于及时修复严重问题，存在较大的网页崩溃等风险。
技术实现思路
为克服相关技术中存在的问题，本申请提供一种基于网页前端测试的问题定位方法及相关装置、系统。本申请第一方面提供一种基于网页前端测试的问题定位方法；该方法包括：获取目标网页的源码，以及通过网页前端测试得到的目标网页的问题信息；基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述源码中的位置，得到问题定位信息；生成用于描述所述问题信息的辅助代码；根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处；根据所述具有辅助代码的源码执行网页展示，使得所述问题信息显示于目标网页中对应的异常网页元素的相关位置处。结合第一方面，在第一方面的第一种可行的实施方式中，所述根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处，包括：根据所述源码解析得到目标网页对应的文件对象模型DOM；根据所述问题定位信息确定所述DOM中的问题节点；确定所述问题节点在目标网页中对应的异常元素展示区域；根据预设规则选择与所述异常元素展示区域相关的区域作为问题信息展示区域，并将所述辅助代码添加至所述源码中所述问题信息展示区域对应的代码位置处。结合第一方面第一种可行的实施方式，在第一方面的第二种可行的实施方式中，所述问题定位方法还包括：生成预设标记对应的标记代码，并将所述标记代码添加至所述源码中，以便在展示目标网页时将所述预设标记展示于所述异常元素展示区域内。本申请第二方面提供一种基于网页前端测试的问题定位装置；该装置包括：测试结果获取单元，用于获取目标网页的源码，以及通过网页前端测试得到的目标网页的问题信息；定位信息获取单元，用于基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述源码中的位置，得到问题定位信息；辅助代码生成单元，用于生成用于描述所述问题信息的辅助代码；源码编辑单元，用于根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处；网页展示单元，用于根据所述具有辅助代码的源码执行网页展示，使得所述问题信息显示于目标网页中对应的异常网页元素的相关位置处。结合第二方面，在第二方面的第一种可行的实施方式中，所述源码编辑单元包括：DOM生成模块，用于根据所述源码解析得到目标网页对应的文件对象模型DOM；问题节点确定模块，用于根据所述问题定位信息确定所述DOM中的问题节点；异常区域确定模块，用于确定所述问题节点在目标网页中对应的异常元素展示区域；辅助代码插入模块，用于根据预设规则选择与所述异常元素展示区域相关的区域作为问题信息展示区域，并将所述辅助代码添加至所述源码中所述问题信息展示区域对应的代码位置处。结合第二方面的第一种可行的实施方式，在第二方面的第二种可行的实施方式中，所述源码编辑单元还包括：标记代码插入模块，用于生成预设标记对应的标记代码，并将所述标记代码添加至所述源码中，以便在展示目标网页时将所述预设标记展示于所述异常元素展示区域内。本申请第三方面提供一种服务器，用于基于网页前端测试的问题定位；该服务器包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：获取目标网页的源码，以及通过网页前端测试得到的目标网页的问题信息；基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述源码中的位置，得到问题定位信息；生成用于描述所述问题信息的辅助代码；根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处，并将所述具有辅助代码的源码发送至客户端，使得所述客户端根据所述具有辅助代码的源码执行网页展示。结合第三方面，在第三方面第一种可行的实施方式中，为实现根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处，所述服务器被配置为：根据所述源码解析得到目标网页对应的文件对象模型DOM；根据所述问题定位信息确定所述DOM中的问题节点；确定所述问题节点在目标网页中对应的异常元素展示区域；根据预设规则选择与所述异常元素展示区域相关的区域作为问题信息展示区域，并将所述辅助代码添加至所述源码中所述问题信息展示区域对应的代码位置处。结合第三方面第一种可行的实施方式，在第三方面第二种可行的实施方式中，所述服务器还被配置为：生成预设标记对应的标记代码，并将所述标记代码添加至所述源码中，以便在展示目标网页时将所述预设标记展示于所述异常元素展示区域内。本申请第四方面提供一种网页前端测试及问题定位系统，包括：前端测试子系统、定位服务器和客户端；所述前端测试子系统被配置为：根据目标网页的源码对目标网页执行前端测试，得到目标网页的问题信息；所述定位服务器被配置为：获取所述源码和问题信息；基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述源码中的位置，得到问题定位信息；生成用于描述所述问题信息的辅助代码；根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处，并将所述具有辅助代码的本文档来自技高网...

【技术保护点】
一种基于网页前端测试的问题定位方法，其特征在于，包括：获取目标网页的源码，以及通过网页前端测试得到的目标网页的问题信息；基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述源码中的位置，得到问题定位信息；生成用于描述所述问题信息的辅助代码；根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位置处；根据所述具有辅助代码的源码执行网页展示，使得所述问题信息显示于目标网页中对应的异常网页元素的相关位置处。

【技术特征摘要】
1.一种基于网页前端测试的问题定位方法，其特征在于，包括：
获取目标网页的源码，以及通过网页前端测试得到的目标网页的问题信息；
基于与目标网页的开发语言对应的选择器确定所述问题信息对应的异常代码在所述
源码中的位置，得到问题定位信息；
生成用于描述所述问题信息的辅助代码；
根据所述问题定位信息将所述辅助代码添加至所述源码中对应的异常代码的相关位
置处；
根据所述具有辅助代码的源码执行网页展示，使得所述问题信息显示于目标网页中
对应的异常网页元素的相关位置处。
2.根据权利要求1所述的问题定位方法，其特征在于，所述根据所述问题定位信息
将所述辅助代码添加至所述源码中对应的异常代码的相关位置处，包括：
根据所述源码解析得到目标网页对应的文件对象模型DOM；
根据所述问题定位信息确定所述DOM中的问题节点；
确定所述问题节点在目标网页中对应的异常元素展示区域；
根据预设规则选择与所述异常元素展示区域相关的区域作为问题信息展示区域，并
将所述辅助代码添加至所述源码中所述问题信息展示区域对应的代码位置处。
3.根据权利要求2所述的问题定位方法，其特征在于，还包括：
生成预设标记对应的标记代码，并将所述标记代码添加至所述源码中，以便在展示
目标网页时将所述预设标记展示于所述异常元素展示区域内。
4.一种基于网页前端测试的问题定位装置，其特征在于，包括：
测试结果获取单元，用于获取目标网页的源码，以及通过网页前端测试得到的目标
网页的问题信息；
定位信息获取单元，用于基于与目标网页的开发语言对应的选择器确定所述问题信
息对应的异常代码在所述源码中的位置，得到问题定位信息；
辅助代码生成单元，用于生成用于描述所述问题信息的辅助代码；
源码编辑单元，用于根据所述问题定位信息将所述辅助代码添加至所述源码中对应
的异常代码的相关位置处；
网页展示单元，用于根据所述具有辅助代码的源码执行网页展示，使得所述问题信
息显示于目标网页中对应的异常网页元素的相关位置处。
5.根据权利要求4所述的问题定位装置，其特征在于，所述源码编辑单元包括：
DOM生成模块，用于根据所述源码解析得到目标网页对应的文件对象模型DOM；
问题节点确定模块，用于根据所述问题定位信息确定所述DOM中的问题节点；
异常区域确定模块，用于确定所述问题节点在目标网页中对应的异常元素展示区域；
辅助代码插入模块，用于根据预设规则选择与所述异常元素展示区域相关的区域作
为问题信息展示区域，并将所述辅助代码添加至所述源码中所述问题信息展示区域对应
的代码位置处。
6.根据权利要求5所述的问题定位装置，其特征在于，所述源码编辑单元还包括：
标记代码插入模块，用于生成预设标记对应的标记代码，并将所述标记代码添加至
所述源码中，以便在展示目标网页时将所述预设标记展示于所述异常元素展示区域内。
7.一种服务器，其特征在于，用于基于网页前端...

【专利技术属性】
技术研发人员：匡波，栗志果，管涛，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY