CN114625644A - 页面组件的单元测试方法、装置及设备 - Google Patents

Abstract

本申请公开了一种页面组件的单元测试方法、装置及设备，涉及自动化测试领域，可解决目前在进行页面组件的单元测试时，测试工作量大、成本高，且测试效率低的技术问题。其中方法包括：确定待进行单元测试的目标页面组件，所述目标页面组件中至少包含一个页面元素；获取所述目标页面组件的组件信息，并根据所述组件信息生成所述目标页面组件的配置文件，所述组件信息包括所述目标页面组件包含的页面元素，每个所述页面元素对应的绑定事件，每个所述页面元素对应所述绑定事件下的预期执行结果；根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码；利用所述单元测试代码测试所述目标页面组件，获取单元测试结果。

Description

页面组件的单元测试方法、装置及设备

技术领域

本申请涉及自动化测试领域，尤其涉及到一种页面组件的单元测试方法、装置及设备。

背景技术

目前前端行业内，随着前端技术的发展及日渐成熟的体系，页面元素的单元测试在大型项目中，已经显得非常重要。当项目增加了单元测试以后，可以保证每次开发改动后，通过脚本编写好的单元测试进行验证，及时排查出问题，以及对原有功能代码的影响等等。避免在代码移交或者上线后，才发现问题。同时，也可以节省测试人员手工测试的投入，以及避免人为疏漏缺少的测试案例覆盖。

单位测试虽然好，但是要想做到所有项目都有单元测试脚本，目前来看，是不太现实的。因为编写单元测试脚本，是一件非常耗费时间的事情，不同框架的单元测试脚本写法还有很大差别，且单元测试脚本使用的语法有别与正常开发业务逻辑的语法，需要单独学习才可以进行编写，对于开发者来说，需要额外投入精力去学习。此外，随着项目代码的不断迭代开发，页面元素变化导致单元测试脚本失效需要重写，开发者需要重新投入梳理原有逻辑以及重现编写。故现有从而导致测试工作量大、测试效率低。

发明内容

有鉴于此，本申请提供了一种页面组件的单元测试方法、装置及设备，可解决目前在进行页面组件的单元测试时，测试工作量大、成本高，且测试效率低的技术问题。

根据本申请的一个方面，提供了一种页面组件的单元测试方法，该方法包括：

确定待进行单元测试的目标页面组件，所述目标页面组件中至少包含一个页面元素；

获取所述目标页面组件的组件信息，并根据所述组件信息生成所述目标页面组件的配置文件，所述组件信息包括所述目标页面组件包含的页面元素，每个所述页面元素对应的绑定事件，每个所述页面元素对应所述绑定事件下的预期执行结果；

根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码；

利用所述单元测试代码测试所述目标页面组件，获取单元测试结果。

根据本申请的另一个方面，提供了一种页面组件的单元测试装置，该装置包括：

确定模块，用于确定待进行单元测试的目标页面组件，所述目标页面组件中至少包含一个页面元素；

第一生成模块，用于获取所述目标页面组件的组件信息，并根据所述组件信息生成所述目标页面组件的配置文件，所述组件信息包括所述目标页面组件包含的页面元素，每个所述页面元素对应的绑定事件，每个所述页面元素对应所述绑定事件下的预期执行结果；

第二生成模块，用于根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码；

测试模块，用于利用所述单元测试代码测试所述目标页面组件，获取单元测试结果。

根据本申请的又一个方面，提供了一种非易失性可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述页面组件的单元测试方法。

根据本申请的再一个方面，提供了一种计算机设备，包括非易失性可读存储介质、处理器及存储在非易失性可读存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述页面组件的单元测试方法。

