CN103778052A - 一种前端javascript代码的测试方法和装置 - Google Patents

Abstract

本发明提供了一种前端javascript代码的测试方法和装置，其中方法包括：预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息；在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息；将所述参数信息与预期值对比以得到测试结果。本发明使得对前端javascript代码的测试更加深入，并有效改善了测试的可观测性，同时，能够更方便地对出现的问题定位。

Description

一种前端javascript代码的测试方法和装置

【技术领域】

本发明涉及代码测试技术，尤其涉及一种前端javascript代码的测试方法和装置。

【背景技术】

互联网公司在对某一个前端进行改版或升级，或者开发了一个新的前端后，都需要对该前端进行测试以保证其质量。然而，对web前端的代码进行测试通常都需要消耗大量的资源和人力成本，其中的一个重要原因是：web前端调用代码时，代码执行的很多操作结果并不能直接观测到，例如dom（Document Object Model）元素的事件绑定。现有的测试方法中，通常都是直接由人工观察web页面的实际展示效果来判断测试结果是否符合预期，这样的方法效率低下，并且在出现问题时，难以对问题定位，同时，由于无法直接检验代码所执行的不可观测的操作结果，容易将潜在的问题遗漏。

【发明内容】

有鉴于此，本发明提供了一种前端javascript代码的测试方法和装置，能够使得对前端javascript代码的测试更加深入，测试结果更加准确。

具体技术方案如下：

一种前端javascript代码的测试方法，预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息，该方法包括：

S1、在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息；

S2、将所述参数信息与预期值对比以得到测试结果。

根据本发明一优选实施例，所述回调注入函数在所述需检测接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息，具体包括：

所述回调注入函数在某一接口被调用时，将该接口的接口格式与所述需检测的接口的接口格式进行匹配，若匹配成功，则依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息；否则，忽略本次接口调用。

根据本发明一优选实施例，所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息保存在特定文件中；

所述回调注入函数从所述特定文件中获取所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

根据本发明一优选实施例，所述步骤S1中在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，具体包括：

对被测javascript代码进行词法分析，将代码序列转换为单词Token序列；

对转换得到的Token序列进行语法分析，并从Token序列组合得到的语法短语中识别出接口调用的代码位置；

在所述接口调用的代码位置处载入所述回调注入函数。

根据本发明一优选实施例，所述步骤S2中将所述参数信息与预期值对比以检验测试结果之前，还包括：将所述参数信息按照预先设定的格式输出，之后再与预期值对比以检验测试结果。

一种前端javascript代码的测试装置，预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息，该装置包括：

输入记录单元，用于获取并记录预先确定的被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息；

回调注入单元，用于在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息；

输出对比单元，用于将所述参数信息与预期值对比以检验测试结果。

根据本发明一优选实施例，所述回调注入函数在所述需检测接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息时，具体执行：

所述回调注入函数在某一接口被调用时，将该接口的接口格式与所述需检测的接口的接口格式进行匹配，若匹配成功，则依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息；否则，忽略本次接口调用。

根据本发明一优选实施例，所述输入记录单元将需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息保存在特定文件中；

所述回调注入函数从所述特定文件中获取所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

根据本发明一优选实施例，所述回调注入单元在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，具体执行：

对被测javascript代码进行词法分析，将代码序列转换为单词Token序列；

对转换得到的Token序列进行语法分析，并从Token序列组合得到的语法短语中识别出接口调用的代码位置；

在所述接口调用的代码位置处载入所述回调注入函数。

根据本发明一优选实施例，所述输出对比单元将所述参数信息与预期值对比以检验测试结果之前，还执行：将所述参数信息按照预先设定的格式输出，之后再与预期值对比以检验测试结果。

由以上技术方案可以看出，本发明通过检测前端对被测javascript代码中接口的调用，获取被测javascript代码通过接口输出的相关的参数信息，并将该些参数信息与预期值对比来验证测试结果，使得对前端javascript代码的测试更加深入，并有效改善了对前端javascript代码测试的可观测性，同时，能够更方便地对出现的问题定位，不再依赖人工观察，测试结果更加准确。

【附图说明】

图1为本发明实施例一提供的前端javascript代码的测试方法流程图；

图2为本发明实施例一提供的载入回调注入函数方法流程图；

图3为本发明实施例二提供的前端javascript代码的测试装置示意图。

【具体实施方式】

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

