CN114297088A - 前端vue框架组件的测试方法、装置、设备及介质 - Google Patents

Abstract

本申请涉及自动化测试技术领域，揭露一种前端vue框架组件的测试方法、装置、设备及介质，其中方法包括通过获取配置文件，以获取待测vue组件；创建生命周期函数对应代码块的混合文件，进行试生命周期函数是否执行完成，得到第一测试结果；并测试vue组件的路由跳转，得到第二测试结果；再测试待测vue组件中的展示和隐藏功能，得到第三测试结果；接着测试待测vue组件对应的页面元素，得到第四测试结果；基于第一测试结果、第二测试结果、第三测试结果及第四测试结果，生成待测vue组件的目标测试结果。本申请还涉及区块链技术，目标测试结果存储于区块链中。本申请通过对vue组件各个功能模块进行自动化测试，有利于提高vue组件的测试效率。

Description

前端vue框架组件的测试方法、装置、设备及介质

技术领域

本申请涉及自动化测试技术领域，尤其涉及一种前端vue框架组件的测试方法、装置、设备及介质。

背景技术

目前前端vue框架已经升级到最新的3.0及以上版本，vue3全新的组合式API的语法，与上一代option api语法有着很大的不同。相比与前一代版本，vue3有着更小、更快、更简洁代码结构的特点，这使得越来越多的新项目开始基于vue3框架进行开发。对于大型项目来说，随着项目的初次上线后，如果需要持续开发维护新功能，那么项目的自动化测试是必不可少的一部分，只有加入了自动化测试，才能在新功能添加或旧功能改造的时候，及时发现新的改动对于现有功能的影响。否则，对于大型项目来说，动辄几十上百个页面，测试人员回归测试中，需要耗费大量人力去覆盖验证新功能和原有功能。

现有对前端vue框架组件的自动化测试在有业务逻辑代码变更后，过往编写的这部分功能的自动化测试代码需要做出调整，才能够正常使用，并且如果框架升级或自动化测试代码库有新语法更新，需要重新编写才能够使用，从而使得测试效率较低。现亟需一种能够提高前端vue框架组件测试效率的方法。

发明内容

本申请实施例的目的在于提出一种前端vue框架组件的测试方法、装置、设备及介质，以提高前端vue框架组件测试的效率。

为了解决上述技术问题，本申请实施例提供一种前端vue框架组件的测试方法，包括：

获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件；

获取预先创建的生命周期函数所对应代码块的混合文件，并基于所述混合文件执行待测vue组件中待测生命周期函数，以及判断所述待测生命周期函数是否执行完成，得到第一测试结果；

获取所述待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断所述模拟跳转地址与所述目标跳转地址是否一致，得到第二测试结果；

若检测到所述待测vue组件中存在按条件展示的场景，则获取所述场景对应的属性变量值，并通过测试所述属性变量值的变化情况，以测试所述场景对应模板中片段的展示和隐藏功能，得到第三测试结果；

根据预设方式，获取所述待测vue组件中的变量，以及通过模拟所述变量的变化，对所述待测vue组件的页面元素进行测试，得到第四测试结果；

基于所述第一测试结果、所述第二测试结果、所述第三测试结果以及所述第四测试结果，生成所述待测vue组件的目标测试结果。

为了解决上述技术问题，本申请实施例提供一种前端vue框架组件的测试装置，包括：

待测组件获取模块，用于获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件；

第一测试结果生成模块，用于获取预先创建的生命周期函数所对应代码块的混合文件，并基于所述混合文件执行待测vue组件中待测生命周期函数，以及判断所述待测生命周期函数是否执行完成，得到第一测试结果；

第二测试结果生成模块，用于获取所述待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断所述模拟跳转地址与所述目标跳转地址是否一致，得到第二测试结果；

第三测试结果生成模块，用于若检测到所述待测vue组件中存在按条件展示的场景，则获取所述场景对应的属性变量值，并通过测试所述属性变量值的变化情况，以测试所述场景对应模板中片段的展示和隐藏功能，得到第三测试结果；

第四测试结果生成模块，用于根据预设方式，获取所述待测vue组件中的变量，以及通过模拟所述变量的变化，对所述待测vue组件的页面元素进行测试，得到第四测试结果；

目标测试结果生成模块，用于基于所述第一测试结果、所述第二测试结果、所述第三测试结果以及所述第四测试结果，生成所述待测vue组件的目标测试结果。

为解决上述技术问题，本发明采用的一个技术方案是：提供一种计算机设备，包括，一个或多个处理器；存储器，用于存储一个或多个程序，使得一个或多个处理器实现上述任意一项所述的前端vue框架组件的测试方法。

