CN104063310B - Web前端质量检测方法与装置 - Google Patents

Abstract

本发明提供了一种WEB前端质量检测方法与装置，其中，WEB前端质量检测方法包括：获取待检测的WEB前端的页面，确定所述页面的级别；根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检测；使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。通过本发明，实现了WEB前端的有效质量度量。

Description

WEB前端质量检测方法与装置

技术领域

本发明涉及网络技术领域，特别是涉及一种WEB前端质量检测方法与装置。

背景技术

WEB前端指的是使用html、css、javascript等技术搭建的网站及应用。在目前互联网及移动互联网中，前端技术使用的比例越来越高，在整个项目中的比重也越来越重。与此同时，前端新技术也层出不穷，然而对整个前端质量的监控和度量系统发展迟缓，目前，仅能针对后端开发进行质量监控和检测度量。

与前端的代码经常是杂糅到一起的不同，后端开发一般情况下会使用一种或几种编程语言，通过分层的方式来度量后端的代码质量。如通过代码扫描来度量代码的规范性和质量，用单元测试来覆盖到方法内的逻辑正确性，用UI（User Interface，用户接口）自动化来确保端到端的正确性。每个层级都有其相关的度量方法，如代码扫描可以用千行代码发现的问题数来统计，单元测试可以用行覆盖、方法覆盖、分支覆盖等方法。但是，即使是后端的代码度量，目前的度量机制也非常的分散，没有综合在一起。

因此，一方面，目前针对WEB前端缺乏代码度量的方式；另一方面，即使是后端的代码度量，因度量机制也非常的分散，没有综合在一起，也无法适用到前端。

发明内容

本发明提供了一种WEB前端质量检测方法与装置，以解决现有技术无法有效对WEB前端进行代码度量的问题。

为了解决上述问题，本发明公开了一种WEB前端质量检测方法，包括：获取待检测的WEB前端的页面，确定所述页面的级别；根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检测；使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。

优选地，所述获取待检测的WEB前端的页面，确定所述页面的级别的步骤包括：获取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别；或者，获取待检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。

优选地，所述WEB前端的代码层次包括代码层、单元层、用户接口UI层、浏览器层和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。

优选地，所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代码，进行所述页面的代码质量检测的步骤包括：使用选择的所述检测包，在所述页面中收集相应的代码层次的代码；使用选择的所述检测包对收集到的所述代码分别进行代码质量检测，获取检测结果的度量值；根据获取的检测结果的度量值，确定所述WEB前端的代码质量。

优选地，所述根据获取的检测结果的度量值，确定所述WEB前端的代码质量的步骤包括：根据设定规则，对获取的所述检测结果的度量值进行权重调整；根据调整后的所述度量值确定所述WEB前端的代码质量。

优选地，在所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代码，进行所述页面的代码质量检测的步骤之后，还包括：记录所述页面中被检测过的代码；根据记录的所述代码确定所述WEB前端的页面的错误。

为了解决上述问题，本发明还公开了一种WEB前端质量检测装置，包括：确定模块，用于获取待检测的WEB前端的页面，确定所述页面的级别；选择模块，用于根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检测；检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。

优选地，所述确定模块，用于获取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别；或者，用于获取待检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。

优选地，所述WEB前端的代码层次包括代码层、单元层、用户接口UI层、浏览器层和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。

优选地，所述检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码；使用选择的所述检测包对收集到的所述代码分别进行代码质量检测，获取检测结果的度量值；根据获取的检测结果的度量值，确定所述WEB前端的代码质量。

优选地，所述检测模块在根据获取的检测结果的度量值，确定所述WEB前端的代码质量时，根据设定规则，对获取的所述检测结果的度量值进行权重调整；根据调整后的所述度量值确定所述WEB前端的代码质量。

优选地，所述WEB前端质量检测装置还包括：记录模块，用于在所述检测模块使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测之后，记录所述页面中被检测过的代码；根据记录的所述代码确定所述WEB前端的页面的错误。

与现有技术相比，本发明具有以下优点：