借由上述技术方案，本申请提供的一种页面组件的单元测试方法、装置及设备，与目前页面组件的单元测试方式相比，本申请可首先确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素；进一步获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果；之后可根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码；最后利用单元测试代码测试目标页面组件，获取单元测试结果。本申请中的技术方案，可实现自动化生成页面元素事件的单元测试代码，开发人员不再需要一个个编写，只需要将插件引入到项目中，可节约人工重复编写测试测试的时间，提高单元测试的效率，并保证单元测试代码的准确性。此外，对于项目需求的变更，只需要重新执行测试案例生成，就可以得到更新，可以做到一次引入，整个项目生命周期内，都可以重复使用，故可提高单元测试的复用率，并且能够将自动化测试代码与项目代码完全分离，不会影响业务代码的执行和可读性，在打包过程中，也不会加入到项目代码中，不会增加包的大小。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本地申请的不当限定。在附图中：

图1示出了本申请实施例提供的一种页面组件的单元测试方法的流程示意图；

图2示出了本申请实施例提供的另一种页面组件的单元测试方法的流程示意图；

图3示出了本申请实施例提供的一种页面组件的单元测试装置的结构示意图；

图4示出了本申请实施例提供的另一种页面组件的单元测试装置的结构示意图。

具体实施方式

下文将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互结合。

针对目前在进行页面组件的单元测试时，测试工作量大、成本高，且测试效率低的技术问题，本实施例提供了一种页面组件的单元测试方法，如图1所示，该方法包括：

101、确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素。

其中，目标页面组件具体可为前端页面中待测试的组件，前端页面可以是网站页面、浏览器页面、应用页面或web页面。其中，在目标页面组件中至少包含一个可配置绑定事件的页面元素，页面元素可以是控件、流程节点、图标、按钮和输入框等，绑定事件可包括点击(onclick)事件、改变(onChange)事件、聚焦(onfocus)事件等。

对于本申请的执行主体可为页面组件的单元测试装置，可配置在客户端侧或服务端侧，能够基于目标页面组件的配置文件以及预设的单元测试工具库，生成目标页面组件的单元测试代码，并利用单元测试代码测试目标页面组件，获取单元测试结果。

102、获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果。

其中，配置文件config.js是一个json格式的文件。是通过编写json格式的键值对形式的代码。配置文件配置内容可包括：(1)项目根目录地址；(2)需要生成单元测试代码vue文件的地址，如果未配置则默认检索项目中，所有.vue结尾的文件。

在具体的应用场景中，在获取目标页面组件的组件信息时，可通过预先编写用于抓取前端页面中的组件的组件信息的信息抓取代码，进一步可通过在前端页面上执行信息抓取代码，即可抓取到目标页面组件的组件信息。对于本实施例，目标页面组件的组件信息可包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，以及每个页面元素对应绑定事件下的预期执行结果，其中，预期执行结果用于与各个页面元素对应绑定事件的模拟执行结果进行对比，并根据对比确定页面元素是否通过测试。

103、根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码。