为解决上述技术问题，本发明采用的一个技术方案是：一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的前端vue框架组件的测试方法。

本发明实施例提供了一种前端vue框架组件的测试方法、装置、设备及介质，通过获取配置文件，从配置文件中获取待测vue文件，并获取待测vue文件对应的组件，得到待测vue组件；创建生命周期函数对应代码块的混合文件，进行试生命周期函数是否执行完成，得到第一测试结果；获取待测vue组件的当前组件地址，并基于当前组件地址，通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断模拟跳转地址与目标跳转地址是否一致，得到第二测试结果；若检测到待测vue组件中存在按条件展示的场景，则获取场景对应的属性变量值，通过测试属性变量值的变化情况，以测试场景对应模板中片段的展示和隐藏功能，得到第三测试结果；通过插值表达式的方式，获取待测vue组件中的变量，以及模拟变量的变化，并判断待测vue组件对应的元素是否改变，以对待测vue组件的页面元素进行测试，得到第四测试结果；基于第一测试结果、第二测试结果、第三测试结果以及第四测试结果，生成待测vue组件的目标测试结果，实现对vue组件各个模块进行自动化测试，同时由于本发明实施例是基于配置文件生成对应的vue组件测试方法，所以在业务逻辑发生变化的时候，无需重新编写测试代码，实现基于业务逻辑变化，自动化生成测试代码，从而有利于提高vue组件的测试效率。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1根据本申请实施例提供的前端vue框架组件的测试方法的一实现流程图；

图2是本申请实施例提供的前端vue框架组件的测试方法中子流程的一实现流程图；

图3是本申请实施例提供的前端vue框架组件的测试方法中子流程的又一实现流程图；

图4是本申请实施例提供的前端vue框架组件的测试方法中子流程的又一实现流程图；

图5是本申请实施例提供的前端vue框架组件的测试方法中子流程的又一实现流程图；

图6是本申请实施例提供的前端vue框架组件的测试方法中子流程的又一实现流程图；

图7是本申请实施例提供的前端vue框架组件的测试方法中子流程的又一实现流程图；

图8是本申请实施例提供的前端vue框架组件的测试装置示意图；

图9是本申请实施例提供的计算机设备的示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

下面结合附图和实施方式对本发明进行详细说明。

需要说明的是，本申请实施例所提供的前端vue框架组件的测试方法一般由服务器执行，相应地，前端vue框架组件的测试装置一般配置于服务器中。

请参阅图1，图1示出了前端vue框架组件的测试方法的一种具体实施方式。

需注意的是，若有实质上相同的结果，本发明的方法并不以图1所示的流程顺序为限，该方法包括如下步骤：

S1：获取配置文件，从配置文件中获取待测vue文件，并获取待测vue文件对应的组件，得到待测vue组件。

在本申请实施例中，为了更清楚的理解技术方案，下面对本申请所涉及的终端进行详细介绍。

一是服务器，服务器能够接收来自用户端所编写的配置文件，并解析配置文件，以获取待测vue组件，以及对待测vue组件进行各个功能模块进行测试，生成目标测试结果；服务器可以将目标测试结果返回用户端。

二是用户端，用户端编写配置文件，并将配置文件发送到服务器；用户端也可以接收服务器所返回的目标测试结果。

具体的，配置文件可以是config.json文件，用户可以将需要进行待测试的vue组件的地址编写在配置文件中。根据配置文件中的地址能够查找到目标vue组件的项目的所有文件。

请参阅图2，图2示出了步骤S1的一种具体实施方式，详叙如下：

S11：获取配置文件，其中，配置文件至少包括待测vue组件的目标地址。

S12：根据目标地址查找待测vue组件对应的文件。

S13：执行预先配置的输入命令，从目标vue组件对应的文件中获取待测vue组件。

具体的，用户将待测vue组件对应的目标地址写入配置文件中，服务器通过解析配置文件，获取到目标地址；再基于目标地址查找待测vue组件对应的所有文件。然后通过输入命令，获取到待测vue组件。其中，预先配置的输入命令是通过输入语法对应的命令，其目的为了引入需要测试的组件，例如import组件from‘../组件’。

本实施例中，通过获取配置文件，并根据目标地址查找待测vue组件对应文件，然后执行预先配置的输入命令，从目标vue组件对应的文件中获取待测vue组件，实现获取到待测vue组件，便于后续对待测vue组件进行自动化测试。

请参阅图3，图3示出了步骤S1之前的一种具体实施方式，详叙如下：