本发明的WEB前端质量检测方案，以WEB前端的页面为主线，首先确定待检测的WEB前端的各个页面的级别，然后根据确定的级别为各个页面选择相对应的检测包，利用各个检测包收集页面相应的代码层次的代码，进而进行代码质量检测。如，当某个页面为一级页面时，则对应于一级页面的检测包包括所有级别的检测包，如包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包，然后，各个检测包各自收集该页面中对应于本检测包级别的代码，进而进行检测。通过本发明，事先与WEB前端的代码层次相对应地设置检测包，在检测时，以页面为主线，选择调用相应的检测包，既有效地将各个层次的检测包有机综合到一起，又能够实现WEB前端的有效质量度量，解决了现有技术无法有效对WEB前端进行代码度量的问题。

附图说明

图1是根据本发明实施例一的一种WEB前端质量检测方法的步骤流程图；

图2是根据本发明实施例二的一种WEB前端质量检测方法的步骤流程图；

图3是根据本发明实施例三的一种WEB前端质量检测方法的步骤流程图；

图4是图3所示实施例中的一种WEB前端质量检测的检测结果显示图；

图5是根据本发明实施例四的一种WEB前端质量检测装置的结构框图；

图6是根据本发明实施例五的一种WEB前端质量检测装置的结构示意图；

图7是图6所示实施例中的一种检测模块的结构示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

实施例一

参照图1，示出了根据本发明实施例一的一种WEB前端质量检测方法的步骤流程图。

步骤S102：获取待检测的WEB前端的页面，确定各个页面的级别。

待检测的WEB前端具有一个或多个页面，如一个或多个HTML页面，各个页面有各自的级别，其中，页面的级别可以由本领域技术人员根据实际情况适当设定，例如根据链接级别确定页面级别，如当某页面在一层链接内即可认为该页面为一级页面，在二层链接内可认为该页面为二级页面等。

步骤S104：根据各个页面的级别选择相应的检测包。

其中，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集其对应的代码层次的代码，并对收集的代码进行质量检测。

代码层次是将代码分层后形成的代码的一种结构，通过代码分层，可以将复杂的代码分成单向依赖的多个层次，采用分层结构构建的代码中，代码逻辑更为清晰，易于理解和维护。例如，测试自动化代码被分成三层结构：（1）测试用例层，表达应用程序的测试逻辑；（2）领域层，用业务领域术语来给待测系统建模，封装HTTP请求、浏览器控制、结果解析逻辑等，给测试用例层提供一个接口；（3）待测系统层，第2层构建在这一层之上。而在本发明中，一种可行的分层方式是：为了度量的方便，WEB前端代码将以页面为单位，根据源文件的内容，自动或者由本领域技术人员根据实际情况采用适当的分层结构，如，分为（1）代码层，即当前页面的源代码，包括html、javascript，以及CSS；（2）单元层，即当前页面中javascript所对应的单元测试代码，可以由人工配置制定，也可以通过配置规则，由系统自己确定，如在test目录里自动寻找和当前所包含javascript源文件文件名开头，以test结尾的文件，\test\***_test；（3）UI层，与单元层类似，指当前页面所对应的UI自动化测试代码；（4）浏览器层，指当前页面所对应的浏览器截图功能用例；（5）样式层，指对当前页面组件样式检测的测试文件等。但不限于此，实际应用中，上述各层可以合并或者拆分，当然也可以采用其它层次形式。

相应地，检测包可以与WEB前端的代码层次对应设置，如，前端代码扫描检测包对应于代码层，用于对当前的源码进行代码扫描，进行代码审计，查找出不规范问题，以及潜在错误等；前端单元测试检测包对应于单元层，用于对当前页面中的javascript文件中包含的函数，闭包等进行检测的代码；前端UI自动化检测包对应于UI层，用于进行相应的UI自动化测试；前端多浏览器对比检测包对应于浏览器层，用于将当前页面发向预先设置好的不同浏览器，如IE6、IE7、IE8、firefox、chrome等，进行截图对比，将其中不一致的地方以错误的形式提示出来；前端样式通用检测包对应于样式层，用于对当前页面的布局，风格等进行检测的代码模块。