在具体的应用场景中，目前前端最常用的框架项目主要是vue和react，不同框架项目的实现过程是不一样的，作为一种优选方式，本申请可针对vue框架的3及以上版本来进行实现。单元测试(unit testing)，是指对软件中的最小可测试单元进行检查和验证。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。在单元测试过程中，需要用到单元测试工具库test-utils，单元测试工具库可包括jest、vue-jest和babel-jest。故首先需要定位目标页面组件所处的测试框架项目，并通过检查项目中的package.json文件，判断是否包含test-utils，如果不包含，则会自动通过指令npm install test-utils-g安装此单元测试工具库。其中，每个测试框架项目的根目录下面，一般都有一个package.json文件，package.json文件定义了这个项目所需要的各种模块，以及项目的配置信息(比如名称、版本、许可证等元数据。需要说明的是，测试框架项目独立于前端页面项目，可以实现测试脚本代码与前端页面的源代码完全分离，从而在后续生成测试脚本的过程中，不会将相关测试脚本代码加入到前端页面的源代码中，对于源代码的稳定性、可读性、可维护性，均不会造成任何影响。

对于本实施例，在通过指令npm install test-utils-g安装此单元测试工具库时，具体可通过系统底层的命令行工具，比如windows的cmd命令行工具，打开后，通过cd命令定位到项目根目录，并在当前项目根目录中进一步执行初始命令：npm i pa-vue3-unit-test-code-producer-D，就可以将单元测试工具库下载安装到该测试框架项目中。在将单元测试工具库下载安装到测试框架项目中后，单元测试工具库中的单元测试代码自动生成工具首先会生成一个unitTests.js文件作为全局配置设置。然后会在当前框架项目的根目录，自动生成一个名为code的根文件夹。在文件夹内，根据配置文件config.js中，设置的需要生成单元测试代码vue文件地址，生成相同的目录。后续流程中，生成的单元测试代码文件，会放入对应的目录中。在根据配置文件config.js中，设置的需要生成单元测试代码vue文件地址，生成相同的目录时，具体可根据配置的需要生成单元测试代码vue文件的地址，在code文件夹下生成对应目录。比如：原文件在项目根目录地址为：./src/component/aaa.vue，那么在code文件夹下，则生成目录为./code/src/component/aaa.test.js测试代码文件。

相应的，在执行本实施例步骤之前，实施例步骤具体可以包括：获取目标页面组件的测试框架项目，检测测试框架项目中是否包含预设的单元测试工具库；若否，则通过命令行工具定位测试框架项目的根目录，并在根目录下通过输入预设指令安装单元测试工具库。

104、利用单元测试代码测试目标页面组件，获取单元测试结果。

通过本实施例中页面组件的单元测试方法，可首先确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素；进一步获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果；之后可根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码；最后利用单元测试代码测试目标页面组件，获取单元测试结果。本申请中的技术方案，可实现自动化生成页面元素事件的单元测试代码，开发人员不再需要一个个编写，只需要将插件引入到项目中，可节约人工重复编写测试测试的时间，能够提高单元测试的效率，并保证单元测试代码的准确性。此外，对于项目需求的变更，只需要重新执行测试案例生成，就可以得到更新，可以做到一次引入，整个项目生命周期内，都可以重复使用，故可提高单元测试的复用率，并且能够将自动化测试代码与项目代码完全分离，不会影响业务代码的执行和可读性，在打包过程中，也不会加入到项目代码中，不会增加包的大小。

进一步的，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例中的具体实施过程，提供了另一种页面组件的单元测试方法，如图2所示，该方法包括：

201、确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素。

202、获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果。

203、对目标页面组件进行模拟挂载处理。

在具体的应用场景中，只有当页面元素挂载后，才能实现对挂载的页面元素进行模拟执行绑定事件。对于本实施例，可通过读取配置文件config.json中，设置的需要生成单元测试代码vue文件地址，读取到对应的.vue文件。进一步生成该vue组件空白测试脚本，通过import语法引入需要测试的组件，如import组件from‘../组件’。通过import语法，引入页面元素挂载完成事件mount模拟触发函数，如import{mount}from'@vue/test-utils'，最后通过语句let wrapper＝mount(组件)，此时可以得到该组件挂载完成后所有的页面元素。示例性的，一个网页在浏览器中打开，需要通过解析页面代码，然后将代码中的页面元素，展示在浏览器中，这个过程就是页面元素挂载。自动化测试过程中，不是真的将页面在浏览器中打开，而是模拟这个动作的执行，所以需要引入mount函数来模拟触发页面元素挂载这个动作。只有页面元素挂载了，页面元素上的绑定事件才可以生效。

相应的，对于本实施例，实施例步骤203具体可以包括：获取目标页面组件的测试框架项目，并利用import语法将目标页面组件以及目标页面组件的mount模拟触发函数引入测试框架项目，以实现对目标页面组件以及目标页面组件中所有页面元素的模拟挂载处理。

204、基于预设的单元测试工具库，利用配置文件生成模拟挂载完成的目标页面组件中每个页面元素对应的事件单元测试代码。

需要说明的是，在执行本实施例步骤之前，需要检测目标页面组件的测试框架项目中是否存在预设的单元测试工具库，若不存在，则需要首先执行在该测试框架项目中对单元测试工具库的下载安装操作，具体实现过程可参见实施例步骤103中的相关描述，在此不再赘述。

在具体的应用场景中，对于本实施例，在经过实施例步骤203完成对目标页面组件中页面元素的挂载后，可进一步基于预设的单元测试工具库以及页面元素的绑定事件生成单元测试代码。其中，目标页面组件中页面元素的绑定事件可包括点击(onclick)事件、改变(onChange)事件、聚焦(onfocus)事件等。相应的，对于本实施例，实施例步骤204具体可以包括：模拟触发执行经过模拟挂载的目标页面组件中每个页面元素的绑定事件，并利用关键字提取模拟触发过程中的返回值；判断返回值的数据类型，并根据数据类型为每个页面元素生成对应的事件单元测试代码。

作为一种可选方式，对于onclick事件，在生成单元测试代码时，实施例步骤具体可以包括：

1a)、通过查找template模板中，包含关键字“@click”的页面元素，然后自动给该元素加上唯一的id值，通过自动生成语法为wrapper.find('页面元素唯一的id')的代码，获取到点击事件触发的页面元素。其中，template模板是vue组件中放置页面元素的地方，包裹在template标签内；