S1A：判断vue组件对应的项目文件中是否包含目标开源库，目标开源库为用于支撑vue组件的自动化测试的开源库。

S1B：若vue组件对应的项目文件中未包含目标开源库，则执行安装并配置目标开源库的命令，以配置目标开源库。

S1C：通过执行预设配置的全局配置文件，以及在全局配置文件中预先设置测试代码vue文件地址，生成相同的文件目录，其中，文件目录用于存放生成的测试代码文件。

具体的，在可选的实施例中，目标开源库可以是test-utils开源库，进行待测vue组件的自动化测试需要依赖这个开源库。通过执行添加命令，将目标开源库配置添加到项目中开发环境中，由于目标开源库不会与最终打包上线代码一起，避免造成资源包大小增加。同时，在配置文件package.json中的脚本对象内，添加一条快捷启动自动化测试命令，用来方便开发者直接通过启动自动化测试。在安装目标开源库和配置自动化测试命令后，生成一个自动测试文件作为全局配置设置，然后会在vue项目的根目录，生成一个名为编码code的根文件夹；在文件夹内，根据配置文件中，设置的需要生成自动化测试代码vue文件地址，生成相同的文件目录；该文件目标在后续流程中，生成的自动化测试代码文件，会放入对应的文件目录中。

在进行vue组件测试之前，判断目标vue组件是否已具备进行测试的支撑条件(即是否包含目标开源库)，并在待测vue组件未具备支撑条件时，执行用于安装并配置目标开源库的命令，从而能够保证待测vue组件的测试顺利执行，提高对vue组件测试的可靠性。

S2：获取预先创建的生命周期函数所对应代码块的混合文件，并基于混合文件执行待测vue组件中待测生命周期函数，以及判断待测生命周期函数是否执行完成，得到第一测试结果。

具体的，混合文件是指mixins文件，该mixins是vue中提供的一种混合机制，用于更高效地实现vue组件内容的复用。通过将共用的代码存储在混合文件中，可以实现在各个vue组件中共用代码。在进行针对vue组件的生命周期函数测试时，运行本发明实施例中的vue组件的测试方法，自动向vue组件对应的代码插入测试的代码，并自动利用所插入的测试代码完成vue组件的生命周期函数测试(即为每个生命周期函数设置对应的变量，在该生命周期函数成功执行之后，将该生命周期函数对应的变量翻转，最后通过查询该生命周期函数对应的变量来判断该生命周期函数是否已被成功执行，从而判断出该生命周期函数是否正常运行)。

请参阅图4，图4示出了步骤S2的一种具体实施方式，详叙如下：

S21：创建包含有第一代码块和第二代码块的混合文件。

S22：向待测vue组件对应的待测试文件插入混合文件，从混合文件中获取待测试文件中待测试生命周期函数对应的第一代码块和第二代码块，并将待测试生命周期函数对应的第一代码块作为目标代码块，其中，每个目标代码块用于执行该目标代码块对应的待测试生命周期函数。

S23：通过执行目标代码块，执行待测vue组件中的待测生命周期函数，得到执行结果。

S24：若执行结果为待测生命周期函数执行完成，则第一测试结果为待测vue组件的生命周期函数无异常，否则，第一测试结果为待测vue组件的生命周期函数出现异常。

具体的，第一代码块用于为至少一个生命周期函数创建各自对应的执行状态变量，每个执行状态变量用于表示该执行状态变量对应的生命周期函数已成功执行或者未成功执行，第二代码块用于在每个生命周期函数成功执行之后，将生命周期函数对应的执行状态变量设置为用于表示该生命周期函数已成功执行。

本申请针对的是vue3.0版本的框架，vue3.0的生命周期函数为6个生命周期函数，分别为onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted。由于生命周期函数的执行，属于vue内部底层逻辑，并不属于用户手动触发事件，生命周期函数的正常执行完成即可以代表无异常发生。在自动化测试中，首先，需要通过在各个生命周期函数内部执行代码的外层，增加语法包裹，在截住代码块中，增加自动化异常抛出代码(即第一代码块)；然后向待测vue组件对应的待测试文件插入混合文件，获取待测试文件中待测试生命周期函数对应的目标代码块，每个目标代码块用于执行该目标代码块对应的待测试生命周期函数。在目标代码块执行待测试生命周期函数时，保证在自动化测试过程中，如果有异常发生，可以直接终止自动化测试，并将异常信息返回。同时需要在生命周期函数执行代码的尾部，增加一行代码(即第二代码块)，以通知该生命周期函数自动化测试结束，且无异常发生。在自动化测试结束前，会重新遍历vue组件中，因自动化测试需要，增加的代码，将其进行删除，不带上生产环境。