进一步地，页面级别与检测包的对应关系也可以由本领域技术人员根据实际需要灵活设置，如一级页面需要所有检测包，包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包或者其中的某个特定的检测包或某几个检测包的组合，进行检测；二级页面需要前端单元测试检测包、前端UI自动化检测包、和前端多浏览器对比检测包进行检测等或者其中的某个特定的检测包或某几个检测包的组合。

每个检测包用于收集其对应的代码层次的代码，并对收集的代码进行质量检测，其中，质量检测可以是常规的检测内容，包括但不限于代码扫描、测试用例覆盖率、测试用例通过率等。

步骤S106：使用选择的检测包，在各个页面中分别收集相应的代码层次的代码，进行各个页面的代码质量检测。

如，在一个一级页面A中，前端代码扫描检测包收集并检测页面A的代码层的代码、前端单元测试检测包收集并检测页面A的单元层的代码、前端UI自动化检测包收集并检测页面A的UI层的代码、前端多浏览器对比检测包收集并检测页面A的浏览器层的代码、前端样式通用检测包收集并检测页面A的样式层的代码。

通过本实施例，以WEB前端的页面为主线，首先确定待检测的WEB前端的各个页面的级别，然后根据确定的级别为各个页面选择相对应的检测包，利用各个检测包收集页面相应的代码层次的代码，进而进行代码质量检测。通过本实施例的WEB前端质量检测方法，事先与WEB前端的代码层次相对应地设置检测包，在检测时，以页面为主线，选择调用相应的检测包，既有效地将各个层次的检测包有机综合到一起，又能够实现WEB前端的有效质量度量，解决了现有技术无法有效对WEB前端进行代码度量的问题。

实施例二

参照图2，示出了根据本发明实施例二的一种WEB前端质量检测方法的步骤流程图。

本实施例的WEB前端质量检测方法包括以下步骤：

步骤S202：确定WEB前端的代码层次，以及与代码层次相对应的检测包。

通常来说，代码层次与检测包一一对应，但本领域技术人员应当明了，某些与代码层次非一一对应关系的检测包，如一个检测包可进行两个代码层次的质量检测功能的，同样可参照本发明的WEB前端质量检测方案对WEB前端进行质量检测。

检测包可以采用任意适当方式实现，如，由第三方提供，对现有的后端代码质量检测的检测包进行适当改进，或者针对WEB前端进行编写设置等等。各个检测包可以是相互独立的单独数据包，也可以是一个检测包的多个组成部分。各个检测包对外提供有调用接口，供控制程序调用以对WEB前端的代码进行质量检测。

本实施例中，WEB前端的代码层次包括代码层、单元层、UI层、浏览器层和样式层。相应地，与WEB前端的代码层次相对应的检测包包括：前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。WEB前端使用上述的五层分层结构，逻辑清晰，结构性强。相应地，对该五层分层结构对应的检测包结构清晰，功能独立，能够全面准确地有WEB前端进行代码质量检测。

在确定了WEB前端的代码层次，以及与代码层次相对应的检测包后，后续的WEB前端的页面均可按照该关系调用相应的检测包，进行该页面各个代码层次的代码质量检测。

步骤S204：获取待检测的WEB前端的页面，确定各个页面的级别。

本实施例中，可以获取待检测的WEB前端的页面，根据各个页面的链接级别确定各个页面的级别；或者，可以获取待检测的WEB前端的页面，根据各个页面的PV（Page Visit，页面浏览）值，确定各个页面的级别。使用上述方式确定页面的级别，实现简单，实现成本低，且能快速、清晰地确定页面级别。

步骤S206：根据各个页面的级别选择相应的检测包。

如上所述，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集其对应的代码层次的代码，并对收集的代码进行质量检测。

步骤S208：使用选择的检测包，在各个页面中分别收集相应的代码层次的代码。