在实际应用中，web前端通常需要调用javascript代码来执行相应操作，以实现用户所需的功能，web前端对javascript代码的调用是通过调用javascript代码向外公开的接口来完成的。当web前端所需的操作不同时，其调用的接口也不一样，本发明正是通过截获web前端对javascript代码接口的调用来将javascript代码的输出结果变为固定格式的日志输出，从而使得前端javascript代码测试结果变得可观测。

实施例一

图1为本发明实施例一提供的前端javascript代码的测试方法流程图，如图1所示，该方法包括：

S101、预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

为了能够检测到被测javascript代码中被前端调用的接口，同时获取所需要的参数信息，需要在本步骤中，预先确定并记录被测javascript代码中需要检测的接口的接口格式以及与该接口对应的所需要检测的字段信息，以便在后续步骤中能从该些字段中获取所需参数信息。

通常，不同的接口对应前端调用javascript代码来执行的不同操作，在确定需要检测的接口的接口格式的同时，可以根据不同的操作类型的特点来设置与接口对应的所需检测的字段信息。下面根据常用的操作类型，对这一步骤进行进一步描述：

1、对某一个dom元素属性的修改：该操作类型的特点为，会将某一个dom元素的属性进行修改，例如，修改该dom元素的长和高等，可根据该特点设置所需检测的字段为：接口函数名、操作类型、dom_id、修改的属性名list。

2、对某一个dom元素的增删：该操作类型的特点为，会增加某一个dom元素，或直接删除某一个dom元素，可根据该特点设置所需检测的字段为：接口函数名、操作类型、dom_id。

3、事件绑定：该操作类型的特点为，当触发某一特定事件时执行所绑定的javascript代码，可根据该特点设置所需检测的字段为：接口函数名、操作类型、绑定事件类型。

4、发送Ajax请求：该操作类型的特点为，会向后端发送Ajax请求，可根据该特点设置所需检测的字段为：接口函数名、操作类型、请求的url、请求中发送的数据。

可以理解的是，上述四类操作仅出于示例的目的，本发明的实施例不限于此。在实际测试中，可以确定被测javascript代码中每个接口的接口格式，以及与该些接口对应的所需检测的字段信息来对所有的接口调用进行检测，也可以只确定被测javascript代码中某些接口的接口格式以及对应的所需检测的字段信息来有针对性的对该些接口的调用进行检测。

在确定了被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息后，将该些接口格式以及对应的所需要检测的字段信息保存在特定文件中。

S102、在所述被测javascript代码中每个向外公开的接口的接口调用的代码位置处载入回调注入函数。

为了能截获每次web前端对被测javascript代码的调用，并获取所需的参数信息，需要在被测javascript代码中所有接口调用的代码位置处载入回调注入函数，以保证在每次web前端调用被测javascript代码的接口后，该回调注入函数都会被执行。

如图2所示，载入回调注入函数的可以通过下述步骤S1021-S1023来实现：

S1021、词法分析，对被测javascript代码进行词法分析，将其代码序列转换为单词（Token）序列，以便于后续的语法分析识别出代码中的接口调用。这一过程可以利用第三方工具Lex（词法分析器）来完成。

S1022、语法分析，对步骤S1021中词法分析得到的单词序列进行语法分析，将单词序列组合成为语法短语，并从中识别出每一个接口调用的代码位置。语法分析可以利用第三方工具Yacc（语法分析器）来完成。

S1023、载入回调注入函数，在步骤S 1022中所识别出的每一个接口调用的代码位置载入回调注入函数，以保证每次接口调用时，回调注入函数都会被执行。

需要说明的是，对于使用tangram库或jquery库作为基础库的符合规范的代码，可以直接统一在该代码的tangram库或jquery库中载入回调注入函数。

继续参看图1。

S103、所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息。

在步骤S102中，在被测javascript代码中所有接口调用的代码位置处载入了回调注入函数后，每次web前端调用被测javascript代码的接口时，该回调注入函数都会被执行，回调注入函数首先获取本次调用的接口的接口格式，并将之与步骤S101中特定文件中所保存的预先确定的需要检测的接口格式进行匹配，若不匹配，则忽略本次接口调用；若匹配，则说明需要检测本次调用的接口，根据接口格式以及接口函数名来确定该接口，之后根据步骤S101中特定文件中所保存的预先设置的该接口对应的所需要检测的字段信息，到相应的字段中获取对应的参数信息。