2a)、通过编写语法为wrapper.trigger("click")的代码，模拟自动触发click事件；

3a)、通常click事件是绑定一个vue组件内methods对象中的一个方法的执行，通过template模板中@click关键字绑定的方法名，从methods对象中找到对应的方法；

4a)、方法的执行，首先需要考虑的是执行过程中是否有报错，如果报错则肯定单元测试不通过。通过在wrapper.trigger("click")的代码外层包裹一层try...catch方法，通过try…catch方法捕异常信息，当代码执行出现问题时，js底层机制会抛出异常，即捕获到有异常，此时可以直接输出单元测试不通过；

5a)、排除了上面一步代码报错的场景，还需要判断方法是否满足最终的输出。在对应的方法中通过查找return关键字，判断是否有返回值，将返回值进行数据类型的判断。如果数据类型为布尔值(true、false)，则可以生成事件单元测试代码expect(wrapper.trigger("click")).toBeFalsy()或者生成事件单元测试代码expect(wrapper.trigger("click")).toBeTruthy()，来验证对应方法最终输出是否正确。如果数据类型是是一个字符串类型，且有具体值，则生成事件单元测试代码expect(wrapper.trigger("click")).toBe(“具体字符串”)。

作为另一种可选方式，对于onChange事件、onfocus事件，在生成单元测试代码时，实施例步骤具体可以包括：

1b)、鉴于这两种绑定事件只会出现在表单元素中，代表输入框中值改变事件和聚焦事件。故可通过查找template模板中，input、textarea元素，是否包含@change、@focus关键字，然后自动给该元素加上唯一的id值，通过自动生成语法为wrapper.find('页面元素唯一的id')的代码，获取到改变或聚焦事件触发的页面元素；

2b)、通过编写语法为wrapper.trigger("change/focus")的代码，模拟自动触发change、focus事件；

3b)、通过编写语法为wrapper.getValue()代码，获取当前元素中输入框中值；

4b)、通过template模板中@change、@focus关键字绑定的方法名，从methods对象中找到对应的方法；

5b)、与4a)类似，在wrapper.trigger("change/focus")的代码外层包裹一层try...catch方法，当捕获到有异常时，则可以直接输出单元测试不通过；

6b)、在触发对应函数的时候，将3b)中获取到输入框的值，通过语法wrapper.trigger("change/focus").(输入框的值)，作为入参进行传入；

7b)、与5a)类似，在对应的方法中通过查找return关键字，判断是否有返回值，将返回值进行数据类型的判断。如果数据类型为布尔值(true、false)，则可以通过生成事件单元测试代码expect(wrapper.trigger("click")).toBeFalsy()或者expect(wrapper.trigger("click")).toBeTruthy()，来验证对应方法最终输出是否正确。如果数据类型是是一个字符串类型，且有具体值，则通过生成事件单元测试代码expect(wrapper.trigger("click")).toBe(“具体字符串”)。