如，一级页面使用前端代码扫描检测包收集并检测本页面的代码层的代码、使用前端单元测试检测包收集并检测本页面的单元层的代码、使用前端UI自动化检测包收集并检测本页面的UI层的代码、使用前端多浏览器对比检测包收集并检测本页面的浏览器层的代码、使用前端样式通用检测包收集并检测本页面的样式层的代码；二级页面使用前端代码扫描检测包收集并检测本页面的代码层的代码、使用前端单元测试检测包收集并检测本页面的单元层的代码、使用前端UI自动化检测包收集并检测本页面的UI层的代码、使用前端多浏览器对比检测包收集并检测本页面的浏览器层的代码；三级页面使用前端代码扫描检测包收集并检测本页面的代码层的代码、使用前端UI自动化检测包收集并检测本页面的UI层的代码、使用前端多浏览器对比检测包收集并检测本页面的浏览器层的代码等等。

步骤S210：使用选择的检测包对收集到的代码分别进行代码质量检测，获取检测结果的度量值。

本实施例中，使用度量值说明各个检测包对相应代码的检测结果，简要清晰，能够直观地对检测包检测的代码的质量进行判断。例如，使用度量值1至5依次表明前端单元测试检测包对代码的检测结果由差到好的程度。当然，不限于此，其它检测结果的表示形式同样适用。

步骤S212：根据获取的检测结果的度量值，确定WEB前端的代码质量。

优选地，可以根据设定规则，对获取的检测结果的度量值进行权重调整；根据调整后的度量值确定WEB前端的代码质量。

如，当WEB前端着重于UI层的代码检测时，则可以加大前端UI自动化检测包的检测出的度量值的权重，以有效反应WEB前端UI层代码的质量。

步骤S214：记录各个页面中被检测过的代码，根据记录的代码确定WEB前端的各个页面的错误。

本步骤为可选步骤，通过记录各个页面中被检测过的代码，可以确定WEB前端中出现的错误。如，在覆盖率检测时，通过检测结果的度量值仅可确定代码的覆盖情况，但无法得知哪些代码被覆盖哪些代码未被覆盖，而通过记录被检测的代码，可以方便有效地确定未被覆盖的那些代码，进而确定相应页面的错误。

需要说明的是，本步骤与步骤S212的执行可以不分先后顺序，也可以并行执行，事实上，本步骤可以在使用选择的检测包对收集到的代码分别进行代码质量检测后的任意适当时刻执行。

通过本实施例，可以有效对WEB前端的代码质量进行检测。并且，通过记录各个页面中被检测过的代码，可以对WEB前端页面的错误进行准确定位。

实施例三

参照图3，示出了根据本发明实施例三的一种WEB前端质量检测方法的步骤流程图。

本实施例的WEB前端质量检测方法包括以下步骤：

步骤S302：获取待检测的WEB前端的页面，确定各个页面的级别。

首先，可以将所需要进行质量检测的WEB前端的页面进行分类，如按照自然纬度，一个完整的HTML页面即为一面，如baidu.com的搜索页面可以分为三个HTML页面，一个是首页，一个是搜索详情页，另外一个是到达结果页面。

然后，可以按照设定的规则确定各个页面的级别。例如，按照页面的链接级别确定页面的级别，如从首页开始，在一层链接内可达的所有页面为一级页面；在二层链接内可达的所有页面为二级页面；在三层或三层链接内可达的所有页面为三级页面；或者，按照页面的PV值确定页面的级别，如PV值大于二级页面平均PV的页面，均确定为一级页面，PV值大于三级页面平均PV但小于或等于二级页面平均PV的页面，均确定为二级页面，依次类推。

步骤S304：根据各个页面的级别选择相应的检测包。

页面质量度量方式的选择可以按照设置的规则自动默认选择，选择完成后还可以进行人工干预。

一种默认的规则包括：一级页面默认选择所有的检测包，包括：前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包；二级页面选择前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、和前端多浏览器对比检测包；三级页面及以后，选择前端代码扫描检测包、前端UI自动化检测包、和前端多浏览器对比检测包。