S104、将所述参数信息与预期值对比以检验测试结果。

在回调注入函数获取得到所需要的参数信息后，将该些参数信息输出，并与预先设定的预期值对比以查看该些参数信息的值是否符合预期，从而进一步判断测试结果，若所输出的参数信息与预期值相同，则认为测试通过，否则，认为测试未通过。

为了便于观察参数信息以及将其与预期值对比，可以将回调注入函数所获取得到的参数信息按预先设定格式输出，例如，可将该些参数信息按照json格式形成日志后输出，之后，将所输出的日志内容与预期值进行对比以验证测试结果。

将参数信息与预期值对比可以通过正则匹配来完成，即预先设定预期值的日志信息，之后在该日志信息中利用正则表达式来匹配查看是否有对应的信息，若有，则认为测试通过；否则，认为测试未通过。

通过对上述本发明实施例提供的方法描述可以看出，本发明通过检测前端对被测javascript代码中接口的调用，来获取被测javascript代码通过接口输出的相关的参数信息，并将该些参数信息与预期值对比来验证测试结果。与传统的人工观察web页面的实际展示效果来判断测试结果的方法相比，本发明所提供的方法使得测试更加深入，显著改善了测试的可观测性。

实施例二

图3为本发明实施例二提供的前端javascript代码的测试装置示意图，如图3所示，该装置包括：输入记录单元10，回调注入单元20，输出对比单元30。

输入记录单元10，用于获取并记录预先确定的被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

为了能够检测到被测javascript代码中被前端调用的接口，同时获取所需要的参数信息，需要预先确定并记录被测javascript代码中需要检测的接口的接口格式以及与该些接口对应的所需要检测的字段信息。

通常，不同的接口对应前端调用javascript代码来执行的不同操作，在确定需要检测的接口的接口格式的同时，可以根据不同的操作类型的特点来设置与接口对应的所需检测的字段信息。下面根据常用的操作类型，对这一步骤进行进一步描述：

1、对某一个dom元素属性的修改：该操作类型的特点为，会将某一个dom元素的属性进行修改，例如，修改该dom元素的长和高等，可根据该特点设置所需检测的字段为：接口函数名、操作类型、dom_id、修改的属性名list。

2、对某一个dom元素的增删：该操作类型的特点为，会增加某一个dom元素，或直接删除某一个dom元素，可根据该特点设置所需检测的字段为：接口函数名、操作类型、dom_id。

3、事件绑定：该操作类型的特点为，会将某一函数与特定事件绑定，可根据该特点设置所需检测的字段为：接口函数名、操作类型、绑定事件类型。

4、发送Ajax请求：该操作类型的特点为，会向后端发送Ajax请求，可根据该特点设置所需检测的字段为：接口函数名、操作类型、请求的url、请求中发送的数据。

可以理解的是，上述四类操作仅出于示例的目的，本发明的实施例不限于此。在实际测试中，可以确定被测javascript代码中每个接口的接口格式，以及与该些接口对应的所需检测的字段信息来对所有的接口调用进行检测，也可以只确定被测javascript代码中某些接口的接口格式以及对应的所需检测的字段信息来有针对性的对该些接口的调用进行检测。

在确定了被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息后，输入记录单元10将该些接口格式以及对应的所需要检测的字段信息保存在特定文件中。

回调注入单元20，用于在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息。

为了能截获每次web前端对被测javascript代码的调用，并获取所需的参数信息，需要在被测javascript代码中所有接口调用的代码位置处载入回调注入函数，以保证在每次web前端调用被测javascript代码的接口后，该回调注入函数都会被执行。

回调注入单元20可以执行下述操作来在被测javascript代码的接口调用的代码位置处载入回调注入函数：

词法分析，对被测javascript代码进行词法分析，将其代码序列转换为单词（Token）序列，以便于后续的语法分析识别出代码中的接口调用，这一过程可以利用第三方工具Lex（词法分析器）来完成；

语法分析，对词法分析得到的单词序列进行语法分析，将单词序列组合成为语法短语，并从中识别出每一个接口调用的代码位置，语法分析可以利用第三方工具Yacc（语法分析器）来完成；

载入回调注入函数，在语法分析后所识别出的每一个接口调用的代码位置载入回调注入函数，以保证每次接口调用时，回调注入函数都会被执行。

需要说明的是，对于使用tangram库或jquery库作为基础库的符合规范的代码，回调注入单元20可以直接统一在该代码的tangram库或jquery库中载入回调注入函数。