本实施例中，通过创建包含有第一代码块和第二代码块的混合文件，并获取目标代码块，以对待测试生命周期函数进行测试。通过待测生命周期函数执行完成与否，判断待测生命周期函数是否发生异常，实现对vue组件的自动化测试，有利于提高vue组件测试的效率。

S3：获取待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断模拟跳转地址与目标跳转地址是否一致，得到第二测试结果。

具体的，通过获取待测vue组件的当前组件地址，并获取待测vue组件最终的目标跳转地址和模拟跳转地址，再判断模拟跳转地址与目标跳转地址是否一致，得到第二测试结果。

请参阅图5，图5示出了步骤S3的一种具体实施方式，详叙如下：

S31：通过执行输入命令，获取待测vue组件对应的模拟触发函数。

S32：基于路由关键字，从待测vue组件中获取路由跳转代码，并从路由跳转代码中截取跳转的页面链接。

S33：根据页面链接，从待测vue组件的所在文件目录结构中，获取当前组件地址。

S34：基于当前组件地址，通过模拟触发函数模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址。

S35：若模拟跳转地址与目标跳转地址一致，则第二测试结果为页面路由跳转正常，否则，第二测试结果为页面路由跳转异常。

具体的，通过执行输入语法，引入vue组件挂载完成事件模拟触发函数，也即执行输入命令，获取模拟触发函数。其中，路由关键字包括router.push(XXX)、router.replace(XXX)关键字，通过该路由关键字，获取到路由跳转的代码，进一步在router.push(XXX)、router.replace(XXX)括号内，截取到跳转的页面链接。通过当前vue组件所在文件目录结构，获取到当前组件地址。通过生成语法初始化获取当前组件路由；然后在通过模拟触发函数模拟路由跳转事件触发：获取到模拟跳转地址和目标跳转地址，若所述模拟跳转地址与所述目标跳转地址一致，则所述第二测试结果为页面路由跳转正常，否则，所述第二测试结果为页面路由跳转异常。

本实施例中，通过模拟触发函数模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，并判断模拟跳转地址与目标跳转地址是否一致，以实现对待测vue组件的路由跳转进行自动化测试，从而有利于提高vue组件的测试效率。

S4：若检测到待测vue组件中存在按条件展示的场景，则获取场景对应的属性变量值，并通过测试属性变量值的变化情况，以测试场景对应模板中片段的展示和隐藏功能，得到第三测试结果。

具体的，通过检测待测vue组件的模板中是否存在展示属性关键字和隐藏属性关键字，判断检测到待测vue组件中是否存在按条件展示的场景。若存在展示属性关键字和隐藏属性关键字，则待测vue组件中存在按条件展示的场景，所以需要对待测vue组件中的展示和隐藏功能进行测试。通过获取场景对应的属性变量值，并通过测试属性变量值的变化情况，以测试场景对应模板中片段的展示和隐藏功能，得到第三测试结果。

请参阅图6，图6示出了步骤S4的一种具体实施方式，详叙如下：

S41：若检测到待测vue组件的模板中存在展示属性关键字和隐藏属性关键字，则待测vue组件中存在按条件展示的场景。

S42：获取待测vue组件所在模板中的身份标识符或者类标识符，作为查找选择器。

S43：通过查找选择器获取展示属性对应的变量值以及隐藏属性对应的变量值，作为属性变量值。

S44：通过模拟属性变量值进行触发，以判断展示属性和隐藏属性是否发生变化，得到第三测试结果。

S45：若展示属性和隐藏属性发生变化，则第三测试结果为场景对应模板中片段的展示和隐藏功能无异常，否则，则第三测试结果为场景对应模板中片段的展示和隐藏功能发生异常。

具体的，展示属性关键字和隐藏属性关键字分别为隐藏hide和展示show，若检索待测vue组件的模板中存在展示属性关键字和隐藏属性关键字，则判断出待测vue组件中存在按条件展示的场景如果存在；需要获取当前模板中的身份标识符或者类标识符(id或class标识)，作为后续查找的选择器。通过获取到隐藏hide和展示show两种属性中对应的变量值，通过模拟触发变量值，然后通过生成对应模板代码来测试，当变量变化时，模板的隐藏和展示是否跟随变化，若跟随则变化，则第三测试结果为场景对应模板中片段的展示和隐藏功能无异常，否则，则第三测试结果为场景对应模板中片段的展示和隐藏功能发生异常。