但不限于此，在选择检测包时，也可以将每个页面按照重要性程度、页面大小、代码复杂性程度等选择适合的度量方式；也可以均采用上述五个检测包，即前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包，进行代码质量的度量。如采用前端代码扫描检测包—前端单元测试检测包—前端多浏览器对比检测包—前端样式通用检测包—前端UI自动化检测包，进行代码检测，需要说明的是，这五个层级对应的检测包在执行检测时没有严格的顺序关系，可以平行展示。

步骤S306：调用选择的、与各个页面对应的检测包，对各个页面进行代码质量检测。

当页面级别不同时，需要调用的检测包可能也不相同，可以通过注册和注销的形式按照需求选择相应的检测包。检测包可以以plug-in的形式提供，可以方便装载和卸载，也可以同时删除或者添加检测包。

需要说明的是，当新增了不同的检测包时，可以通过适当的方式如注册的方式将新的检测包添加到原有的检测包的集合中。当然，也可以通过适当的方式将现有的某个或某些检测包从检测包集合中永久删除。检测包的添加和删除是全局性的，在具体的页面代码检测中可能不会用到，在具体的页面代码检测中，如果对应的检测包没有被选中，则该检测包不会被执行。

检测包一旦选定被调用，就开始收集相应页面各个代码层级的数据，如，前端代码扫描检测包开始收集本页面的代码行数、代码扫描（如扫描代码的格式、行号等）发现的问题等；前端单元测试检测包开始收集本页面包含的JS对应的单元测试用例覆盖率，以及单元测试用例运行及通过率；前端多浏览器对比检测包开始检测本页面在选定浏览器中对比的情况，进行截图对比等；前端样式自动化检测包开始收集样式自动化对当前页面组件的覆盖率，以及通过率；前端UI自动化检测包开始收集UI自动化对当前页面组件的覆盖率，以及通过率等。

步骤S308：显示各个页面的代码质量检测结果。

页面的代码质量情况会按照选定的度量层级（各检测包对应的代码层级）多维度显示，其中多维度显示指的是页面质量会以选定的度量层级为维度展示出来。

一种检测结果显示如图4所示，图4以一个一级页面，即www.alibaba.com页面为例，选择前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包对该页面进行代码质量检测，各检测包的检测结果分别如图4所示。

通过本实施例，实现了从系统的角度将WEB前端多个代码层级的度量有机综合到一起，并且通过可视化的方法，将整个WEB前端的质量有效地展示出来。

实施例四

参照图5，示出了根据本发明实施例四的一种WEB前端质量检测装置的结构框图。

本实施例的WEB前端质量检测装置包括：确定模块402，用于获取待检测的WEB前端的页面，确定各个页面的级别；选择模块404，用于根据各个页面的级别选择相应的检测包，其中，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集其对应的代码层次的代码，并对收集的代码进行质量检测；检测模块406，用于使用选择的检测包，在各个页面中分别收集相应的代码层次的代码，进行各个页面的代码质量检测。

优选地，确定模块402，用于获取待检测的WEB前端的页面，根据各个页面的链接级别确定各个页面的级别；或者，用于获取待检测的WEB前端的页面，根据各个页面的页面浏览PV值，确定各个页面的级别。

优选地，WEB前端的代码层次包括代码层、单元层、UI层、浏览器层和样式层；与WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。

优选地，检测模块406，用于使用选择的检测包，在各个页面中分别收集相应的代码层次的代码；使用选择的检测包对收集到的代码分别进行代码质量检测，获取检测结果的度量值；根据获取的检测结果的度量值，确定WEB前端的代码质量。

优选地，检测模块406在根据获取的检测结果的度量值，确定WEB前端的代码质量时，根据设定规则，对获取的检测结果的度量值进行权重调整；根据调整后的度量值确定WEB前端的代码质量。

优选地，本实施例的WEB前端质量检测装置还包括：记录模块408，用于在检测模块406使用选择的检测包，在各个页面中分别收集相应的代码层次的代码，进行各个页面的代码质量检测之后，记录各个页面中被检测过的代码；根据记录的代码确定WEB前端的各个页面的错误。