205、将目标页面组件中所有页面元素对应的事件单元测试代码，作为单元测试代码。

对于本实施，在生成目标页面组件中各个页面元素对应的事件单元测试代码后，可将所有页面元素对应的事件单元测试代码作为目标页面组件的单元测试代码，即将各个页面元素对应的事件单元测试代码作为单元测试代码的一部分，以便根据事件单元测试代码对应所有页面元素的测试结果确定目标页面组件最终的测试结果。

206、利用单元测试代码测试目标页面组件，获取单元测试结果。

在具体的应用场景中，在目标页面组件所包含的所有页面元素均通过事件单元测试时，即可判定目标页面组件的单元测试结果为通过单元测试。相应的，实施例步骤206具体可以包括：利用事件单元测试代码分别单元测试对应的页面元素；若确定目标页面组件中任一页面元素均通过单元测试，则判定目标页面组件的单元测试结果为通过单元测试；若确定目标页面组件中存在至少一页面元素未通过单元测试，则判定目标页面组件的单元测试结果为未通过单元测试。

相应的，在利用事件单元测试代码分别单元测试对应的页面元素时，实施例步骤具体可以包括：执行各个页面元素对应的事件单元测试代码，获取测试执行结果；对比页面元素的测试执行结果和预期执行结果；若测试执行结果与页面元素的预期执行结果一致，则判断页面元素通过单元测试；若测试执行结果与页面元素的预期执行结果不一致，则判断页面元素未通过单元测试。

借由上述页面组件的单元测试方法，可首先确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素；进一步获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果；之后可根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码；最后利用单元测试代码测试目标页面组件，获取单元测试结果。本申请中的技术方案，对于页面元素事件的单元测试代码，可实现自动化生成，开发人员不再需要一个个编写，只需要将插件引入到项目中，可节约人工重复编写测试测试的时间，能够提高单元测试的效率，并保证单元测试代码的准确性。此外，还可在测试过程中及时排查出问题，以及对原有功能代码的影响等等。避免在代码移交或者上线后，才发现问题。同时，也可以节省测试人员手工测试的投入，以及避免人为疏漏缺少的测试案例覆盖。

进一步的，作为图1和图2所示方法的具体实现，本申请实施例提供了一种页面组件的单元测试装置，如图3所示，该装置包括：确定模块31、第一生成模块32、第二生成模块33、测试模块34；

确定模块31，可用于确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素；

第一生成模块32，可用于获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果；

第二生成模块33，可用于根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码；

测试模块34，可用于利用单元测试代码测试目标页面组件，获取单元测试结果。

在具体的应用场景中，单元测试代码包括目标页面组件中每个页面元素对应的事件单元测试代码，相应的，在根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码时，第二生成模块33，具体可用于：对目标页面组件进行模拟挂载处理；基于预设的单元测试工具库，利用配置文件生成模拟挂载完成的目标页面组件中每个页面元素对应的事件单元测试代码；将目标页面组件中所有页面元素对应的事件单元测试代码，作为单元测试代码。

相应的，在对目标页面组件进行模拟挂载处理时，第二生成模块33，具体可用于：获取目标页面组件的测试框架项目，并利用import语法将目标页面组件以及目标页面组件的mount模拟触发函数引入测试框架项目，以实现对目标页面组件以及目标页面组件中所有页面元素的模拟挂载处理。

在具体的应用场景中，绑定事件包括点击事件、改变事件、聚焦事件，相应的，在基于预设的单元测试工具库，利用配置文件生成模拟挂载完成的目标页面组件中每个页面元素对应的事件单元测试代码时，第二生成模块33，具体可用于：模拟触发执行经过模拟挂载的目标页面组件中每个页面元素的绑定事件，并利用关键字提取模拟触发过程中的返回值；判断返回值的数据类型，并根据数据类型为每个页面元素生成对应的事件单元测试代码。