在被测javascript代码中所有接口调用的代码位置处载入了回调注入函数后，每次web前端调用被测javascript代码的接口时，该回调注入函数都会被执行，回调注入函数首先获取本次调用的接口的接口格式，并将之与特定文件中所保存的预先确定的需要检测的接口格式进行匹配，若不匹配，则忽略本次接口调用；若匹配，则说明需要检测本次调用的接口，根据接口格式以及接口函数名来确定该接口，之后根据特定文件中所保存的预先设置的该接口对应的所需要检测的字段信息，到相应的字段中获取对应的参数信息，并将该些参数信息传递给输出对比单元30。

输出对比单元30，用于将所述参数信息与预期值对比以检验测试结果。

输出对比单元30获取得到所需要的参数信息后，将该些参数信息输出，并与预先设定的预期值对比以查看该些参数信息的值是否符合预期，从而进一步判断测试结果，若所输出的参数信息与预期值相同，则认为测试通过，否则，认为测试未通过。

为了便于观察参数信息以及将其与预期值对比，可以将回调注入函数所获取得到的参数信息按预先设定格式输出，例如，可将该些参数信息按照json格式形成日志后输出，之后，将所输出的日志内容与预期值进行对比以验证测试结果。

将参数信息与预期值对比可以通过正则匹配来完成，即预先设定预期值的日志信息，之后在该日志信息中利用正则表达式来匹配查看是否有对应的信息，若有，则认为测试通过；否则，认为测试未通过。

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

Claims (10)

1.一种前端javascript代码的测试方法，其特征在于，预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息，该方法包括：

S1、在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息；

S2、将所述参数信息与预期值对比以得到测试结果。

2.根据权利要求1所述的方法，其特征在于，所述回调注入函数在所述需检测接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息，具体包括：

所述回调注入函数在某一接口被调用时，将该接口的接口格式与所述需检测的接口的接口格式进行匹配，若匹配成功，则依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息；否则，忽略本次接口调用。

3.根据权利要求2所述的方法，其特征在于，所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息保存在特定文件中；

所述回调注入函数从所述特定文件中获取所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

4.根据权利要求1所述的方法，其特征在于，所述步骤S1中在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，具体包括：

对被测javascript代码进行词法分析，将代码序列转换为单词Token序列；

对转换得到的Token序列进行语法分析，并从Token序列组合得到的语法短语中识别出接口调用的代码位置；

在所述接口调用的代码位置处载入所述回调注入函数。

5.根据权利要求1所述的方法，其特征在于，所述步骤S2中将所述参数信息与预期值对比以检验测试结果之前，还包括：将所述参数信息按照预先设定的格式输出，之后再与预期值对比以检验测试结果。

6.一种前端javascript代码的测试装置，其特征在于，预先确定并记录被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息，该装置包括：

输入记录单元，用于获取并记录预先确定的被测javascript代码中需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息；

回调注入单元，用于在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，所述回调注入函数在所述需检测的接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取参数信息；

输出对比单元，用于将所述参数信息与预期值对比以检验测试结果。

7.根据权利要求6所述的装置，其特征在于，所述回调注入函数在所述需检测接口被调用时，依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息时，具体执行：

所述回调注入函数在某一接口被调用时，将该接口的接口格式与所述需检测的接口的接口格式进行匹配，若匹配成功，则依据所述与该接口对应的所需要检测的字段信息，在相应的字段中获取所述参数信息；否则，忽略本次接口调用。

8.根据权利要求7所述的装置，其特征在于，所述输入记录单元将需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息保存在特定文件中；

所述回调注入函数从所述特定文件中获取所述需检测的接口的接口格式以及与该接口对应的所需要检测的字段信息。

9.根据权利要求6所述的装置，其特征在于，所述回调注入单元在所述被测javascript代码中每个接口调用的代码位置处载入回调注入函数，具体执行：

对被测javascript代码进行词法分析，将代码序列转换为单词Token序列；

对转换得到的Token序列进行语法分析，并从Token序列组合得到的语法短语中识别出接口调用的代码位置；

在所述接口调用的代码位置处载入所述回调注入函数。

10.根据权利要求6所述的装置，其特征在于，所述输出对比单元将所述参数信息与预期值对比以检验测试结果之前，还执行：将所述参数信息按照预先设定的格式输出，之后再与预期值对比以检验测试结果。

Images