本实施例的WEB前端质量检测装置用于实现前述多个方法实施例中相应的WEB前端质量检测方法，并具有相应方法实施例的有益效果，在此不再赘述。

实施例五

参照图6，示出了根据本发明实施例五的一种WEB前端质量检测装置的结构示意图。

本实施例中，各个检测包以检测模块的形式存在，包括但不限于：前端代码扫描检测模块、前端单元测试检测模块、前端UI自动化检测模块、前端多浏览器对比检测模块、前端样式通用检测模块。

如图6所示，本实施例的WEB前端质量检测装置是一个三明治结构：两端中前端是WEB前端质量度量模块，后端是WEB前端质量展示模块，中间的核心是各种WEB前端的质量检测模块，如上所述，包括但不限于前端代码扫描检测模块、前端单元测试检测模块、前端UI自动化检测模块、前端多浏览器对比检测模块，和前端样式通用检测模块。

其中，各个检测模块的结构如图7所示，包括：检测模块的名称、度量值（用于表征检测模块的检测结果）、注册模块（也可以是一个函数）、注销模块（也可以是一个函数）、执行检测函数，以及用于详细结果查看的详细记录函数。每个检测模块可以通过本身的注册模块和注销模块，相应地以注册和注销的方式在整个系统中动态地添加和注销。当一个检测模块被调用时，通过调用“执行检测”函数启动该模块对WEB前端页面的代码收集和检测。当系统需要查看该模块具体的检测信息时，则可以通过调用该模块的“详细记录”函数进行详细结果查看。

WEB前端质量度量模块可以实现实施例四中包括确定模块402、选择模块404、检测模块406、和记录模块408的功能，负责全局地管理检测模块（包括添加和注销检测模块）、传递要检查的WEB前端的网页、同时记录网页中被执行过的代码。

WEB前端质量展示模块则可以将各个检测模块里的度量值以多种维度显示出来，优选地，可以通过对度量值按照一定的权重调整重新计算后，将WEB前端质量以多种维度显示出来，如图4所示。

在具体执行时，WEB前端质量度量模块首先将所需要支持的WEB前端按照页面进行分类，比如baidu.com的搜索页面可以分为三个page：一个是首页、一个是搜索详情页、另外一个是到达结果页面。然后，WEB前端质量度量模块将每个页面按照重要性程度、页面大小、代码复杂性程度等选择适合的度量方式，也即，选择适合的检测模块。检测模块一旦选定就会开始收集各个代码层级的数据，如前端代码扫描检测模块，开始收集页面的代码行数、代码扫描发现问题等；前端单元测试检测模块，开始收集页面包含的JS对应的单元测试用例覆盖率，以及单元测试用例运行及通过率；前端多浏览器对比检测模块，开始检测页面在选定浏览器中对比的情况；前端样式自动化检测包，开始收集样式自动化对当前页面组件的覆盖率，以及通过率；前端UI自动化检测模块，开始收集UI自动化对当前页面组件的覆盖率，以及通过率。接着，WEB前端质量展示模块会将页面的质量情况按照选定度量层级多维度显示，其中多维度显示指的是页面质量会以选定的度量层级为维度展示出来，如图4所示。在图4所示的展示界面中，点击相应模块后还可以进入该模块的检测详情页。

在上述过程中，WEB前端质量度量模块将每个页面按照重要性程度、页面大小、代码复杂性程度等选择适合的检测模块时，一方面，系统可以默认使用上述五个检测模块的度量，即：前端代码扫描检测模块—前端单元测试检测模块—前端多浏览器对比检测模块—前端样式通用检测模块—前端UI自动化检测模块。这五个层级的度量没有严格的顺序关系，可以平行展示。另一方面，页面选择度量方式可以按照设置的规则自动默认选择的，选择完成后还可以进行人工干预。例如，一种默认的规则包括：一级页面（即从首页开始，在一层链接内可达的所有页面）所有检测模块默认全选；二级页面（即从首页开始，在二层链接内可达的所有页面）选择前端代码扫描检测模块、前端单元测试检测模块、前端多浏览器对比检测模块、和前端UI自动化检测模块；三级页面及以后（即从首页开始，在三层或三层以上链接内可达的所有页面），选择前端代码扫描检测模块、前端多浏览器对比检测模块、及前端UI自动化检测模块。