本实施中，通过检测待测vue组件中是否存在按条件展示的场景，若存在，通过获取隐藏hide和展示show对应的属性值，并通过模拟触发的形式，判断场景对应模板中片段的展示和隐藏功能无异常，从而实现对待测vue组件模板中片段的展示和隐藏自动化测试，从而有利于提高vue组件的测试效率。

S5：根据预设方式，获取待测vue组件中的变量，以及通过模拟变量的变化，以对待测vue组件的页面元素进行测试，得到第四测试结果。

具体的，待测vue组件中存在动态变量，通过模拟动态变量的变化，是否引起待测vue组件的页面元素是否发生改变，从而得到第四测试结果。

请参阅图7，图7示出了步骤S5的一种具体实施方式，详叙如下：

S51：根据预设方式，获取待测vue组件中的变量。

S52：根据执行生成函数触发变量的变化，以判断待测vue组件对应的页面元素是否改变，得到第四测试结果。

S53：若待测vue组件的页面元素发生改变，则第四测试结果为待测vue组件的页面元素无异常，否则，第四测试结果为待测vue组件的页面元素发生异常。

具体的，由于待测vue组件的页面模板中存在一些动态参数，是通过变量的形式存在的，当变量改变时，会自动在页面模板上体现。通过搜索插值表达式关键字{{XXX}}，其中XXX是变量的名称。以此来获取到变量的名称。通过模拟获取到变量的变化，然后通过生成代码进行测试，当变量变化时，是否页面上相应的元素是否改变，若当变量变化时，对应的页面元素发生改变，则第四测试结果无异常，否则第四测试结果发生异常。

本实施例中，预设方式为插值表达式的方式。通过插值表达式的方式，获取待测vue组件中的变量，以及通过模拟变量的变化，以实现对待测vue组件的页面元素进行测试，从而有利于提高vue组件的测试效率。

S6：基于第一测试结果、第二测试结果、第三测试结果以及第四测试结果，生成待测vue组件的目标测试结果。

具体的，第一测试结果是测试vue组件的生命周期函数的自动化测试，第二测试结果是对页面路由跳转自动化测试，第三测试结果是模板中片段的展示和隐藏自动化测试，第四测试结果是对模板的中页面元素的自动化测试，基于以上四种测试结果，得到最终的待测vue组件的目标测试结果。需要说明的是，以上第一、二、三、四测试结果之间异常与否，并不影响其他测试结果。

需要说明的是，上述前端Vue框架组件的测试方法可以封装成一个软件工具。可以在命令行中定位目标vue组件所在项目的根目录，然后执行添加命令，将该软件工具添加至vue组件所在项目中，并且默认在vue组件所在的项目中自动加入并下载必须的依赖文件。由用户编写设置配置文件config.json。配置内容为：(1)项目根目录地址(2)需要生成自动化测试代码vue文件的地址，如果未配置则默认检索项目中，所有.vue结尾的文件。然后项目构建，在命令行(mac系统为终端)，定位vue项目根目录，执行命令构建命令，执行过程中，会涉及到以下核心原理的调用顺序执行。执行完成后，会自动生成好对应vue文件自动化测试代码。

本实施例中，通过获取配置文件，从配置文件中获取待测vue文件，并获取待测vue文件对应的组件，得到待测vue组件；创建生命周期函数对应代码块的混合文件，进行试生命周期函数是否执行完成，得到第一测试结果；获取待测vue组件的当前组件地址，并基于当前组件地址，通过生成语法模拟路由跳转事件触发，得到模拟跳转地址以及目标跳转地址，以及判断模拟跳转地址与目标跳转地址是否一致，得到第二测试结果；若检测到待测vue组件中存在按条件展示的场景，则获取场景对应的属性变量值，通过测试属性变量值的变化情况，以测试场景对应模板中片段的展示和隐藏功能，得到第三测试结果；通过插值表达式的方式，获取待测vue组件中的变量，以及模拟变量的变化，并判断待测vue组件对应的元素是否改变，以对待测vue组件的页面元素进行测试，得到第四测试结果；基于第一测试结果、第二测试结果、第三测试结果以及第四测试结果，生成待测vue组件的目标测试结果，实现对vue组件各个模块进行自动化测试，同时由于本发明实施例是基于配置文件生成对应的vue组件测试方法，所以在业务逻辑发生变化的时候，无需重新编写测试代码，实现基于业务逻辑变化，自动化生成测试代码，从而有利于提高vue组件的测试效率。

需要强调的是，为进一步保证上述目标测试结果的私密和安全性，上述目标测试结果还可以存储于一区块链的节点中。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

