Web前端质量检测方法与装置制造方法

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

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

【背景技术】
[0002] WEB前端指的是使用html、css、javascript等技术搭建的网站及应用。在目前互 联网及移动互联网中，前端技术使用的比例越来越高，在整个项目中的比重也越来越重。与 此同时，前端新技术也层出不穷，然而对整个前端质量的监控和度量系统发展迟缓，目前， 仅能针对后端开发进行质量监控和检测度量。
[0003] 与前端的代码经常是杂糅到一起的不同，后端开发一般情况下会使用一种或几种 编程语言，通过分层的方式来度量后端的代码质量。如通过代码扫描来度量代码的规范性 和质量，用单元测试来覆盖到方法内的逻辑正确性，用Π (User Interface，用户接口）自 动化来确保端到端的正确性。每个层级都有其相关的度量方法，如代码扫描可以用千行代 码发现的问题数来统计，单元测试可以用行覆盖、方法覆盖、分支覆盖等方法。但是，即使是 后端的代码度量，目前的度量机制也非常的分散，没有综合在一起。
[0004] 因此，一方面，目前针对WEB前端缺乏代码度量的方式；另一方面，即使是后端的 代码度量，因度量机制也非常的分散，没有综合在一起，也无法适用到前端。


【发明内容】

[0005] 本发明提供了一种WEB前端质量检测方法与装置，以解决现有技术无法有效对 WEB前端进行代码度量的问题。
[0006] 为了解决上述问题，本发明公开了一种WEB前端质量检测方法，包括：获取待检测 的WEB前端的页面，确定所述页面的级别；根据所述页面的级别选择相应的检测包，其中， 所述检测包按照所述WEB前端的代码层次分别对应设置，每个所述检测包用于收集其对应 的代码层次的代码，并对收集的所述代码进行质量检测；使用选择的所述检测包，在所述页 面中分别收集相应的代码层次的代码，进行所述页面的代码质量检测。
[0007] 优选地，所述获取待检测的WEB前端的页面，确定所述页面的级别的步骤包括：获 取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别；或者，获取待 检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。
[0008] 优选地，所述WEB前端的代码层次包括代码层、单元层、用户接口 Π 层、浏览器层 和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单 元测试检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。 [0009] 优选地，所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代码， 进行所述页面的代码质量检测的步骤包括：使用选择的所述检测包，在所述页面中收集相 应的代码层次的代码；使用选择的所述检测包对收集到的所述代码分别进行代码质量检 测，获取检测结果的度量值；根据获取的检测结果的度量值，确定所述WEB前端的代码质 量。
[0010] 优选地，所述根据获取的检测结果的度量值，确定所述WEB前端的代码质量的步 骤包括：根据设定规则，对获取的所述检测结果的度量值进行权重调整；根据调整后的所 述度量值确定所述WEB前端的代码质量。
[0011] 优选地，在所述使用选择的所述检测包，在所述页面中收集相应的代码层次的代 码，进行所述页面的代码质量检测的步骤之后，还包括：记录所述页面中被检测过的代码； 根据记录的所述代码确定所述WEB前端的页面的错误。
[0012] 为了解决上述问题，本发明还公开了一种WEB前端质量检测装置，包括：确定模 块，用于获取待检测的WEB前端的页面，确定所述页面的级别；选择模块，用于根据所述页 面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码层次分别对应设 置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述代码进行质量检 测；检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代 码，进行所述页面的代码质量检测。
[0013] 优选地，所述确定模块，用于获取待检测的WEB前端的页面，根据所述页面的链接 级别确定所述页面的级别；或者，用于获取待检测的WEB前端的页面，根据所述页面的页面 浏览PV值，确定所述页面的级别。
[0014] 优选地，所述WEB前端的代码层次包括代码层、单元层、用户接口 Π 层、浏览器层 和样式层；与所述WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单 元测试检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。
[0015] 优选地，所述检测模块，用于使用选择的所述检测包，在所述页面中分别收集相应 的代码层次的代码；使用选择的所述检测包对收集到的所述代码分别进行代码质量检测， 获取检测结果的度量值；根据获取的检测结果的度量值，确定所述WEB前端的代码质量。
[0016] 优选地，所述检测模块在根据获取的检测结果的度量值，确定所述WEB前端的代 码质量时，根据设定规则，对获取的所述检测结果的度量值进行权重调整；根据调整后的所 述度量值确定所述WEB前端的代码质量。
[0017] 优选地，所述WEB前端质量检测装置还包括：记录模块，用于在所述检测模块使用 选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页面的代码 质量检测之后，记录所述页面中被检测过的代码；根据记录的所述代码确定所述WEB前端 的页面的错误。
[0018] 与现有技术相比，本发明具有以下优点：
[0019] 本发明的WEB前端质量检测方案，以WEB前端的页面为主线，首先确定待检测的 WEB前端的各个页面的级别，然后根据确定的级别为各个页面选择相对应的检测包，利用各 个检测包收集页面相应的代码层次的代码，进而进行代码质量检测。如，当某个页面为一级 页面时，则对应于一级页面的检测包包括所有级别的检测包，如包括前端代码扫描检测包、 前端单元测试检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检 测包，然后，各个检测包各自收集该页面中对应于本检测包级别的代码，进而进行检测。通 过本发明，事先与WEB前端的代码层次相对应地设置检测包，在检测时，以页面为主线，选 择调用相应的检测包，既有效地将各个层次的检测包有机综合到一起，又能够实现WEB前 端的有效质量度量，解决了现有技术无法有效对WEB前端进行代码度量的问题。

【专利附图】

【附图说明】
[0020] 图1是根据本发明实施例一的一种WEB前端质量检测方法的步骤流程图；
[0021] 图2是根据本发明实施例二的一种WEB前端质量检测方法的步骤流程图；
[0022] 图3是根据本发明实施例三的一种WEB前端质量检测方法的步骤流程图；
[0023] 图4是图3所示实施例中的一种WEB前端质量检测的检测结果显示图；
[0024] 图5是根据本发明实施例四的一种WEB前端质量检测装置的结构框图；
[0025] 图6是根据本发明实施例五的一种WEB前端质量检测装置的结构示意图；
[0026] 图7是图6所示实施例中的一种检测模块的结构示意图。

【具体实施方式】
[0027] 为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实 施方式对本发明作进一步详细的说明。
[0028] 实施例一
[0029] 参照图1，示出了根据本发明实施例一的一种WEB前端质量检测方法的步骤流程 图。
[0030] 步骤S102 :获取待检测的WEB前端的页面，确定各个页面的级别。
[0031] 待检测的WEB前端具有一个或多个页面，如一个或多个HTML页面，各个页面有各 自的级别，其中，页面的级别可以由本领域技术人员根据实际情况适当设定，例如根据链接 级别确定页面级别，如当某页面在一层链接内即可认为该页面为一级页面，在二层链接内 可认为该页面为二级页面等。
[0032] 步骤S104 :根据各个页面的级别选择相应的检测包。
[0033] 其中，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集其对 应的代码层次的代码，并对收集的代码进行质量检测。
[0034] 代码层次是将代码分层后形成的代码的一种结构，通过代码分层，可以将复杂的 代码分成单向依赖的多个层次，采用分层结构构建的代码中，代码逻辑更为清晰，易于理解 和维护。例如，测试自动化代码被分成三层结构：（1)测试用例层，表达应用程序的测试逻 辑；（2)领域层，用业务领域术语来给待测系统建模，封装HTTP请求、浏览器控制、结果解析 逻辑等，给测试用例层提供一个接口；（3)待测系统层，第2层构建在这一层之上。而在本 发明中，一种可行的分层方式是：为了度量的方便，WEB前端代码将以页面为单位，根据源 文件的内容，自动或者由本领域技术人员根据实际情况采用适当的分层结构，如，分为（1) 代码层，即当前页面的源代码，包括html、javascript，以及CSS ; (2)单元层，即当前页面中 javascript所对应的单元测试代码，可以由人工配置制定，也可以通过配置规则，由系统自 己确定，如在test目录里自动寻找和当前所包含javascript源文件文件名开头，以test 结尾的文件，\test\***_test ;(3)Π 层，与单元层类似，指当前页面所对应的Π 自动化测 试代码；（4)浏览器层，指当前页面所对应的浏览器截图功能用例；（5)样式层，指对当前页 面组件样式检测的测试文件等。但不限于此，实际应用中，上述各层可以合并或者拆分，当 然也可以采用其它层次形式。
[0035] 相应地，检测包可以与WEB前端的代码层次对应设置，如，前端代码扫描检测包对 应于代码层，用于对当前的源码进行代码扫描，进行代码审计，查找出不规范问题，以及潜 在错误等；前端单元测试检测包对应于单元层，用于对当前页面中的javascript文件中包 含的函数，闭包等进行检测的代码；前端UI自动化检测包对应于UI层，用于进行相应的UI 自动化测试；前端多浏览器对比检测包对应于浏览器层，用于将当前页面发向预先设置好 的不同浏览器，如IE6、IE7、IE8、firefox、chrome等，进行截图对比，将其中不一致的地方 以错误的形式提示出来；前端样式通用检测包对应于样式层，用于对当前页面的布局，风格 等进行检测的代码模块。
[0036] 进一步地，页面级别与检测包的对应关系也可以由本领域技术人员根据实际需要 灵活设置，如一级页面需要所有检测包，包括前端代码扫描检测包、前端单元测试检测包、 前端Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检测包或者其中的某个 特定的检测包或某几个检测包的组合，进行检测；二级页面需要前端单元测试检测包、前端 Π 自动化检测包、和前端多浏览器对比检测包进行检测等或者其中的某个特定的检测包或 某几个检测包的组合。
[0037] 每个检测包用于收集其对应的代码层次的代码，并对收集的代码进行质量检测， 其中，质量检测可以是常规的检测内容，包括但不限于代码扫描、测试用例覆盖率、测试用 例通过率等。
[0038] 步骤S106 :使用选择的检测包，在各个页面中分别收集相应的代码层次的代码， 进行各个页面的代码质量检测。
[0039] 如，在一个一级页面A中，前端代码扫描检测包收集并检测页面A的代码层的代 码、前端单元测试检测包收集并检测页面A的单元层的代码、前端UI自动化检测包收集并 检测页面A的Π 层的代码、前端多浏览器对比检测包收集并检测页面A的浏览器层的代 码、前端样式通用检测包收集并检测页面A的样式层的代码。
[0040] 通过本实施例，以WEB前端的页面为主线，首先确定待检测的WEB前端的各个页面 的级别，然后根据确定的级别为各个页面选择相对应的检测包，利用各个检测包收集页面 相应的代码层次的代码，进而进行代码质量检测。通过本实施例的WEB前端质量检测方法， 事先与WEB前端的代码层次相对应地设置检测包，在检测时，以页面为主线，选择调用相应 的检测包，既有效地将各个层次的检测包有机综合到一起，又能够实现WEB前端的有效质 量度量，解决了现有技术无法有效对WEB前端进行代码度量的问题。
[0041] 实施例二
[0042] 参照图2,示出了根据本发明实施例二的一种WEB前端质量检测方法的步骤流程 图。
[0043] 本实施例的WEB前端质量检测方法包括以下步骤：
[0044] 步骤S202 :确定WEB前端的代码层次，以及与代码层次相对应的检测包。
[0045] 通常来说，代码层次与检测包一一对应，但本领域技术人员应当明了，某些与代码 层次非一一对应关系的检测包，如一个检测包可进行两个代码层次的质量检测功能的，同 样可参照本发明的WEB前端质量检测方案对WEB前端进行质量检测。
[0046] 检测包可以采用任意适当方式实现，如，由第三方提供，对现有的后端代码质量检 测的检测包进行适当改进，或者针对WEB前端进行编写设置等等。各个检测包可以是相互 独立的单独数据包，也可以是一个检测包的多个组成部分。各个检测包对外提供有调用接 口，供控制程序调用以对WEB前端的代码进行质量检测。
[0047] 本实施例中，WEB前端的代码层次包括代码层、单元层、Π 层、浏览器层和样式层。 相应地，与WEB前端的代码层次相对应的检测包包括：前端代码扫描检测包、前端单元测试 检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。WEB前端 使用上述的五层分层结构，逻辑清晰，结构性强。相应地，对该五层分层结构对应的检测包 结构清晰，功能独立，能够全面准确地有WEB前端进行代码质量检测。
[0048] 在确定了 WEB前端的代码层次，以及与代码层次相对应的检测包后，后续的WEB前 端的页面均可按照该关系调用相应的检测包，进行该页面各个代码层次的代码质量检测。
[0049] 步骤S204 :获取待检测的WEB前端的页面，确定各个页面的级别。
[0050] 本实施例中，可以获取待检测的WEB前端的页面，根据各个页面的链接级别确 定各个页面的级别；或者，可以获取待检测的WEB前端的页面，根据各个页面的PV (Page Visit，页面浏览)值，确定各个页面的级别。使用上述方式确定页面的级别，实现简单，实现 成本低，且能快速、清晰地确定页面级别。
[0051] 步骤S206 :根据各个页面的级别选择相应的检测包。
[0052] 如上所述，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集 其对应的代码层次的代码，并对收集的代码进行质量检测。
[0053] 步骤S208 :使用选择的检测包，在各个页面中分别收集相应的代码层次的代码。
[0054] 如，一级页面使用前端代码扫描检测包收集并检测本页面的代码层的代码、使用 前端单元测试检测包收集并检测本页面的单元层的代码、使用前端UI自动化检测包收集 并检测本页面的UI层的代码、使用前端多浏览器对比检测包收集并检测本页面的浏览器 层的代码、使用前端样式通用检测包收集并检测本页面的样式层的代码；二级页面使用前 端代码扫描检测包收集并检测本页面的代码层的代码、使用前端单元测试检测包收集并检 测本页面的单元层的代码、使用前端UI自动化检测包收集并检测本页面的UI层的代码、使 用前端多浏览器对比检测包收集并检测本页面的浏览器层的代码；三级页面使用前端代码 扫描检测包收集并检测本页面的代码层的代码、使用前端UI自动化检测包收集并检测本 页面的UI层的代码、使用前端多浏览器对比检测包收集并检测本页面的浏览器层的代码 等等。
[0055] 步骤S210 :使用选择的检测包对收集到的代码分别进行代码质量检测，获取检测 结果的度量值。
[0056] 本实施例中，使用度量值说明各个检测包对相应代码的检测结果，简要清晰，能够 直观地对检测包检测的代码的质量进行判断。例如，使用度量值1至5依次表明前端单元 测试检测包对代码的检测结果由差到好的程度。当然，不限于此，其它检测结果的表示形式 同样适用。
[0057] 步骤S212 :根据获取的检测结果的度量值，确定WEB前端的代码质量。
[0058] 优选地，可以根据设定规则，对获取的检测结果的度量值进行权重调整；根据调整 后的度量值确定WEB前端的代码质量。
[0059] 如，当WEB前端着重于Π 层的代码检测时，则可以加大前端Π 自动化检测包的检 测出的度量值的权重，以有效反应WEB前端Π 层代码的质量。
[0060] 步骤S214 :记录各个页面中被检测过的代码，根据记录的代码确定WEB前端的各 个页面的错误。
[0061] 本步骤为可选步骤，通过记录各个页面中被检测过的代码，可以确定WEB前端中 出现的错误。如，在覆盖率检测时，通过检测结果的度量值仅可确定代码的覆盖情况，但无 法得知哪些代码被覆盖哪些代码未被覆盖，而通过记录被检测的代码，可以方便有效地确 定未被覆盖的那些代码，进而确定相应页面的错误。
[0062] 需要说明的是，本步骤与步骤S212的执行可以不分先后顺序，也可以并行执行， 事实上，本步骤可以在使用选择的检测包对收集到的代码分别进行代码质量检测后的任意 适当时刻执行。
[0063] 通过本实施例，可以有效对WEB前端的代码质量进行检测。并且，通过记录各个页 面中被检测过的代码，可以对WEB前端页面的错误进行准确定位。
[0064] 实施例三
[0065] 参照图3,示出了根据本发明实施例三的一种WEB前端质量检测方法的步骤流程 图。
[0066] 本实施例的WEB前端质量检测方法包括以下步骤：
[0067] 步骤S302 :获取待检测的WEB前端的页面，确定各个页面的级别。
[0068] 首先，可以将所需要进行质量检测的WEB前端的页面进行分类，如按照自然纬度， 一个完整的HTML页面即为一面，如baidu. com的搜索页面可以分为三个HTML页面，一个是 首页，一个是搜索详情页，另外一个是到达结果页面。
[0069] 然后，可以按照设定的规则确定各个页面的级别。例如，按照页面的链接级别确定 页面的级别，如从首页开始，在一层链接内可达的所有页面为一级页面；在二层链接内可达 的所有页面为二级页面；在三层或三层链接内可达的所有页面为三级页面；或者，按照页 面的PV值确定页面的级别，如PV值大于二级页面平均PV的页面，均确定为一级页面，PV 值大于三级页面平均PV但小于或等于二级页面平均PV的页面，均确定为二级页面，依次类 推。
[0070] 步骤S304 :根据各个页面的级别选择相应的检测包。
[0071] 页面质量度量方式的选择可以按照设置的规则自动默认选择，选择完成后还可以 进行人工干预。
[0072] -种默认的规则包括：一级页面默认选择所有的检测包，包括：前端代码扫描检 测包、前端单元测试检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式 通用检测包；二级页面选择前端代码扫描检测包、前端单元测试检测包、前端Π 自动化检 测包、和前端多浏览器对比检测包；三级页面及以后，选择前端代码扫描检测包、前端Π 自 动化检测包、和前端多浏览器对比检测包。
[0073] 但不限于此，在选择检测包时，也可以将每个页面按照重要性程度、页面大小、代 码复杂性程度等选择适合的度量方式；也可以均采用上述五个检测包，即前端代码扫描检 测包、前端单元测试检测包、前端Π 自动化检测包、前端多浏览器对比检测包和前端样式 通用检测包，进行代码质量的度量。如采用前端代码扫描检测包一前端单元测试检测包一 前端多浏览器对比检测包一前端样式通用检测包一前端Π 自动化检测包，进行代码检测， 需要说明的是，这五个层级对应的检测包在执行检测时没有严格的顺序关系，可以平行展 /_J、1 〇
[0074] 步骤S306 :调用选择的、与各个页面对应的检测包，对各个页面进行代码质量检 测。
[0075] 当页面级别不同时，需要调用的检测包可能也不相同，可以通过注册和注销的形 式按照需求选择相应的检测包。检测包可以以plug-in的形式提供，可以方便装载和卸载， 也可以同时删除或者添加检测包。
[0076] 需要说明的是，当新增了不同的检测包时，可以通过适当的方式如注册的方式将 新的检测包添加到原有的检测包的集合中。当然，也可以通过适当的方式将现有的某个或 某些检测包从检测包集合中永久删除。检测包的添加和删除是全局性的，在具体的页面代 码检测中可能不会用到，在具体的页面代码检测中，如果对应的检测包没有被选中，则该检 测包不会被执行。
[0077] 检测包一旦选定被调用，就开始收集相应页面各个代码层级的数据，如，前端代码 扫描检测包开始收集本页面的代码行数、代码扫描(如扫描代码的格式、行号等）发现的问 题等；前端单元测试检测包开始收集本页面包含的JS对应的单元测试用例覆盖率，以及单 元测试用例运行及通过率；前端多浏览器对比检测包开始检测本页面在选定浏览器中对比 的情况，进行截图对比等；前端样式自动化检测包开始收集样式自动化对当前页面组件的 覆盖率，以及通过率；前端Π 自动化检测包开始收集Π 自动化对当前页面组件的覆盖率， 以及通过率等。
[0078] 步骤S308 :显示各个页面的代码质量检测结果。
[0079] 页面的代码质量情况会按照选定的度量层级(各检测包对应的代码层级）多维度 显示，其中多维度显示指的是页面质量会以选定的度量层级为维度展示出来。
[0080] 一种检测结果显示如图4所示，图4以一个一级页面，即www. alibaba. com页面为 例，选择前端代码扫描检测包、前端单元测试检测包、前端Π 自动化检测包、前端多浏览器 对比检测包和前端样式通用检测包对该页面进行代码质量检测，各检测包的检测结果分别 如图4所示。
[0081] 通过本实施例，实现了从系统的角度将WEB前端多个代码层级的度量有机综合到 一起，并且通过可视化的方法，将整个WEB前端的质量有效地展示出来。
[0082] 实施例四
[0083] 参照图5,示出了根据本发明实施例四的一种WEB前端质量检测装置的结构框图。
[0084] 本实施例的WEB前端质量检测装置包括：确定模块402,用于获取待检测的WEB前 端的页面，确定各个页面的级别；选择模块404,用于根据各个页面的级别选择相应的检测 包，其中，检测包按照WEB前端的代码层次分别对应设置，每个检测包用于收集其对应的代 码层次的代码，并对收集的代码进行质量检测；检测模块406,用于使用选择的检测包，在 各个页面中分别收集相应的代码层次的代码，进行各个页面的代码质量检测。
[0085] 优选地，确定模块402,用于获取待检测的WEB前端的页面，根据各个页面的链接 级别确定各个页面的级别；或者，用于获取待检测的WEB前端的页面，根据各个页面的页面 浏览PV值，确定各个页面的级别。
[0086] 优选地，WEB前端的代码层次包括代码层、单元层、Π 层、浏览器层和样式层；与 WEB前端的代码层次相对应的检测包包括前端代码扫描检测包、前端单元测试检测包、前端 Π 自动化检测包、前端多浏览器对比检测包和前端样式通用检测包。
[0087] 优选地，检测模块406,用于使用选择的检测包，在各个页面中分别收集相应的代 码层次的代码；使用选择的检测包对收集到的代码分别进行代码质量检测，获取检测结果 的度量值；根据获取的检测结果的度量值，确定WEB前端的代码质量。
[0088] 优选地，检测模块406在根据获取的检测结果的度量值，确定WEB前端的代码质 量时，根据设定规则，对获取的检测结果的度量值进行权重调整；根据调整后的度量值确定 WEB前端的代码质量。
[0089] 优选地，本实施例的WEB前端质量检测装置还包括：记录模块408,用于在检测模 块406使用选择的检测包，在各个页面中分别收集相应的代码层次的代码，进行各个页面 的代码质量检测之后，记录各个页面中被检测过的代码；根据记录的代码确定WEB前端的 各个页面的错误。
[0090] 本实施例的WEB前端质量检测装置用于实现前述多个方法实施例中相应的WEB前 端质量检测方法，并具有相应方法实施例的有益效果，在此不再赘述。
[0091] 实施例五
[0092] 参照图6,示出了根据本发明实施例五的一种WEB前端质量检测装置的结构示意 图。
[0093] 本实施例中，各个检测包以检测模块的形式存在，包括但不限于：前端代码扫描检 测模块、前端单元测试检测模块、前端UI自动化检测模块、前端多浏览器对比检测模块、前 端样式通用检测模块。
[0094] 如图6所示，本实施例的WEB前端质量检测装置是一个三明治结构：两端中前端是 WEB前端质量度量模块，后端是WEB前端质量展示模块，中间的核心是各种WEB前端的质量 检测模块，如上所述，包括但不限于前端代码扫描检测模块、前端单元测试检测模块、前端 UI自动化检测模块、前端多浏览器对比检测模块，和前端样式通用检测模块。
[0095] 其中，各个检测模块的结构如图7所示，包括：检测模块的名称、度量值(用于表征 检测模块的检测结果)、注册模块(也可以是一个函数)、注销模块(也可以是一个函数)、执行 检测函数，以及用于详细结果查看的详细记录函数。每个检测模块可以通过本身的注册模 块和注销模块，相应地以注册和注销的方式在整个系统中动态地添加和注销。当一个检测 模块被调用时，通过调用"执行检测"函数启动该模块对WEB前端页面的代码收集和检测。 当系统需要查看该模块具体的检测信息时，则可以通过调用该模块的"详细记录"函数进行 详细结果查看。
[0096] WEB前端质量度量模块可以实现实施例四中包括确定模块402、选择模块404、检 测模块406、和记录模块408的功能，负责全局地管理检测模块(包括添加和注销检测模 块)、传递要检查的WEB前端的网页、同时记录网页中被执行过的代码。
[0097] WEB前端质量展示模块则可以将各个检测模块里的度量值以多种维度显示出来， 优选地，可以通过对度量值按照一定的权重调整重新计算后，将WEB前端质量以多种维度 显示出来，如图4所示。
[0098] 在具体执行时，WEB前端质量度量模块首先将所需要支持的WEB前端按照页面进 行分类，比如baidu. com的搜索页面可以分为三个page :-个是首页、一个是搜索详情页、 另外一个是到达结果页面。然后，WEB前端质量度量模块将每个页面按照重要性程度、页面 大小、代码复杂性程度等选择适合的度量方式，也即，选择适合的检测模块。检测模块一旦 选定就会开始收集各个代码层级的数据，如前端代码扫描检测模块，开始收集页面的代码 行数、代码扫描发现问题等；前端单元测试检测模块，开始收集页面包含的JS对应的单元 测试用例覆盖率，以及单元测试用例运行及通过率；前端多浏览器对比检测模块，开始检测 页面在选定浏览器中对比的情况；前端样式自动化检测包，开始收集样式自动化对当前页 面组件的覆盖率，以及通过率；前端Π 自动化检测模块，开始收集Π 自动化对当前页面组 件的覆盖率，以及通过率。接着，WEB前端质量展示模块会将页面的质量情况按照选定度量 层级多维度显示，其中多维度显示指的是页面质量会以选定的度量层级为维度展示出来， 如图4所示。在图4所示的展示界面中，点击相应模块后还可以进入该模块的检测详情页。 [0099] 在上述过程中，WEB前端质量度量模块将每个页面按照重要性程度、页面大小、 代码复杂性程度等选择适合的检测模块时，一方面，系统可以默认使用上述五个检测模块 的度量，即：前端代码扫描检测模块一前端单元测试检测模块一前端多浏览器对比检测模 土夬一前端样式通用检测模块一前端Π 自动化检测模块。这五个层级的度量没有严格的顺 序关系，可以平行展示。另一方面，页面选择度量方式可以按照设置的规则自动默认选择 的，选择完成后还可以进行人工干预。例如，一种默认的规则包括：一级页面（即从首页开 始，在一层链接内可达的所有页面）所有检测模块默认全选；二级页面（即从首页开始，在二 层链接内可达的所有页面）选择前端代码扫描检测模块、前端单元测试检测模块、前端多浏 览器对比检测模块、和前端Π 自动化检测模块；三级页面及以后（即从首页开始，在三层或 三层以上链接内可达的所有页面)，选择前端代码扫描检测模块、前端多浏览器对比检测模 块、及前端UI自动化检测模块。
[0100] 此外，上述页面级别的确定也可以按照页面PV值来衡量，如，PV值大于二级页面 平均PV的页面，均等同于一级页面；PV值大于三级页面平均PV但小于或等于二级页面平 均PV的页面，等同于二级页面，如此类推。进而，根据页面级别选择相应的检测模块。
[0101] 再者，检测模块都是以plug-in的形式提供，可以方便装载和卸载，在需要在原有 检测模块的基础上删除或者添加新的检测模块时，可以通过各个检测模块自身的注册模块 和注销模块进行，检测模块的添加和删除是全局性的。对于具体的页面的度量过程中，如果 对应检测模块没有被选中，则不执行该检测模块即可，而无须执行上述删除操作。同样，如 果检测模块被重新选中，则执行该检测模块即可，也无须执行上述添加操作。
[0102] 通过本实施例，将各种WEB前端质量检查工具按照上述的检测模块组织起来，进 行WEB前端质量的度量和展示，从系统的角度将多个代码层级的度量有机综合到一起，并 且通过可视化的方法，将整个WEB前端质量有效地展示出来。
[0103] 本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与 其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例 而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部 分说明即可。
[0104] 以上对本发明所提供的一种WEB前端质量检测方法和装置进行了详细介绍，本文 中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮 助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思 想，在【具体实施方式】及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对 本发明的限制。
【权利要求】
1. 一种WEB前端质量检测方法，其特征在于，包括： 获取待检测的WEB前端的页面，确定所述页面的级别； 根据所述页面的级别选择相应的检测包，其中，所述检测包按照所述WEB前端的代码 层次分别对应设置，每个所述检测包用于收集其对应的代码层次的代码，并对收集的所述 代码进行质量检测； 使用选择的所述检测包，在所述页面中分别收集相应的代码层次的代码，进行所述页 面的代码质量检测。
2. 根据权利要求1所述的方法，其特征在于，所述获取待检测的WEB前端的页面，确定 所述页面的级别的步骤包括： 获取待检测的WEB前端的页面，根据所述页面的链接级别确定所述页面的级别； 或者， 获取待检测的WEB前端的页面，根据所述页面的页面浏览PV值，确定所述页面的级别。
3. 根据权利要求1或2所述的方法，其特征在于，所述WEB前端的代码层次包括代码 层、单元层、用户接口 Π 层、浏览器层和样式层；与所述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前端的代码层次包括代码 层、单元层、用户接口 Π 层、浏览器层和样式层；与所述WEB前端的代码层次相对应的检测 包包括前端代码扫描检测包、前端单元测试检测包、前端UI自动化检测包、前端多浏览器 对比检测包和前端样式通用检测包。
10. 根据权利要求7所述的装置，其特征在于，所述检测模块，用于使用选择的所述检 测包，在所述页面中分别收集相应的代码层次的代码；使用选择的所述检测包对收集到的 所述代码分别进行代码质量检测，获取检测结果的度量值；根据获取的检测结果的度量值， 确定所述WEB前端的代码质量。
11. 根据权利要求10所述的装置，其特征在于，所述检测模块在根据获取的检测结果 的度量值，确定所述WEB前端的代码质量时，根据设定规则，对获取的所述检测结果的度量 值进行权重调整；根据调整后的所述度量值确定所述WEB前端的代码质量。
12. 根据权利要求7所述的装置，其特征在于，还包括： 记录模块，用于在所述检测模块使用选择的所述检测包，在所述页面中分别收集相应 的代码层次的代码，进行所述页面的代码质量检测之后，记录所述页面中被检测过的代码； 根据记录的所述代码确定所述WEB前端的页面的错误。
【文档编号】G06F11/36GK104063310SQ201310095204
【公开日】2014年9月24日 申请日期:2013年3月22日 优先权日:2013年3月22日
【发明者】栗志果, 付小运, 王一 申请人:阿里巴巴集团控股有限公司