一种页面兼容性测试系统和方法与流程

本发明涉及互联网领域，特别涉及一种页面兼容性测试系统和方法。

背景技术：

电商平台移动端H5页面，为使其能够适用于各种不同的终端设备和软件版本等，需要预先分别进行兼容性测试。

现有技术中，主要采用用户(测试人员)手动的方式，进行以下各方面的兼容性测试：操作系统/平台兼容、浏览器兼容、屏幕尺寸/分辨率兼容等。

但是，这种测试方式比较耗时，且重复工作量很大，从而导致测试效率低下。

技术实现要素：

有鉴于此，本发明提供了一种页面兼容性测试系统和方法，能够提高测试效率。

为了达到上述目的，本发明的技术方案是这样实现的：

一种页面兼容性测试系统，包括：前端模块和后端模块；

所述前端模块，用于在用户设定的开始扫描到结束扫描这一时间段内，利用Fiddler插件进行以下处理：抓取对测试页面进行操作过程中所产生的符合预定要求的请求，并从抓取到的请求中过滤出预定类型的文件，将过滤出的各文件发送给所述后端模块；

所述后端模块，用于对过滤出的各文件进行兼容性扫描，得到兼容性测试结果。

一种页面兼容性测试方法，包括：

在用户设定的开始扫描到结束扫描这一时间段内，利用Fiddler插件抓取对测试页面进行操作过程中所产生的符合预定要求的请求，并从抓取到的请求中过滤出预定类型的文件；

对过滤出的各文件进行兼容性扫描，得到兼容性测试结果。

可见，采用本发明所述方案，能够快速扫描出可能存在的兼容性问题，从而提高 了测试效率，而且，节省了大量的人力成本，另外，本发明所述方案实现起来简单方便，从而便于进行普及和推广。

附图说明

图1为本发明页面兼容性测试系统实施例的组成结构示意图。

图2为本发明所述Fiddler插件的demo图。

图3为本发明页面兼容性测试方法实施例的流程图。

具体实施方式

为了使本发明的技术方案更加清楚、明白，以下参照附图并举实施例，对本发明所述方案作进一步的详细说明。

图1为本发明页面兼容性测试系统实施例的组成结构示意图，如图1所示，包括：前端模块和后端模块。

前端模块，用于在用户设定的开始扫描到结束扫描这一时间段内，利用Fiddler插件进行以下处理：抓取对测试页面进行操作过程中所产生的符合预定要求的请求，并从抓取到的请求中过滤出预定类型的文件，将过滤出的各文件发送给后端模块；

后端模块，用于对过滤出的各文件进行兼容性扫描，得到兼容性测试结果。

其中，符合预定要求的请求可包括：响应包中的超文本传输协议(http)状态码为2xx且包体内容不为空的请求。

预定类型的文件可包括以下之一或任意组合：超文本标记语言(HTML)文件、层叠样式表(CSS)文件、JS(JavaScript)文件。

如图3所示，后端模块中又可具体包括：扫描子模块和报告子模块。

扫描子模块，用于针对过滤出的各文件，分别根据预先生成的兼容性问题知识库对该文件进行兼容性分析，得到分析结果；根据各分析结果生成预定格式的扫描报告素材，发送给报告子模块；

报告子模块，用于对接收到的扫描报告素材进行保存，当用户请求查看兼容性测试结果时，将所述扫描报告素材加载到预先生成的报告模版中，呈现在用户的浏览器 中。

另外，Fiddler插件还可进一步用于，对过滤出的各文件进行压缩打包，将得到的压缩包发送给扫描子模块；

相应的，扫描子模块还可进一步用于，在对过滤出的各文件进行兼容性扫描之前，对接收到的压缩包进行解压，得到过滤出的各文件。

结合上述介绍，以下分别对Fiddler插件和后端模块的具体实现进行进一步的详细说明。

(一)Fiddler插件