请参考图8，作为对上述图1所示方法的实现，本申请提供了一种前端vue框架组件的测试装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图8所示，本实施例的前端vue框架组件的测试装置包括：待测组件获取模块71、第一测试结果生成模块72、第二测试结果生成模块73、第三测试结果生成模块74、第四测试结果生成模块75及目标测试结果生成模块76，其中：

待测组件获取模块71，用于获取配置文件，从配置文件中获取待测vue文件，并获取待测vue文件对应的组件，得到待测vue组件；

第一测试结果生成模块72，用于获取预先创建的生命周期函数所对应代码块的混合文件，并基于混合文件执行待测vue组件中待测生命周期函数，以及判断待测生命周期函数是否执行完成，得到第一测试结果；

第二测试结果生成模块73，用于获取待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断模拟跳转地址与目标跳转地址是否一致，得到第二测试结果；

第三测试结果生成模块74，用于若检测到待测vue组件中存在按条件展示的场景，则获取场景对应的属性变量值，并通过测试属性变量值的变化情况，以测试场景对应模板中片段的展示和隐藏功能，得到第三测试结果；

第四测试结果生成模块75，用于根据预设方式，获取待测vue组件中的变量，以及通过模拟变量的变化，对待测vue组件的页面元素进行测试，得到第四测试结果；

目标测试结果生成模块76，用于基于第一测试结果、第二测试结果、第三测试结果以及第四测试结果，生成待测vue组件的目标测试结果。

进一步的，待测组件获取模块71包括：

配置文件获取单元，用于获取配置文件，其中，配置文件至少包括待测vue组件的目标地址；

文件查找单元，用于根据目标地址查找待测vue组件对应的文件；

输入命令执行单元，用于执行预先配置的输入命令，从目标vue组件对应的文件中获取待测vue组件。

进一步的，在待测组件获取模块71之前还包括：

目标开源库判断模块，用于判断vue组件对应的项目文件中是否包含目标开源库，目标开源库为用于支撑vue组件的自动化测试的开源库；

目标开源库配置模块，用于若vue组件对应的项目文件中未包含目标开源库，则执行安装并配置目标开源库的命令，以配置目标开源库；

文件目录生成模块，用于通过执行预设配置的全局配置文件，以及在全局配置文件中预先设置测试代码vue文件地址，生成相同的文件目录，其中，文件目录用于存放生成的测试代码文件。

进一步的，第一测试结果生成模块72包括：

混合文件创建单元，用于创建包含有第一代码块和第二代码块的混合文件；

混合文件插入单元，用于向待测vue组件对应的待测试文件插入混合文件，从混合文件中获取待测试文件中待测试生命周期函数对应的第一代码块和第二代码块，并将待测试生命周期函数对应的第一代码块作为目标代码块，其中，每个目标代码块用于执行该目标代码块对应的待测试生命周期函数；

执行结果生成单元，用于通过执行目标代码块，执行待测vue组件中的待测生命周期函数，得到执行结果；

执行结果判断单元，用于若执行结果为待测生命周期函数执行完成，则第一测试结果为待测vue组件的生命周期函数无异常，否则，第一测试结果为待测vue组件的生命周期函数出现异常。

进一步的，第二测试结果生成模块73包括：

模拟触发函数获取单元，用于通过执行输入命令，获取待测vue组件对应的模拟触发函数；

页面链接获取单元，用于基于路由关键字，从待测vue组件中获取路由跳转代码，并从路由跳转代码中截取跳转的页面链接；

当前组件地址获取单元，用于根据页面链接，从待测vue组件的所在文件目录结构中，获取当前组件地址；

路由跳转事件触发单元，用于基于当前组件地址，通过模拟触发函数模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址；

第二测试结果判断单元，用于若模拟跳转地址与目标跳转地址一致，则第二测试结果为页面路由跳转正常，否则，第二测试结果为页面路由跳转异常。

进一步的，第三测试结果生成模块74包括：

场景存在检测单元，用于若检测到待测vue组件的模板中存在展示属性关键字和隐藏属性关键字，则待测vue组件中存在按条件展示的场景；

查找选择器获取单元，用于获取待测vue组件所在模板中的身份标识符或者类标识符，作为查找选择器；

变量值获取单元，用于通过查找选择器获取展示属性对应的变量值以及隐藏属性对应的变量值，作为属性变量值；

属性变量值触发单元，用于通过模拟属性变量值进行触发，以判断展示属性和隐藏属性是否发生变化，得到第三测试结果；

第三测试单元判断单元，用于若展示属性和隐藏属性发生变化，则第三测试结果为场景对应模板中片段的展示和隐藏功能无异常，否则，则第三测试结果为场景对应模板中片段的展示和隐藏功能发生异常。