在具体的应用场景中，在利用单元测试代码测试目标页面组件，获取单元测试结果时，测试模块34，具体可用于：利用事件单元测试代码分别单元测试对应的页面元素；若确定目标页面组件中任一页面元素均通过单元测试，则判定目标页面组件的单元测试结果为通过单元测试；若确定目标页面组件中存在至少一页面元素未通过单元测试，则判定目标页面组件的单元测试结果为未通过单元测试。

相应的，在利用事件单元测试代码分别单元测试对应的页面元素时，测试模块34，具体可用于：执行各个页面元素对应的事件单元测试代码，获取测试执行结果；对比页面元素的测试执行结果和预期执行结果；若测试执行结果与页面元素的预期执行结果一致，则判断页面元素通过单元测试；若测试执行结果与页面元素的预期执行结果不一致，则判断页面元素未通过单元测试。

在具体的应用场景中，为了使目标页面组件对应的测试框架项目中存在预设的单元测试工具库，如图4所示，该装置还包括：检测模块35、安装模块36；

检测模块35，可用于获取目标页面组件的测试框架项目，检测测试框架项目中是否包含预设的单元测试工具库；

安装模块36，可用于若测试框架项目中不包含预设的单元测试工具库，则通过命令行工具定位测试框架项目的根目录，并在根目录下通过输入预设指令安装单元测试工具库。

需要说明的是，本实施例提供的一种页面组件的单元测试装置所涉及各功能单元的其他相应描述，可以参考图1至图2的对应描述，在此不再赘述。

基于上述如图1至图2所示方法，相应的，本实施例还提供了一种非易失性存储介质，其上存储有计算机可读指令，该可读指令被处理器执行时实现上述如图1至图2所示的页面组件的单元测试方法。

基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景的方法。

基于上述如图1至图2所示的方法和图3、图4所示的虚拟装置实施例，为了实现上述目的，本实施例还提供了一种计算机设备，该计算机设备包括存储介质和处理器；非易失性存储介质，用于存储计算机程序；处理器，用于执行计算机程序以实现上述如图1至图2所示的页面组件的单元测试方法。

可选的，该计算机设备还可以包括用户接口、网络接口、摄像头、射频(RadioFrequency，RF)电路，传感器、音频电路、WI-FI模块等等。用户接口可以包括显示屏(Display)、输入单元比如键盘(Keyboard)等，可选用户接口还可以包括USB接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如WI-FI接口)等。

本领域技术人员可以理解，本实施例提供的一种计算机设备结构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。

非易失性存储介质中还可以包括操作系统、网络通信模块。操作系统是管理上述计算机设备硬件和软件资源的程序，支持信息处理程序以及其它软件和/或程序的运行。网络通信模块用于实现非易失性存储介质内部各组件之间的通信，以及与信息处理实体设备中其它硬件和软件之间通信。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。

通过应用本申请的技术方案，与目前现有技术相比，本申请可首先确定待进行单元测试的目标页面组件，目标页面组件中至少包含一个页面元素；进一步获取目标页面组件的组件信息，并根据组件信息生成目标页面组件的配置文件，组件信息包括目标页面组件包含的页面元素，每个页面元素对应的绑定事件，每个页面元素对应绑定事件下的预期执行结果；之后可根据配置文件以及利用预设的单元测试工具库，生成目标页面组件的单元测试代码；最后利用单元测试代码测试目标页面组件，获取单元测试结果。本申请中的技术方案，可实现自动化生成页面元素事件的单元测试代码，开发人员不再需要一个个编写，只需要将插件引入到项目中，可节约人工重复编写测试测试的时间，提高单元测试的效率，并保证单元测试代码的准确性。此外，对于项目需求的变更，只需要重新执行测试案例生成，就可以得到更新，可以做到一次引入，整个项目生命周期内，都可以重复使用，故可提高单元测试的复用率，并且能够将自动化测试代码与项目代码完全分离，不会影响业务代码的执行和可读性，在打包过程中，也不会加入到项目代码中，不会增加包的大小。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

Claims (10)

1.一种页面组件的单元测试方法，其特征在于，包括：

确定待进行单元测试的目标页面组件，所述目标页面组件中至少包含一个页面元素；