此外，上述页面级别的确定也可以按照页面PV值来衡量，如，PV值大于二级页面平均PV的页面，均等同于一级页面；PV值大于三级页面平均PV但小于或等于二级页面平均PV的页面，等同于二级页面，如此类推。进而，根据页面级别选择相应的检测模块。

再者，检测模块都是以plug-in的形式提供，可以方便装载和卸载，在需要在原有检测模块的基础上删除或者添加新的检测模块时，可以通过各个检测模块自身的注册模块和注销模块进行，检测模块的添加和删除是全局性的。对于具体的页面的度量过程中，如果对应检测模块没有被选中，则不执行该检测模块即可，而无须执行上述删除操作。同样，如果检测模块被重新选中，则执行该检测模块即可，也无须执行上述添加操作。

通过本实施例，将各种WEB前端质量检查工具按照上述的检测模块组织起来，进行WEB前端质量的度量和展示，从系统的角度将多个代码层级的度量有机综合到一起，并且通过可视化的方法，将整个WEB前端质量有效地展示出来。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本发明所提供的一种WEB前端质量检测方法和装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (12)

1.一种WEB前端质量检测方法，其特征在于，包括：

获取待检测的WEB前端的页面，确定所述页面的级别；

根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检测；

使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。

2.根据权利要求1所述的方法，其特征在于，所述获取待检测的WEB前端的页面，确定所述页面的级别的步骤包括：

获取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别；

或者，

获取待检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。

3.根据权利要求1或2所述的方法，其特征在于，所述WEB前端的代码层次包括代码层、单元层、用户接口UI层、浏览器层和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。

4.根据权利要求1所述的方法，其特征在于，所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代码，进行所述页面的代码质量检测的步骤包括：

使用选择的所述检测包，在所述页面中收集相应的代码层次的代码；

使用选择的所述检测包对收集到的所述代码分别进行代码质量检测，获取检测结果的度量值；

根据获取的检测结果的度量值，确定所述WEB前端的代码质量。

5.根据权利要求4所述的方法，其特征在于，所述根据获取的检测结果的度量值，确定所述WEB前端的代码质量的步骤包括：

根据设定规则，对获取的所述检测结果的度量值进行权重调整；

根据调整后的所述度量值确定所述WEB前端的代码质量。

6.根据权利要求1所述的方法，其特征在于，在所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代码，进行所述页面的代码质量检测的步骤之后，还包括：

记录所述页面中被检测过的代码；

根据记录的所述代码确定所述WEB前端的页面的错误。

7.一种WEB前端质量检测装置，其特征在于，包括：

确定模块，用于获取待检测的WEB前端的页面，确定所述页面的级别；

选择模块，用于根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检测；

检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。

8.根据权利要求7所述的装置，其特征在于，所述确定模块，用于获取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别；或者，用于获取待检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。

9.根据权利要求7或8所述的装置，其特征在于，所述WEB前端的代码层次包括代码层、单元层、用户接口UI层、浏览器层和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。

10.根据权利要求7所述的装置，其特征在于，所述检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码；使用选择的所述检测包对收集到的所述代码分别进行代码质量检测，获取检测结果的度量值；根据获取的检测结果的度量值，确定所述WEB前端的代码质量。

11.根据权利要求10所述的装置，其特征在于，所述检测模块在根据获取的检测结果的度量值，确定所述WEB前端的代码质量时，根据设定规则，对获取的所述检测结果的度量值进行权重调整；根据调整后的所述度量值确定所述WEB前端的代码质量。

12.根据权利要求7所述的装置，其特征在于，还包括：

记录模块，用于在所述检测模块使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测之后，记录所述页面中被检测过的代码；根据记录的所述代码确定所述WEB前端的页面的错误。