一种测试前端展现与交互逻辑的方法、系统及介质与流程

1.本发明涉及前后端数据校验技术领域，特别是涉及一种测试前端展现与交互逻辑的方法、系统及介质。


背景技术：

2.在现有的开发过程中，通过接口在多个系统之间进行交互是一种常见的开发方式，通过接口实现数据的交互和各个系统或者模块之间逻辑处理。
3.因为接口的便利性，其应用的场景也较为复杂，这就导致在进行前端的数据展现和交互逻辑时较为困难；现有的处理方案一般有两种：一种是通过人工处理前置数据，再通过前端逻辑交互实现数据变动；另一种是通过人工修改相关的数据库表中的数据，进而对前端的数据展现和交互逻辑进行校验。
4.上述的第一种方案在使用时，为了验证一个交互逻辑，需要消耗人工较长的时间进行数据维护，提升了整个测试成本，降低了工作效率；上述第二种方案在使用时，需要频繁修改测试环境数据库，会对其它的逻辑链条造成影响，容易造成数据错乱，降低了工作效率。


技术实现要素：

5.本发明主要解决的是现有的处理方案会消耗人工较长的时间，对其它的逻辑链条造成影响，容易造成数据错乱，进而降低了工作效率的问题。
6.为解决上述问题，本发明采用的一个技术方案是：提供一种测试前端展现与交互逻辑的方法，包括以下步骤：初始化：获取前端的前端展示的第一要素和交互逻辑的第二要素；构建数据：根据所述第一要素和所述第二要素，构建测试数据；测试校验：根据所述测试数据，通过代理工具对所述前端展示和所述交互逻辑执行数据逻辑校验操作；生成测试结果：根据所述数据逻辑校验操作的结果，构建测试结果。
7.作为一种优选的技术方案，所述测试校验的步骤进一步包括：发起请求：根据所述前端展示和所述交互逻辑，执行数据获取操作，得到所述测试数据；数据传输：通过所述代理工具对所述测试数据执行数据发送操作；前端展示校验：根据所述数据发送操作的结果，对所述前端展示执行数据校验操作，得到数据校验结果；交互逻辑校验：根据所述数据发送操作的结果，对所述交互逻辑执行逻辑校验操作，得到逻辑校验结果。
8.作为一种优选的技术方案，所述测试数据包括第一测试数据和第二测试数据；所
述构建数据的步骤进一步包括：根据所述第一要素，构建所述第一测试数据；根据所述第二要素，构建所述第二测试数据。
9.进一步，所述数据传输的步骤进一步包括：获取所述第一测试数据，并通过所述代理工具将所述第一测试数据发送至所述前端展示；获取所述第二测试数据，并通过所述代理工具将所述第二测试数据发送至所述交互逻辑。
10.作为一种优选的技术方案，所述前端展示校验的步骤进一步包括：若所述前端展示接收到所述第一测试数据，则执行所述数据校验操作，得到所述数据校验结果；若所述前端展示未接收到所述第一测试数据，则所述前端展示测试失败，并记录第一失败原因，根据所述第一失败原因生成所述数据校验结果。
11.作为一种优选的技术方案，所述交互逻辑校验的步骤进一步包括：若所述交互逻辑接收到所述第二测试数据，则执行所述逻辑校验操作，得到所述逻辑校验结果；若所述交互逻辑未接收到所述第二测试数据，则所述交互逻辑测试失败，并记录第二失败原因，根据所述第二失败原因生成所述逻辑校验结果。
12.作为一种优选的技术方案，所述发起请求的步骤进一步包括：通过所述前端展示发起第一数据获取请求，得到所述第一测试数据；通过所述交互逻辑发起第二数据获取请求，得到所述第二测试数据。
13.一种测试前端展现与交互逻辑的系统，包括：初始化模块、构建数据模块、测试校验模块和生成测试结果模块；所述初始化模块用于获取前端的前端展示的第一要素和交互逻辑的第二要素；所述构建数据模块用于根据所述第一要素和所述第二要素，构建测试数据；所述测试校验模块用于根据所述测试数据，通过代理工具对所述前端展示和所述交互逻辑执行数据逻辑校验操作；所述生成测试结果模块用于根据所述数据逻辑校验操作的结果，构建测试结果。
14.作为一种优选的技术方案，所述测试校验模块包括发起请求单元、数据传输单元、前端展示校验单元和交互逻辑校验单元；所述发起请求单元用于根据所述前端展示和所述交互逻辑，执行数据获取操作，得到所述测试数据；所述数据传输单元用于通过所述代理工具对所述测试数据执行数据发送操作；所述前端展示校验单元用于根据所述数据发送操作的结果，对所述前端展示执行数据校验操作，得到数据校验结果；所述交互逻辑校验单元用于根据所述数据发送操作的结果，对所述交互逻辑执行逻辑校验操作，得到逻辑校验结果。
15.本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时，实现所述的一种测试前端展现与交互逻辑的方法
的步骤。
16.本发明的有益效果是：1、本发明所述的测试前端展现与交互逻辑的方法，可以实现根据前端的展现要素和逻辑处理要素构建测试数据，再通过测试数据对前端进行测试，大幅提高对前端展现和交互逻辑的测试工作效率；2、本发明所述的测试前端展现与交互逻辑的系统，可以实现统一构建对前端展示和交互逻辑进行测试的测试数据，无需对数据进行频繁操作，节约了测试时间，提高了工作效率；3、本发明所述的测试前端展现与交互逻辑的介质，可以实现通过构建的测试数据，可以及时发现前端展示和交互逻辑处理中的问题，提升测试的准确性。
附图说明
17.为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
18.图1是本发明实施例1所述的测试前端展现与交互逻辑的方法的流程图；图2是本发明实施例1所述的测试前端展现与交互逻辑的方法的测试校验步骤的流程图；图3是本发明实施例2所述的测试前端展现与交互逻辑的系统的示意图；图4是本发明实施例2所述的测试前端展现与交互逻辑的系统的测试校验模块的示意图。
具体实施方式
19.下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
20.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，“前端”、“前端展示”、“第一要素”、“交互逻辑”、“第二要素”、“测试数据”、“代理工具”、“数据逻辑校验操作”、“测试结果”、“数据获取操作”、“数据发送操作”、“数据校验操作”、“数据校验结果”、“逻辑校验操作”、“逻辑校验结果”、“第一测试数据”、“第二测试数据”、“第一失败原因”、“第二失败原因”、“第一数据获取请求”、“第二数据获取请求”、“初始化模块”、“构建数据模块”、“测试校验模块”、“生成测试结果模块”、“发起请求单元”、“数据传输单元”、“前端展示校验单元”、“交互逻辑校验单元”等术语应做广义理解。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
21.此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。
22.实施例1
本发明实施例提供一种测试前端展现与交互逻辑的方法，请参阅图1和图2，包括以下步骤：s100、初始化：前端展示页面开发完成，需要对前端的前端展示和交互逻辑处理进行测试时，获取前端的前端展示的第一要素和前端的交互逻辑的第二要素；第一要素即前端需要展示的数据信息，第二要素即前端需要进行逻辑处理的数据信息。
23.为了更清楚地解释本发明，此处以模拟欧洲杯夺冠之路为例进行举例说明，前端的前端展示的第一要素信息为各个参赛球队的信息，前端的交互逻辑的第二要素为各个参赛球队之间相互对战比赛的球队以及对战比赛后的结果。
24.s200、构建数据：根据第一要素构建第一测试数据，根据第二要素构建第二测试数据；此处在构建测试数据时，可以自行根据前端处理设定测试数据，也可以参考过往的测试数据设定测试数据；第一测试数据和第二测试数据设置完成，需要人工对数据进行校验，该数据需要符合前端页面的处理逻辑；数据校验完成，将第一数据和第二数据记录进一个json文件中，便于对前端发起请求是响应。
25.为了更清楚地解释本发明，此处延续s100初始化步骤中的举例进行说明，设定第一测试数据，即欧洲杯参赛的16强队伍为威尔士、丹麦、荷兰、捷克、英格兰、德国、瑞典、乌克兰、意大利、奥地利、比利时、葡萄牙、克罗地亚、西班牙、法国和瑞士，设定第二测试数据，即欧洲杯参赛队伍的对战分组为威尔士对丹麦、荷兰对捷克、英格兰对德国、瑞典对乌克兰、意大利对奥地利、比利时对葡萄牙、克罗地亚对西班牙、法国对瑞士；设定16进8时，胜利的队伍分别是丹麦、捷克、英格兰、乌克兰、意大利、比利时、西班牙和瑞士，即在8强时，第一测试数据为丹麦、捷克、英格兰、乌克兰、意大利、比利时、西班牙和瑞士，第二测试数据为丹麦对捷克、英格兰对乌克兰、意大利对比利时、西班牙对瑞士；设定8进4时，胜利的队伍分别是丹麦、英格兰、意大利和西班牙，即4强时，第一测试数据为丹麦、英格兰、意大利和西班牙，第二测试数据为丹麦对英格兰、意大利对西班牙；设定4进2时，胜利的队伍分别是英格兰和意大利，即在冠亚军争夺时，第一数据为英格兰和意大利，第二数据为英格兰对意大利；设定为完成后，人工对设定的数据进行校验，防止出现一个队伍对战两次等不合理情况。
26.s300、测试校验：s301、发起请求：通过前端页面的前端展示发起第一数据获取请求，通过前端页面的交互逻辑发起第二数据获取请求，即开启测试时，刷新或者加载该前端页面，前端页面会向后台发起数据获取请求，进而对前端页面进行展示。
27.为了更清楚地解释本发明，此处延续s200构建数据步骤中的举例进行说明，当需要查看16强队伍的前端展示时和对战情况时，刷新16强前端展示样图，那么前端会向后台发起数据获取请求，需要获取16强前端展示样图中的第一测试数据和第二测试数据；当需要查看8强队伍的前端展示和对战情况时，属性8强前端展示样图，那么前端会向后台发起数据获取请求。
28.s302、数据传输：
获取第一测试数据，并通过代理工具将第一测试数据发送至前端的前端展示；获取第二测试数据，并通过代理工具将第二测试数据发送至前端的交互逻辑。
29.其中，代理工具可以是charles、fillder等代理工具，主要是使用到代理工具中的maplocal进行数据的传输。
30.为了更清楚地解释本发明，此处延续s301发起请求步骤中的举例进行说明，查看16强队伍的前端展示和对战情况时，获取到第一测试数据和第二测试数据，即16强的参赛队伍和16支队伍之间的对战情况，通过maplocal获取第一测试数据所在的文件和第二测试数据所在的文件，并将文件发送至前端，前端在对数据进行解析后，展现在前端界面上。
31.s303、前端展示校验：对前端的前端展示是否接收到第一测试数据进行判断：若前端的前端展示接收到了第一测试数据，则解析第一测试数据，并进行前端展示校验，得到数据校验结果；若前端的前端展示未接收到第一测试数据，则说明第一测试数据发送失败，即前端展示测试失败，记录第一失败原因，并根据第一失败原因生成数据校验结果。
32.为了更清楚地解释本发明，此处延续s302数据传输步骤中的举例进行说明，若欧洲杯16强的队伍信息发送后，16强前端展示样图中可以获取到对应的16强队伍的数据，那么将对应的队伍的数据进行展示，得到数据校验结果为16强前端展示样图测试成功；若16强前端展示样图未获取到对应的16强队伍的数据或者16强队伍的数据解析失败，那么说明16强前端展示样图的测试失败，第一失败原因为数据未获取成功或者数据解析失败，生成数据校验结果为16强前端展示样图测试失败，失败原因为数据未获取成功或者数据解析失败。
33.s304、交互逻辑校验：对前端的交互逻辑是否接收到第二测试数据进行判断：若前端的交互逻辑接收到了第二测试数据，则解析第二测试数据，并对解析后的第二测试数据进行交互逻辑处理，得到逻辑校验结果；若前端的交互逻辑未接收到第二测试数据，则说明第二测试数据发送失败，即交互逻辑测试失败，记录第二失败原因，并根据第二失败原因生成逻辑校验结果。
34.为了更清楚地解释本发明，此处延续s303前端展示校验步骤中的举例进行说明，若欧洲杯16强队伍的对战信息发送后，16强前端展示样图中可以获取到对应的对战信息，那么将对应的对战信息进行展示，得到逻辑校验结果为16强前端展示样图交互逻辑测试成功；若16强前端展示样图未获取到对应的16强队伍的对战信息，那么说明16强前端展示样图的交互逻辑测试失败，第二失败原因为数据为获取成功或者数据解析失败等，生成逻辑校验结果为16强前端展示样图的交互逻辑测试失败，失败原因为对战数据未获取成功或者数据解析失败。
35.s400、生成测试结果：根据数据校验结果和逻辑校验结果，生成最终的测试结果，并将最终的测试结果进行电子化保存，便于后续对测试流程的追踪和对测试数据的分析。
36.需要说明的是，上述的举例仅仅是为了解释本发明的执行过程，并不能因此限定本发明的保护范围。
37.实施例2本发明实施例提供一种测试前端展现与交互逻辑的系统，请参阅图3和图4，包括：初始化模块、构建数据模块、测试校验模块和生成测试结果模块；初始化模块：初始化模块用于获取前端的前端展示的第一要素和交互逻辑的第二要素；具体地，前端展示页面开发完成，需要对前端的前端展示和交互逻辑处理进行测试时，初始化模块获取前端的前端展示的第一要素和前端的交互逻辑的第二要素；第一要素即前端需要展示的数据信息，第二要素即前端需要进行逻辑处理的数据信息。
38.为了更清楚地解释本发明，此处以模拟欧洲杯夺冠之路为例进行举例说明，前端的前端展示的第一要素信息为各个参赛球队的信息，前端的交互逻辑的第二要素为各个参赛球队之间相互对战比赛的球队以及对战比赛后的结果。
39.构建数据模块：构建数据模块用于根据第一要素和第二要素，构建测试数据；具体地，构建数据模块根据第一要素构建第一测试数据，根据第二要素构建第二测试数据；此处在构建测试数据时，可以自行根据前端处理设定测试数据，也可以参考过往的测试数据设定测试数据；第一测试数据和第二测试数据设置完成，需要人工对数据进行校验，该数据需要符合前端页面的处理逻辑；数据校验完成，将第一数据和第二数据记录进一个json文件中，便于对前端发起请求是响应。
40.为了更清楚地解释本发明，此处延续s100初始化步骤中的举例进行说明，设定第一测试数据，即欧洲杯参赛的16强队伍为威尔士、丹麦、荷兰、捷克、英格兰、德国、瑞典、乌克兰、意大利、奥地利、比利时、葡萄牙、克罗地亚、西班牙、法国和瑞士，设定第二测试数据，即欧洲杯参赛队伍的对战分组为威尔士对丹麦、荷兰对捷克、英格兰对德国、瑞典对乌克兰、意大利对奥地利、比利时对葡萄牙、克罗地亚对西班牙、法国对瑞士；设定16进8时，胜利的队伍分别是丹麦、捷克、英格兰、乌克兰、意大利、比利时、西班牙和瑞士，即在8强时，第一测试数据为丹麦、捷克、英格兰、乌克兰、意大利、比利时、西班牙和瑞士，第二测试数据为丹麦对捷克、英格兰对乌克兰、意大利对比利时、西班牙对瑞士；设定8进4时，胜利的队伍分别是丹麦、英格兰、意大利和西班牙，即4强时，第一测试数据为丹麦、英格兰、意大利和西班牙，第二测试数据为丹麦对英格兰、意大利对西班牙；设定4进2时，胜利的队伍分别是英格兰和意大利，即在冠亚军争夺时，第一数据为英格兰和意大利，第二数据为英格兰对意大利；设定为完成后，人工对设定的数据进行校验，防止出现一个队伍对战两次等不合理情况。
41.测试校验模块：测试校验模块用于根据测试数据，通过代理工具对前端展示和交互逻辑执行数据逻辑校验操作；测试校验模块包括发起请求单元、数据传输单元、前端展示校验单元和交互逻辑校验单元；发起请求单元：发起请求单元用于根据前端展示和交互逻辑，执行数据获取操作，得到测试数据；具体地，发起请求单元通过前端页面的前端展示发起第一数据获取请求，得到第一测试数据，通过前端页面的交互逻辑发起第二数据获取请求，得到第二测试数据，即开启
测试时，刷新或者加载该前端页面，前端页面会向后台发起数据获取请求，进而对前端页面进行展示。
42.为了更清楚地解释本发明，此处延续s200构建数据步骤中的举例进行说明，当需要查看16强队伍的前端展示时和对战情况时，刷新16强前端展示样图，那么前端会向后台发起数据获取请求，需要获取16强前端展示样图中的第一测试数据和第二测试数据；当需要查看8强队伍的前端展示和对战情况时，属性8强前端展示样图，那么前端会向后台发起数据获取请求。
43.数据传输单元：数据传输单元用于通过代理工具对测试数据执行数据发送操作；具体地，数据传输单元通过代理工具将第一测试数据发送至前端的前端展示；通过代理工具将第二测试数据发送至前端的交互逻辑。
44.其中，代理工具可以是charles、fillder等代理工具，主要是使用到代理工具中的maplocal进行数据的传输。
45.为了更清楚地解释本发明，此处延续s301发起请求步骤中的举例进行说明，查看16强队伍的前端展示和对战情况时，获取到第一测试数据和第二测试数据，即16强的参赛队伍和16支队伍之间的对战情况，通过maplocal获取第一测试数据所在的文件和第二测试数据所在的文件，并将文件发送至前端，前端在对数据进行解析后，展现在前端界面上。
46.前端展示校验单元：前端展示校验单元用于根据数据发送操作的结果，对前端展示执行数据校验操作，得到数据校验结果；具体地，前端展示校验单元对前端的前端展示是否接收到第一测试数据进行判断：若前端的前端展示接收到了第一测试数据，则解析第一测试数据，并进行前端展示校验，得到数据校验结果；若前端的前端展示未接收到第一测试数据，则说明第一测试数据发送失败，即前端展示测试失败，记录第一失败原因，并根据第一失败原因生成数据校验结果。
47.为了更清楚地解释本发明，此处延续s302数据传输步骤中的举例进行说明，若欧洲杯16强的队伍信息发送后，16强前端展示样图中可以获取到对应的16强队伍的数据，那么将对应的队伍的数据进行展示，得到数据校验结果为16强前端展示样图测试成功；若16强前端展示样图未获取到对应的16强队伍的数据或者16强队伍的数据解析失败，那么说明16强前端展示样图的测试失败，第一失败原因为数据未获取成功或者数据解析失败，生成数据校验结果为16强前端展示样图测试失败，失败原因为数据未获取成功或者数据解析失败。
48.交互逻辑校验单元：交互逻辑校验单元用于根据数据发送操作的结果，对交互逻辑执行逻辑校验操作，得到逻辑校验结果；具体地，交互逻辑校验单元对前端的交互逻辑是否接收到第二测试数据进行判断：若前端的交互逻辑接收到了第二测试数据，则解析第二测试数据，并对解析后的
第二测试数据进行交互逻辑处理，得到逻辑校验结果；若前端的交互逻辑未接收到第二测试数据，则说明第二测试数据发送失败，即交互逻辑测试失败，记录第二失败原因，并根据第二失败原因生成逻辑校验结果。
49.为了更清楚地解释本发明，此处延续s303前端展示校验步骤中的举例进行说明，若欧洲杯16强队伍的对战信息发送后，16强前端展示样图中可以获取到对应的对战信息，那么将对应的对战信息进行展示，得到逻辑校验结果为16强前端展示样图交互逻辑测试成功；若16强前端展示样图未获取到对应的16强队伍的对战信息，那么说明16强前端展示样图的交互逻辑测试失败，第二失败原因为数据为获取成功或者数据解析失败等，生成逻辑校验结果为16强前端展示样图的交互逻辑测试失败，失败原因为对战数据未获取成功或者数据解析失败。
50.生成测试结果模块：生成测试结果模块用于根据数据逻辑校验操作的结果，构建测试结果；具体地，生成测试结果模块根据数据校验结果和逻辑校验结果，生成最终的测试结果，并将最终的测试结果进行电子化保存，便于后续对测试流程的追踪和对测试数据的分析。
51.需要说明的是，上述的举例仅仅是为了解释本发明的执行过程，并不能因此限定本发明的保护范围。
52.实施例3本实施例3具有一种计算机可读存储介质，所述存储介质用于储存将上述实施例1所述的测试前端展现与交互逻辑的方法实现所用的计算机软件指令，其包含用于测试前端展现与交互逻辑的方法所设置的程序；具体地，该可执行程序可以内置于实施例2所述的测试前端展现与交互逻辑的系统中，这样，测试前端展现与交互逻辑的系统就可以通过执行内置的可执行程序实现所述实施例1的测试前端展现与交互逻辑的方法。
53.上述本发明实施例公开实施例序号仅仅为了描述，不代表实施例的优劣。
54.本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
55.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。