获取所述目标页面组件的组件信息，并根据所述组件信息生成所述目标页面组件的配置文件，所述组件信息包括所述目标页面组件包含的页面元素，每个所述页面元素对应的绑定事件，每个所述页面元素对应所述绑定事件下的预期执行结果；

根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码；

利用所述单元测试代码测试所述目标页面组件，获取单元测试结果。

2.根据权利要求1所述的方法，其特征在于，所述单元测试代码包括所述目标页面组件中每个所述页面元素对应的事件单元测试代码；

所述根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码，包括：

对所述目标页面组件进行模拟挂载处理；

基于预设的单元测试工具库，利用所述配置文件生成模拟挂载完成的目标页面组件中每个页面元素对应的事件单元测试代码；

将所述目标页面组件中所有所述页面元素对应的所述事件单元测试代码，作为单元测试代码。

3.根据权利要求2所述的方法，其特征在于，所述对所述目标页面组件进行模拟挂载处理，包括：

获取所述目标页面组件的测试框架项目，并利用import语法将所述目标页面组件以及所述目标页面组件的mount模拟触发函数引入所述测试框架项目，以实现对所述目标页面组件以及所述目标页面组件中所有所述页面元素的模拟挂载处理。

4.根据权利要求2所述的方法，其特征在于，所述绑定事件包括点击事件、改变事件、聚焦事件，所述基于预设的单元测试工具库，利用所述配置文件生成模拟挂载完成的目标页面组件中每个页面元素对应的事件单元测试代码，包括：

模拟触发执行经过模拟挂载的目标页面组件中每个页面元素的绑定事件，并利用关键字提取模拟触发过程中的返回值；

判断所述返回值的数据类型，并根据所述数据类型为每个所述页面元素生成对应的事件单元测试代码。

5.根据权利要求4所述的方法，其特征在于，所述利用所述单元测试代码测试所述目标页面组件，获取单元测试结果，包括：

利用所述事件单元测试代码分别单元测试对应的页面元素；

若确定所述目标页面组件中任一页面元素均通过单元测试，则判定所述目标页面组件的单元测试结果为通过单元测试；

若确定所述目标页面组件中存在至少一页面元素未通过单元测试，则判定所述目标页面组件的单元测试结果为未通过单元测试。

6.根据权利要求5所述的方法，其特征在于，所述利用所述事件单元测试代码分别单元测试对应的页面元素，包括：

执行各个所述页面元素对应的事件单元测试代码，获取测试执行结果；

对比所述页面元素的所述测试执行结果和所述预期执行结果；

若所述测试执行结果与所述页面元素的预期执行结果一致，则判断所述页面元素通过单元测试；

若所述测试执行结果与所述页面元素的预期执行结果不一致，则判断所述页面元素未通过单元测试。

7.根据权利要求3所述的方法，其特征在于，在所述根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码之前，还包括：

获取所述目标页面组件的测试框架项目，检测所述测试框架项目中是否包含预设的单元测试工具库；

若否，则通过命令行工具定位所述测试框架项目的根目录，并在所述根目录下通过输入预设指令安装所述单元测试工具库。

8.一种页面组件的单元测试装置，其特征在于，包括：

确定模块，用于确定待进行单元测试的目标页面组件，所述目标页面组件中至少包含一个页面元素；

第一生成模块，用于获取所述目标页面组件的组件信息，并根据所述组件信息生成所述目标页面组件的配置文件，所述组件信息包括所述目标页面组件包含的页面元素，每个所述页面元素对应的绑定事件，每个所述页面元素对应所述绑定事件下的预期执行结果；

第二生成模块，用于根据所述配置文件以及利用预设的单元测试工具库，生成所述目标页面组件的单元测试代码；

测试模块，用于利用所述单元测试代码测试所述目标页面组件，获取单元测试结果。

9.一种非易失性可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1至7中任一项所述的页面组件的单元测试方法。

10.一种计算机设备，包括非易失性可读存储介质、处理器及存储在非易失性可读存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7中任一项所述的页面组件的单元测试方法。

Images