图2为本发明所述Fiddler插件的demo图，如图2所示，用户点击“开始扫描”，并可通过APP或手机浏览器等访问测试页面(如http://www.jd.com)并进行操作，如输入关键词进行搜索等，操作完成后，可点击“结束扫描”。

另外，用户可预先勾选需要扫描的文件类型，如图2所示，其中的“全部扫描”即表示需要对HTML文件、CSS文件和JS文件均进行扫描，假设本实施例中勾选“全部扫描”。

从开始扫描到结束扫描这一时间段内，Fiddler插件会抓取对测试页面进行操作过程中所产生的符合预定要求的请求，主要是对响应包中的http状态码为2xx且包体内容不为空的请求进行抓取，并可根据响应头中的Content-Type字段进行文件类型判断，过滤出所需的HTML文件、CSS文件和JS文件，较佳的，还可对过滤出的各文件进行Gzip压缩打包，将得到的压缩包发送给后端模块。

Fiddler是一个http协议调试代理工具，为实现本发明所述功能，需要对现有Fiddler进行扩展，具体扩展方式如下：

客户端方面，使用.net框架语言进行Fiddler扩展，具体表现形式为用接口描述语言(IDE)建立一个C#的类库项目，生成一个动态链接库(DLL)文件，将其放到Fiddler安装文件中的Scripts文件夹；

可使用Fiddler相关扩展的接口，如IAutoTamper接口里的OnLoad()方法提供相关用户界面(UI)扩展，另外，IFiddlerExtension接口中提供了对每一个http/https发送和接收请求的调用，可修改，记录，或其它操作。

(二)后端模块

如前所述，后端模块中可具体包括：扫描子模块和报告子模块。

扫描子模块接收到Fiddler插件发送来的压缩包后，可对其进行解压，得到过滤出的各文件，并可进一步识别各文件的类型是否为HTML、CSS或JS，忽略不需要进行扫描的文件等，之后，可针对每个文件，分别根据预先生成的兼容性问题知识库对该文件进行兼容性分析，即对该文件进行代码分析并与兼容性问题知识库中的内容进行匹配等，得到分析结果，并根据各分析结果生成预定格式的扫描报告素材，发送给报告子模块。

兼容性问题知识库主要从业界已积累的兼容性问题以及实际工作中反馈、搜集等得到的产品问题分析和转化而来，支持对兼容性问题知识库进行随时更新。兼容性问题知识库中中的内容可分为两类，即正则表达式和检测脚本，其中，正则表达式主要用于代码的按行分析，检测脚本主要用于识别按行分析无法识别的问题。

如何得到分析结果为现有技术，另外，所述预定格式可为可扩展标记语言(XML)格式或Json格式等，如何根据各分析结果生成预定格式的扫描报告素材同样为现有技术。

报告子模块可对接收到的扫描报告素材进行保存，同时保存有预先生成的报告模版，当用户请求查看兼容性测试结果时，可将扫描报告素材加载到报告模版中，呈现在用户的浏览器中。如图2所示，当用户点击“查看结果”时，可跳转到相应的统一资源定位符(URL)对应的页面进行测试结果展示。

当然，以上仅为举例说明，在实际应用中，也可以采用其它方式，如将兼容性测试结果直接发送到用户指定的邮箱中，以供用户查看。

基于上述介绍，本发明同时公开了一种页面兼容性测试方法。

图3为本发明页面兼容性测试方法实施例的流程图，如图3所示，包括以下步骤31～32。

步骤31：在用户设定的开始扫描到结束扫描这一时间段内，利用Fiddler插件抓取对测试页面进行操作过程中所产生的符合预定要求的请求，并从抓取到的请求中过滤出预定类型的文件。

其中，符合预定要求的请求可包括：响应包中的http状态码为2xx且包体内容不为空的请求。

预定类型的文件可包括以下之一或任意组合：HTML文件、CSS文件、JS文件。

步骤32：对过滤出的各文件进行兼容性扫描，得到兼容性测试结果。

本步骤中，可针对过滤出的各文件，分别根据预先生成的兼容性问题知识库对该文件进行兼容性分析，得到分析结果；根据各分析结果生成预定格式的扫描报告素材；

当用户请求查看兼容性测试结果时，可将所述扫描报告素材加载到预先生成的报告模版中，呈现在用户的浏览器中。

在实际应用中，支持对兼容性问题知识库进行随时更新。

总之，采用本发明所述方案，能够快速扫描出可能存在的兼容性问题，从而提高了测试效率，而且，节省了大量的人力成本，另外，通过对兼容性问题知识库进行随时更新，可保证兼容性扫描的正确性并扩大扫描范围，再有，本发明所述方案实现起来简单方便，从而便于进行普及和推广。

综上所述，以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。