进一步的，第四测试结果生成模块75包括：

变量获取单元，用于根据预设方式，获取待测vue组件中的变量；

变量触发单元，用于根据执行生成函数触发变量的变化，以判断待测vue组件对应的页面元素是否改变，得到第四测试结果；

页面元素测试单元，用于若待测vue组件的页面元素发生改变，则第四测试结果为待测vue组件的页面元素无异常，否则，第四测试结果为待测vue组件的页面元素发生异常。

需要强调的是，为进一步保证上述目标测试结果的私密和安全性，上述目标测试结果还可以存储于一区块链的节点中。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图9，图9为本实施例计算机设备基本结构框图。

计算机设备8包括通过系统总线相互通信连接存储器81、处理器82、网络接口83。需要指出的是，图中仅示出了具有三种组件存储器81、处理器82、网络接口83的计算机设备8，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程门阵列(Field －Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

存储器81至少包括一种类型的可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器81可以是计算机设备8的内部存储单元，例如该计算机设备8的硬盘或内存。在另一些实施例中，存储器81也可以是计算机设备8的外部存储设备，例如该计算机设备8上配备的插接式硬盘，智能存储卡(SmartMedia Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器81还可以既包括计算机设备8的内部存储单元也包括其外部存储设备。本实施例中，存储器81通常用于存储安装于计算机设备8的操作系统和各类应用软件，例如前端vue框架组件的测试方法的程序代码等。此外，存储器81还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器82在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器82通常用于控制计算机设备8的总体操作。本实施例中，处理器82用于运行存储器81中存储的程序代码或者处理数据，例如运行上述前端vue框架组件的测试方法的程序代码，以实现前端vue框架组件的测试方法的各种实施例。

网络接口83可包括无线网络接口或有线网络接口，该网络接口83通常用于在计算机设备8与其他电子设备之间建立通信连接。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序可被至少一个处理器执行，以使至少一个处理器执行如上述的一种前端vue框架组件的测试方法的步骤。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例的方法。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种前端vue框架组件的测试方法，其特征在于，包括：

获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件；

获取预先创建的生命周期函数所对应代码块的混合文件，并基于所述混合文件执行待测vue组件中待测生命周期函数，以及判断所述待测生命周期函数是否执行完成，得到第一测试结果；

获取所述待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断所述模拟跳转地址与所述目标跳转地址是否一致，得到第二测试结果；

若检测到所述待测vue组件中存在按条件展示的场景，则获取所述场景对应的属性变量值，并通过测试所述属性变量值的变化情况，以测试所述场景对应模板中片段的展示和隐藏功能，得到第三测试结果；

根据预设方式，获取所述待测vue组件中的变量，以及通过模拟所述变量的变化，对所述待测vue组件的页面元素进行测试，得到第四测试结果；

基于所述第一测试结果、所述第二测试结果、所述第三测试结果以及所述第四测试结果，生成所述待测vue组件的目标测试结果。

2.根据权利要求1所述的前端vue框架组件的测试方法，其特征在于，所述获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件，包括：

获取所述配置文件，其中，所述配置文件至少包括所述待测vue组件的目标地址；

根据所述目标地址查找所述待测vue组件对应的文件；

执行预先配置的输入命令，从所述目标vue组件对应的文件中获取所述待测vue组件。

3.根据权利要求1所述的前端vue框架组件的测试方法，其特征在于，在所述获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件之前，所述方法还包括：

判断vue组件对应的项目文件中是否包含目标开源库，所述目标开源库为用于支撑所述vue组件的自动化测试的开源库；

若所述vue组件对应的项目文件中未包含所述目标开源库，则执行安装并配置所述目标开源库的命令，以配置所述目标开源库；

通过执行预设配置的全局配置文件，以及在所述全局配置文件中预先设置测试代码vue文件地址，生成相同的文件目录，其中，所述文件目录用于存放生成的测试代码文件。

4.根据权利要求1所述的前端vue框架组件的测试方法，其特征在于，所述获取预先创建的生命周期函数所对应代码块的混合文件，并基于所述混合文件执行待测vue组件中待测生命周期函数，以及判断所述待测生命周期函数是否执行完成，得到第一测试结果，包括：

创建包含有第一代码块和第二代码块的所述混合文件，其中，所述第一代码块用于为至少一个生命周期函数创建各自对应的执行状态变量，每个所述执行状态变量用于表示该执行状态变量对应的生命周期函数已成功执行或者未成功执行，所述第二代码块用于在每个所述生命周期函数成功执行之后，将所述生命周期函数对应的执行状态变量设置为用于表示该生命周期函数已成功执行；

向所述待测vue组件对应的待测试文件插入所述混合文件，从所述混合文件中获取所述待测试文件中待测试生命周期函数对应的第一代码块和第二代码块，并将所述待测试生命周期函数对应的第一代码块作为目标代码块，其中，每个所述目标代码块用于执行该目标代码块对应的待测试生命周期函数；

通过执行所述目标代码块，执行所述待测vue组件中的待测生命周期函数，得到执行结果；

若所述执行结果为所述待测生命周期函数执行完成，则第一测试结果为待测vue组件的生命周期函数无异常，否则，所述第一测试结果为待测vue组件的生命周期函数出现异常。

5.根据权利要求1所述的前端vue框架组件的测试方法，其特征在于，所述获取所述待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断所述模拟跳转地址与所述目标跳转地址是否一致，得到第二测试结果，包括：

通过执行输入命令，获取所述待测vue组件对应的模拟触发函数；

基于路由关键字，从所述待测vue组件中获取路由跳转代码，并从所述路由跳转代码中截取跳转的页面链接；

根据所述页面链接，从所述待测vue组件的所在文件目录结构中，获取所述当前组件地址；

基于所述当前组件地址，通过所述模拟触发函数模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址；

若所述模拟跳转地址与所述目标跳转地址一致，则所述第二测试结果为页面路由跳转正常，否则，所述第二测试结果为页面路由跳转异常。

6.根据权利要求1所述的前端vue框架组件的测试方法，其特征在于，所述若检测到所述待测vue组件中存在按条件展示的场景，则获取所述场景对应的属性变量值，并通过测试所述属性变量值的变化情况，以测试所述场景对应模板中片段的展示和隐藏功能，得到第三测试结果，包括：

若检测到所述待测vue组件的模板中存在展示属性关键字和隐藏属性关键字，则所述待测vue组件中存在按条件展示的场景；

获取所述待测vue组件所在模板中的身份标识符或者类标识符，作为查找选择器；

通过所述查找选择器获取展示属性对应的变量值以及隐藏属性对应的变量值，作为所述属性变量值；

通过模拟所述属性变量值进行触发，以判断所述展示属性和隐藏属性是否发生变化，得到所述第三测试结果；

若所述展示属性和隐藏属性发生变化，则所述第三测试结果为所述场景对应模板中片段的展示和隐藏功能无异常，否则，则所述第三测试结果为所述场景对应模板中片段的展示和隐藏功能发生异常。

7.根据权利要求1至6任一项所述的前端vue框架组件的测试方法，其特征在于，所述根据预设方式，获取所述待测vue组件中的变量，以及通过模拟所述变量的变化，对所述待测vue组件的页面元素进行测试，得到第四测试结果，包括：

根据预设方式，获取所述待测vue组件中的所述变量；

根据执行生成函数触发所述变量的变化，以判断所述待测vue组件对应的页面元素是否改变，得到所述第四测试结果；

若所述待测vue组件的页面元素发生改变，则所述第四测试结果为所述待测vue组件的页面元素无异常，否则，所述第四测试结果为所述待测vue组件的页面元素发生异常。

8.一种前端vue框架组件的测试装置，其特征在于，包括：

待测组件获取模块，用于获取配置文件，从所述配置文件中获取待测vue文件，并获取所述待测vue文件对应的组件，得到待测vue组件；

第一测试结果生成模块，用于获取预先创建的生命周期函数所对应代码块的混合文件，并基于所述混合文件执行待测vue组件中待测生命周期函数，以及判断所述待测生命周期函数是否执行完成，得到第一测试结果；

第二测试结果生成模块，用于获取所述待测vue组件的当前组件地址，并通过模拟路由跳转事件的触发，得到模拟跳转地址以及目标跳转地址，以及判断所述模拟跳转地址与所述目标跳转地址是否一致，得到第二测试结果；

第三测试结果生成模块，用于若检测到所述待测vue组件中存在按条件展示的场景，则获取所述场景对应的属性变量值，并通过测试所述属性变量值的变化情况，以测试所述场景对应模板中片段的展示和隐藏功能，得到第三测试结果；

第四测试结果生成模块，用于根据预设方式，获取所述待测vue组件中的变量，以及通过模拟所述变量的变化，对所述待测vue组件的页面元素进行测试，得到第四测试结果；

目标测试结果生成模块，用于基于所述第一测试结果、所述第二测试结果、所述第三测试结果以及所述第四测试结果，生成所述待测vue组件的目标测试结果。

9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的前端vue框架组件的测试方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的前端vue框架组件的测试方法。

Images