组件的用户界面测试方法、装置、电子设备及存储介质与流程

1.本发明涉及计算机技术领域，尤其涉及一种组件的用户界面测试方法、装置、电子设备及存储介质。


背景技术：

2.随着万维网(world wide web,web)前端技术的发展及各种js (java script)框架的出现，各大组件库层出不穷。利用组件库，可以规范页面的样式，通过将基础组件进行个性化组合，可以沉淀出业务组件，从而提升研发人员的开发效率。
3.组件的质量影响着页面对外的呈现效果，因此需要对组件质量进行测试。目前组件的质量测试包含两方面：功能测试和用户界面(userinterface,ui)样式测试，都可以归属到单元测试的范畴。
4.但是，组件在被使用到生产环境中时，经常是以组合的形态出现，多个组件组合之后样式会互相影响，目前组件的测试一般是单独对各个组件分别进行测试，单独测试一个组件无法保证与其他组件组合时展示效果的正确性。


技术实现要素：

5.本发明提供一种组件的用户界面测试方法、装置、电子设备及存储介质，用以解决现有技术在用于组件的组合形态时测试不准确等问题的缺陷，实现在组件组合形态下能有效降低组件间的相互影响提高测试准确性的目标。
6.本发明提供一种组件的用户界面测试方法，包括：
7.基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例，所述对比组件元件库和所述基准组件元件库间存在重叠的组件元件；
8.通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；
9.基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例；
10.基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果。
11.本发明还提供一种组件的用户界面测试装置，包括：
12.组件元件用例模块，用于基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例，所述对比组件元件库和所述基准组件元件库间存在重叠的组件元件；
13.组件组合模块，用于通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；
14.组合组件用例模块，用于基于所述对比组合组件，获取对比组合测试用例，并基于
所述基准组合组件，获取基准组合测试用例；
15.测试输出模块，用于基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果。
16.本发明还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述处理器执行所述程序或指令时，实现如上述任一种所述的组件的用户界面测试方法的步骤。
17.本发明还提供一种非暂态计算机可读存储介质，其上存储有程序或指令，所述程序或指令被计算机执行时，实现如上述任一种所述的组件的用户界面测试方法的步骤。
18.本发明提供的组件的用户界面测试方法、装置、电子设备及存储介质，基于基础组件元件，通过抽象组件元件组合的常用模式，自动进行组件元件的排列组合得到组合组件，并进一步结合组件元件对组合组件进行ui测试，能够快速定位单一组件的深层次错误，准确性更高。
附图说明
19.为了更清楚地说明本发明或现有技术中的技术方案，下面将对本发明实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
20.图1为本发明提供的组件的用户界面测试方法的流程示意图之一；
21.图2为根据本发明提供的组件的用户界面测试方法中获取对比测试用例的流程示意图；
22.图3为本发明提供的组件的用户界面测试方法的流程示意图之二；
23.图4为本发明提供的组件的用户界面测试装置的结构示意图；
24.图5为本发明提供的电子设备的实体结构示意图。
具体实施方式
25.为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
26.本发明针对现有技术在用于组件的组合形态时测试不准确等的问题，基于组件元件，通过抽象组件元件组合的常用模式，自动进行组件元件的排列组合得到组合组件，并进一步结合组件元件对组合组件进行ui测试，能够快速定位单一组件元件的深层次错误，准确性更高。以下将结合附图，具体通过多个实施例对本发明进行展开说明和介绍。
27.图1为本发明提供的组件的用户界面测试方法的流程示意图之一，如图1所示，该方法包括：
28.s101，基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例。
29.其中，所述对比组件元件库和所述基准组件元件库间存在重叠的组件元件。
30.可以理解为，本发明事先可以收集测试用例的基础物料，包括准备基准组件元件库和创建新的组件元件库。可以理解的是，在实际网页开发场景中，可以根据需要对该新的组件元件库进行个性组合，以沉淀出期望的业务组件，从而提升开发人员的开发效率。但是为保证该新的组件元件库中组件元件的质量，需对其进行测试，因此其可作为对比组件元件库，与基准组件元件库进行对比测试。
31.其中，基准组件元件库中包含的是基准组件元件，也即是没有进行组合的单个组件，且这些单个组件是用户界面(user interface,ui) 正确的已知组件。对比组件元件库是与基准组件元件库间有组件重叠的新组件库。可以理解的是，组件元件本质上是一种组件，且是最小单元的组件，具有组件的属性。
32.只有对比组件元件库和基准组件元件库二者内组件元件有重叠时，才能进行对比校验和测试。可以理解的是，重叠的组件元件的个数不做限制，可以只存在一个重叠的组件元件，也可以全部重叠。
33.例如，若a组件元件库内包含a、b、c三个组件元件，b组件元件库包含a、b、c、d四个组件元件，且a组件元件库内组件元件均已知是正确的，则可将a组件元件库作为基准组件元件库对b组件元件库(作为对比组件元件库)内组件元件进行测试。
34.其中，基准组件元件库中的基准组件元件和对比组件元件库中的对比组件元件是ui测试的基本素材，用于组成测试用的测试用例。一个组件元件可以包含其相关的所有代码以及相关的其他静态资源，其中代码一般包含html文件、js文件、css文件，静态资源如图片、字体文件等。一个组件元件具有唯一的id，组件元件库则是多个组件元件的集合。
35.在确定基准组件元件库和对比组件元件库的基础上，可以分别将其中的基准组件元件和对比组件元件转换为可以测试的ui测试用例，通常为渲染而成的页面。
36.也即，分别将基准组件元件和对比组件元件渲染成对应的静态界面，得到静态的ui测试用例，并根据静态的ui测试用例确定针对静态界面的动态交互ui测试用例，得到多个基准组件元件对应的多个基准测试用例，以及多个对比组件元件对应的多个对比测试用例。
37.s102，通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件。
38.可以理解为，为对组合情况下的组件元件进行ui测试，本发明分别对基准组件元件库中的基准组件元件和对比组件元件库中对应的对比组件元件进行对应的组合。
39.具体而言，根据实际应用场景，对组件元件的组合模式进行拆解和抽象，确定组件元件间可能实现的组合关系。之后，根据这些组合关系，分别对对比组件元件库中的对比组件元件和基准组件元件库中的基准组件元件进行对应的排列组合。也就是说，对对比组件元件按照上述组合关系进行排列组合，得到相应的组合组件，作为对比组合组件。并且，将基准组件元件库中与该对比组件元件对应的基准组件元件，按照与该对比组件元件相同的组合关系进行相同的排列组合，得到相应的组合组件，作为基准组合组件。
40.s103，基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例。
41.可以理解为，在获取对比组合组件和基准组合组件的基础上，分别对这两种组合
组件进行用例转换。也即：通过将代码形式的对比组合组件渲染成可以进行测试的静态ui页面，也即静态的ui测试用例，确定针对该静态的ui测试用例的动态交互ui测试用例，并进一步确定对比组合组件对应的对比组合测试用例。同时，采用类似的处理流程，对基准组合组件进行页面渲染处理，得到基准组合组件对应的静态的ui测试用例，并基于该对应的静态的ui测试用例，确定针对该对应的静态的ui测试用例的动态交互ui测试用例，从而得到基准组合组件对应的基准组合测试用例。
42.s104，基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果。
43.可以理解为，本发明实施例的最后，将对比组件元件对应的对比测试用例与基准组件元件对应的基准测试用例作为一组，进行运行效果的截图对比，并将对比组合组件对应的对比组合测试用例与基准组合组件对应的基准组合测试用例作为一组，进行运行效果的截图对比，自动检测对比组件元件的ui问题，确定错误组件元件。
44.本发明提供的组件的用户界面测试方法，基于组件元件，通过抽象组件元件组合的常用模式，自动进行组件元件的排列组合得到组合组件，并进一步结合组件元件对组合组件进行ui测试，能够快速定位单一组件的深层次错误，准确性更高。
45.其中，根据上述各实施例提供的组件的用户界面测试方法可选地，所述基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件，包括：通过所述组合模式抽象，确定组件元件间可存在的组合关系类型，并针对每一种所述组合关系类型，确定组合关系实现方式；基于所述组合关系类型，通过排列组合，确定所述对比组件元件库中对比组件元件间的第一组合关系，以及所述基准组件元件库中基准组件元件间的第二组合关系；基于所述组合关系实现方式，组合所述第一组合关系下的所述对比组件元件，获取所述对比组合组件，并组合所述第二组合关系下的所述基准组件元件，获取所述基准组合组件。
46.可以理解为，本发明在进行组件元件的组合时，先通过模式抽象，定义组件元件间可能形成的组合关系类型以及这些组合关系类型分别对应的代码实现方式，再进一步根据该组合关系类型和代码实现方式，对对比组件元件和基准组件元件进行排列组合，得到对应的组合组件。也就是，将组件元件根据抽象出的模式进行排列组合，创建元件组合测试用例，即产出ui测试用例，用于后面的对比差异使用。同时，本发明还可以产出组合代码作为逻辑测试用例。
47.其中，在定义组件元件间可能形成的组合关系类型时，是针对对比组件元件库和基准组件元件库内所有组件元件进行的，也就是通过分析对比组件元件库中所有对比组件元件间可能的关系类型，以及基准组件元件库中所有基准组件元件间可能的关系类型，来定义组件元件间的组合关系类型。
48.具体而言，首先可以通过模式抽象，定义组件之间可以形成的关系类型(如兄弟、父子、作为参数存在等)，并定义还原该关系的组合方式(如代码拼接等)，用于将组件元件进行多种混合组装，形成新的组合组件。
49.例如，关系的定义可以包含如兄弟、父子、作为参数存在等三类基本关系，通过定义输出一张关系表，该关系表用于描述所有组件之间的组合关系。如果目标测试的对比组
件元件为n个，那么可以在n 之内的每个维度下进行关系的描述，也即可以建立n个对比组件元件间n维的组合关系、n
‑
1个对比组件元件间n
‑
1维的组合关系、 n
‑
2个对比组件元件间n
‑
2维的组合关系、
…
、2个对比组件元件间 2维的组合关系。例如，在维度为2的情况下，element1和element2 是父子关系，同时element2和element3是参数代入关系，诸如此例对所有可能的组合进行关系描述定义。
50.之后，针对定义的每一种关系，定义相关的实现代码。也就是说，与上述根据组件元件获取javascript脚本片段类似，对于基准库和对比库，使用定义好的组件间关系表，对每一个对比组合组件和基准组合组件进行代码还原，产出对应组合组件的代码片段。例如，兄弟关系可以将两个组件依次渲染，父子关系将子组件追加到父组件的内部。
51.其中，根据上述各实施例提供的组件的用户界面测试方法可选地，所述基于对比组件元件库，获取多个对比测试用例的处理流程如图2 所示，为根据本发明提供的组件的用户界面测试方法中获取对比测试用例的流程示意图。本发明为了测试基准组件库和对比组件库之间每个组件元件的差异，需要为每一个组件元件(可以包括对比组件元件和基准组件元件)创建测试用例，用于后续的对比差异使用，也即：将单一的组件元件的代码，转换为可以测试的ui测试用例(页面)。
52.如图2所示，包括：
53.s201，根据所述对比组件元件库中对比组件元件的展示状态需求，形成写至少一个脚本片段，所述脚本片段用于将所述对比组件元件渲染到页面进行静态展示。
54.可以理解为，本发明首先根据对比组件元件的展示状态需求，将对比组件元件转化为页面静态展示对应的javascript脚本片段。即，使用javascript书写脚本文件，脚本文件的输出为将对比组件元件渲染到页面进行静态展示的javascript脚本片段。实际场景中，根据组件的展示状态需要，可以创建多个脚本片段作为用例。
55.对于基准组件元件库中的基准组件元件，可以采用上述类似的处理方式，书写基准组件元件对应的javascript脚本片段。
56.s202，执行所述脚本片段，以将所述对比组件元件渲染成具有交互效果的用户界面，获取第二静态用户界面测试用例。
57.可以理解为，在上述步骤处理的基础上，可以使用chromeheadless引擎，将对比组件元件对应javascript脚本片段放在一个html 上进行执行，以将对比组件元件渲染成一个具有ui效果的页面，并可将该页面作为对比组件元件对应的ui测试用例，即第二静态用户界面测试用例。
58.类似的，也可以根据上述处理步骤，将基准组件元件库中的基准组件元件渲染成具有ui效果的页面，得到基准组件元件对应的用户界面测试用例。
59.s203，基于所述第二静态用户界面测试用例，形成交互脚本，所述交互脚本用于驱动模拟基于所述第二静态用户界面测试用例的用户界面交互。
60.可以理解为，本步骤创建对比组件元件的交互ui测试用例，依据ui测试用例生成的页面，也即第二静态用户界面测试用例，采用 cypress引擎框架书写交互脚本，该交互脚本被执行后可驱动模拟ui 交互。交互脚本形如
‘
cy.get("[data
‑
cy＝submit]").click()’，可用来描述诸如点击、hover、拖拽等操作。对于基准组件元件，本发明可以通过执行类似操作，书写基准组件元件对应的交互脚本。
[0061]
s204，基于所述第二静态用户界面测试用例和所述交互脚本，获取所述对比组件元件对应的第二交互用户界面测试用例。
[0062]
可以理解为，本发明可以将上述交互脚本与步骤202中的ui测试用例所输出的静态页面一起，作为测试交互ui的测试用例，也即第二交互用户界面测试用例，以对渲染出的页面进行动态评价与测试。
[0063]
s205，基于所述第二静态用户界面测试用例和所述第二交互用户界面测试用例，确定所述对比测试用例。
[0064]
可以理解为，本发明的组件元件的测试点包含ui展示和交互效果两个部分，因此测试用例也包含这两部分内容。即，将根据上述步骤获取的ui测试用例(即第二静态用户界面测试用例)和交互ui 测试用例(即第二交互用户界面测试用例)一起，作为对比组件元件对应的对比测试用例。
[0065]
本发明可以针对基准库和对比库的每个同名组件(id相同)，分别创建两类测试用例，也即对比组件元件对应的对比测试用例和基准组件元件对应的基准测试用例。
[0066]
其中，根据上述各实施例提供的组件的用户界面测试方法可选地，所述基于所述对比组合组件，获取对比组合测试用例，包括：获取所述对比组合组件对应的页面展示脚本片段，并利用页面渲染工具，将所述页面展示脚本片段渲染成第一静态展示页面，作为所述对比组合组件对应的第一静态用户界面测试用例；基于所述第一静态展示页面，获取针对所述第一静态展示页面的交互脚本，所述针对所述第一静态展示页面的交互脚本被执行时，驱动针对所述第一静态展示页面的交互操作；基于所述针对所述第一静态展示页面的交互脚本和所述第一静态用户界面测试用例，确定所述对比组合组件对应的第一交互用户界面测试用例；基于所述第一静态用户界面测试用例和所述第一交互用户界面测试用例，确定所述对比组合测试用例。
[0067]
可以理解为，本发明在获取对比组合组件对应的对比组合测试用例时，可以采用与上述获取对比测试用例类似的处理流程，也即：通过chrome headless引擎，将组合组件的代码片段渲染成web页面，从而形成这个组合组件的ui测试用例，再将该ui测试用例与ui交互脚本结合，输出交互ui测试用例。可以理解，该处理流程同样也适用于基于基准组合组件获取基准组合测试用例的处理过程。
[0068]
具体而言，可以根据对比组合组件的展示状态需求，将对比组合组件转化为页面静态展示对应的javascript脚本片段。即，使用 javascript，书写可以将对比组合组件渲染到页面进行静态展示的 javascript脚本片段。实际场景中，根据对比组合组件的展示状态需要，可以创建多个脚本片段作为对比组合组件的用例。对于基准组合组件，可以采用上述类似的处理方式，书写基准组合组件对应的javascript 脚本片段。
[0069]
之后，可以使用chrome headless引擎等页面渲染工具，将对比组合组件对应javascript脚本片段放在一个html上进行执行，以渲染出一个具有ui效果的页面，作为对比组合组件对应的ui测试用例，也即第一静态用户界面测试用例。类似的，可以采用类似的处理流程将基准组合组件渲染得到基准组合组件对应的ui测试用例。
[0070]
再之后，可以基于比组合组件对应的ui测试用例，采用cypress 引擎框架书写针对该ui测试用例的交互脚本，该交互脚本被执行后可驱动模拟针对该ui测试用例的ui交互。
[0071]
最后，将对比组合组件对应的ui测试用例与针对该ui测试用例的交互脚本一起，作为对比组合组件对应的交互ui测试用例，以对渲染出的页面进行动态评价与测试。则，对对比组合组件进行静态测试的ui测试用例和进行动态测试的交互ui测试用例一起，即构成对比组合组件对应的对比组合测试用例。
[0072]
本发明采用上述类似的处理流程，可以基于基准组合组件，获取该基准组合组件对应的基准组合测试用例。
[0073]
其中，根据上述各实施例提供的组件的用户界面测试方法可选地，所述对所述对比组件元件库内的对比组件元件进行用户界面测试，包括：将所述对比测试用例与所述基准测试用例作为一组，并将所述对比组合测试用例与所述基准组合测试用例作为一组，构成所述对比组件元件的测试样本；以所述测试样本为输入，对所述对比组件元件进行用户界面测试。
[0074]
可以理解为，本发明在进行对比组件元件的ui测试时，对对比和基准测试用例根据cypress引擎进行图像对比，也即将多个对比测试用例、多个基准测试用例、以及对应的对比组合测试用例和基准组合测试用例作为输入，每个元件的基准用例和对比用例作为一组，每个混合场景的基准用例和对比用例作为一组，使用cypress引擎进行 ui测试。进一步的，在进行组件ui测试的同时，还可以进行功能测试，即通过运行js用例实现逻辑验证，并在验证逻辑测试脚本校验不通过时，确定对应的对比组件元件存在错误。
[0075]
其中，根据上述各实施例提供的组件的用户界面测试方法可选地，所述获取测试结果，包括：获取所述用户界面测试的输出结果，并基于所述输出结果，记录错误用例所涉及的对比组件元件和组合关系：若所述错误用例涉及的是单独的对比组件元件，则确定所述单独的对比组件元件为错误组件元件；若所述错误用例涉及的是组合关系及所述组合关系关联的对比组件元件，则根据所述关联的对比组件元件出现错误的次数，确定错误组件元件。
[0076]
可以理解为，本发明采用图像对比技术，以cypress引擎为框架，对组件运行效果进行截图对比，也即检测是否有像素偏差，自动发现 ui问题。具体而言，收集cypress引擎的检测结果，并记录错误用例所涉及的组件元件和对比组合组件中该组件元件的组合关系的名称。若记录中包括单独的组件元件错误，则可以确定该组件元件有错误；若在组合关系用例中存在错误，则记录所有的相关组件元件，并可采用如“element1_父子”的形式，将所有错误相关的组合关系描述中相关组件元件进行排名，例如可根据相关组件元件出现的次数进行排名，并可确定排名靠前的则为ui实现有问题的组件。
[0077]
其中，根据上述各实施例提供的组件的用户界面测试方法可选地，还包括：若所述错误用例涉及的是组合关系及所述组合关系关联的对比组件元件，则循环执行以下处理流程，直至确定出所述对比组件元件中的单一错误组件元件，所述以下处理流程包括：重新对所述关联的对比组件元件和所述基准组件元件进行排列组合，并根据新的组合结果，转到所述基于所述对比组合组件，获取对比组合测试用例的步骤，执行相应的用户界面测试流程。
[0078]
可以理解为，本发明对根据上述各实施例测试出错的组合组件，进行基于回归测试的递归测试，其中回归测试为：以组合组件包含的组件元件为样本，重新进行组件元件的排列组合测试，以精确定位到错误的单一组件元件。
[0079]
具体而言，若根据上述各实施例判断出对比组件元件在相互间构成的对比组合组件存在错误时，可以根据测试结果记录，确定该对比组合组件所涉及的各个对比组件元件，也即关联的对比组件元件。
[0080]
之后，将这些关联的对比组件元件按照新的组合方式，重新进行组合排列，得到新的组合组件，也即新的对比组合组件。
[0081]
再之后，以这些新的对比组合组件替换上述各实施例的对比组合组件，以关联的对比组件元件替换上述各实施例的对比组件元件，重新执行ui测试流程，并根据测试结果确定出这些关联的对比组件元件中单独出现错误的对比组件元件。
[0082]
也即，分别获取关联的对比组件元件所对应的对比测试用例和基准测试用例，以及新的对比组合组件所对应的新的对比测试用例和新的基准测试用例，并在此基础上进行ui测试，获取测试结果。
[0083]
对于不能判断出组合关系中单个关联的对比组件元件是否异常的新的对比组合组件，继续对其组合关系所涉及的对比组件元件进行上述重新进行组合排列到根据测试结果确定出这些关联的对比组件元件中单独出现错误的对比组件元件的处理流程，直至精确定位到出现错误的单个对比组件元件。
[0084]
为进一步说明本发明的技术方案，以下进行举例说明，但不对本发明要求保护的范围进行限定。
[0085]
本发明基于组件排列组合应用的场景，提供的组件的用户界面测试方法如图3所示，为本发明提供的组件的用户界面测试方法的流程示意图之二，用于解决现有方案只能排查单一组件问题，而无法保证多个组件组合后使用的质量问题，如单一组件ui展示正确，但与其他组件并列或以父子关系排列时，ui部分如边距、适配可能出现问题。如图3所示，包括如下处理步骤：
[0086]
(1)元件库模块：收集测试用例的基础物料，即准备基准组件元件库和对比组件元件库。
[0087]
此步骤准备的是ui测试的基本素材，用于组成测试用的测试用例。一个组件元件包含其相关的所有代码以及相关的其他静态资源，其中代码一般包含html文件、js文件、css文件，静态资源如图片、字体文件等。一个组件元件具有唯一的id，组件库则是多个组件元件的集合。
[0088]
本步骤处理的对象包括基准组件元件库和对比组件元件库，其中基准组件元件库是ui正确的已有的组件库，对比组件元件库是与基准组件元件库的组件元件有重叠的新组件库，只有两者组件有重叠时，才能进行对比校验和测试。
[0089]
(2)元件样本库模块：将对比组件元件库和基准组件元件库中的组件元件的单一组件代码转换为可以测试的ui页面，创建组件元件的测试用例，用于后续处理流程的对比差异使用。
[0090]
为了测试基准组件元件库和对比组件元件库之间每个组件元件的差异，需要为每一个组件元件创建测试用例。组件元件的测试点包含ui展示和交互效果两个部分，因此测试用例也包含这两部分内容。
[0091]
ui测试用例：使用javascript书写用例(case)，用例的输出为将组件元件渲染到页面进行静态展示的javascript脚本片段，根据组件的展示状态需要创建多个脚本片段作
为测试用例。之后使用chromeheadless引擎，将javascript脚本片段放在一个html上进行执行，渲染成一个具有ui效果的静态页面，作为ui测试用例。
[0092]
交互ui测试用例：依据ui测试用例生成的页面，基于cypress 引擎框架书写交互脚本，交互脚本执行后可驱动模拟ui交互，脚本形如
‘
cy.get("[data
‑
cy＝submit]").click()’，用来描述诸如点击、hover、拖拽等操作。此脚本与ui测试用例所输出的页面一起，作为测试交互ui的测试用例，即交互ui测试用例。
[0093]
本步骤针对基准组件元件库和对比组件元件库的每个同名组件元件(id相同)，分别创建上述的两类测试用例。
[0094]
另外，若要进行组件元件的功能测试，可将组件元件的代码直接作为逻辑测试用例。
[0095]
(3)组合样本库模块：将组件元件根据抽象出的模式进行排列组合，并创建组合组件测试用例，即组合组件的ui测试用例和交互 ui测试用例，用于后续处理流程的对比差异使用。
[0096]
先定义组件之间可行的组合关系，并确定还原该组合关系的组合方式(如代码拼接)，用于将组件元件进行多个混合组合。例如，关系定义可以包含兄弟、父子、作为参数存在等三类基本关系，输出一张关系表，用于描述所有组件元件之间的组合关系。如果目标测试的组件元件为n个，那么可以在n之内的每个维度下进行组合关系的描述。例如，在维度为2的情况下，element1和element2是父子关系，同时element2和element3是参数代入关系，诸如此例对所有可能的组合进行关系描述定义。
[0097]
之后，针对每一种组合关系，定义相关的实现代码，例如兄弟关系可以将两个组件依次渲染，父子关系将子组件追加到父组件的内部。
[0098]
再之后，与上一步骤中的组件元件类似，对于基准组件元件库和对比组件元件库，使用定义好的组件间关系表，对每一个组合组件进行代码还原，产出组合的代码片段。并如上通过chrome headless引擎，将组合的代码片段渲染成web页面，从而形成这个组合组件的ui测试用例，再与ui交互脚本结合，输出交互ui测试用例。
[0099]
(4)测试模块：对于上述基准组件元件库和对比组件元件库分别对应的组件元件与组合组件，对基准测试用例和对比测试用例，根据cypress引擎进行图像对比，确定测试结果。
[0100]
将(2)、(3)所产出的测试用例作为输入，每个组件元件的基准测试用例和对比测试用例作为一组，每个组合场景的基准测试用例和对比测试用例作为一组，使用cypress引擎进行ui测试。
[0101]
同时，可以运行测试js用例，进行功能测试。
[0102]
(5)错误分析模块：通过检测是否有像素偏差，确定错误组件元件。
[0103]
收集cypress引擎的检测结果，记录错误用例所涉及的组件元件和关系名称。若单独的组件元件错误则可以直接确定其有错误；若在关系用例(如描述为“element1_父子”)中出现错误，则记录该关系用例所有的相关组件元件，并将所有相关组件元件进行排名(如按组件元件单独和组合出现错误的总次数进行排名)，排名靠前的则为ui 实现有问题的组件。
[0104]
基于相同的发明构思，本发明根据上述各实施例还提供一种组件的用户界面测试
装置，该装置用于在上述各实施例中实现组件的用户界面测试。因此，在上述各实施例的组件的用户界面测试方法中的描述和定义，可以用于本发明中各个执行模块的理解，具体可参考上述方法实施例，此处不在赘述。
[0105]
根据本发明的一个实施例，组件的用户界面测试装置的结构如图 4所示，为本发明提供的组件的用户界面测试装置的结构示意图，该装置可以用于实现上述各方法实施例中的组件的用户界面测试，该装置包括：组件元件用例模块401、组件组合模块402、组合组件用例模块403和测试输出模块404。其中：
[0106]
组件元件用例模块401用于基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例，所述对比组件元件库和所述基准组件元件库间存在重叠的组件元件；组件组合模块402用于通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；组合组件用例模块403用于基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例；测试输出模块404用于基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果。
[0107]
具体而言，本发明事先可以收集测试用例的基础物料，包括准备基准组件元件库和创建新的组件元件库。可以理解的是，在实际网页开发场景中，可以根据需要对该新的组件元件库进行个性组合，以沉淀出期望的业务组件，从而提升开发人员的开发效率。但是为保证该新的组件元件库中组件元件的质量，需对其进行测试，因此其可作为对比组件元件库，与基准组件元件库进行对比测试。
[0108]
其中，基准组件元件库中包含的是基准组件元件，也即是没有组合的单个元件，且这些元件是用户界面正确的已知组件。对比组件元件库是与基准组件元件库间有组件重叠的新组件库。
[0109]
只有对比组件元件库和基准组件元件库二者内组件有重叠时，才能进行对比校验和测试。可以理解的是，重叠的组件元件的个数不做限制，可以只存在一个重叠的组件元件，也可以全部重叠。
[0110]
在确定基准组件元件库和对比组件元件库的基础上，组件元件用例模块401可以分别将其中的基准组件元件和对比组件元件转换为可以测试的ui测试用例，通常为渲染而成的页面。也即，组件元件用例模块401分别将基准组件元件和对比组件元件渲染成对应的静态界面，得到静态的ui测试用例，并根据静态的ui测试用例确定针对静态界面的动态交互ui测试用例，得到多个基准组件元件对应的多个基准测试用例，以及多个对比组件元件对应的多个对比测试用例。
[0111]
之后，根据实际应用场景，组件组合模块402对组件元件的组合模式进行拆解和抽象，确定组件元件间可能实现的组合关系。然后，根据这些组合关系，组件组合模块402分别对对比组件元件库中的对比组件元件和基准组件元件库中的基准组件元件进行对应的排列组合。也就是说，组件组合模块402对对比组件元件按照上述组合关系进行排列组合，得到相应的组合组件，作为对比组合组件。并且，将基准组件元件库中与该对比组件元件对应的基准组件元件，按照与该对比组件元件相同的组合关系进行相同的排列组合，得到相应的组合组件，作为基准组合组件。
[0112]
再之后，在获取对比组合组件和基准组合组件的基础上，组合组件用例模块403分别对这两种组合组件进行用例转换。也即：通过将代码形式的对比组合组件渲染成可以进行测试的静态ui页面，也即静态的ui测试用例，确定针对该静态的ui测试用例的动态交互ui 测试用例，并进一步确定对比组合组件对应的对比组合测试用例。同时，采用类似的处理流程，组合组件用例模块403对基准组合组件进行页面渲染处理，得到基准组合组件对应的静态的ui测试用例，并基于该对应的静态的ui测试用例，确定针对该对应的静态的ui测试用例的动态交互ui测试用例，从而得到基准组合组件对应的基准组合测试用例。
[0113]
最后，测试输出模块404将对比组件元件对应的对比测试用例与基准组件元件对应的基准测试用例作为一组，进行运行效果的截图对比，并将对比组合组件对应的对比组合测试用例与基准组合组件对应的基准组合测试用例作为一组，进行运行效果的截图对比，自动检测对比组件元件的ui问题，确定错误组件元件。
[0114]
本发明提供的组件的用户界面测试装置，基于组件元件，通过抽象组件元件组合的常用模式，自动进行组件元件的排列组合得到组合组件，并进一步结合组件元件对组合组件进行ui测试，能够快速定位单一组件的深层次错误，准确性更高。
[0115]
可选地，所述组件组合模块，用于：
[0116]
通过所述组合模式抽象，确定组件元件间可存在的组合关系类型，并针对每一种所述组合关系类型，确定组合关系实现方式；
[0117]
基于所述组合关系类型，通过排列组合，确定所述对比组件元件库中对比组件元件间的第一组合关系，以及所述基准组件元件库中基准组件元件间的第二组合关系；
[0118]
基于所述组合关系实现方式，组合所述第一组合关系下的所述对比组件元件，获取所述对比组合组件，并组合所述第二组合关系下的所述基准组件元件，获取所述基准组合组件。
[0119]
可选地，所述组合组件用例模块，在用于所述基于所述对比组合组件，获取对比组合测试用例时，用于：
[0120]
获取所述对比组合组件对应的页面展示脚本片段，并利用页面渲染工具，将所述页面展示脚本片段渲染成第一静态展示页面，作为所述对比组合组件对应的第一静态用户界面测试用例；
[0121]
基于所述第一静态展示页面，获取针对所述第一静态展示页面的交互脚本，所述针对所述第一静态展示页面的交互脚本被执行时，驱动针对所述第一静态展示页面的交互操作；
[0122]
基于所述针对所述第一静态展示页面的交互脚本和所述第一静态用户界面测试用例，确定所述对比组合组件对应的第一交互用户界面测试用例；
[0123]
基于所述第一静态用户界面测试用例和所述第一交互用户界面测试用例，确定所述对比组合测试用例。
[0124]
可选地，所述组件元件用例模块，在用于所述基于对比组件元件库，获取多个对比测试用例时，用于：
[0125]
根据所述对比组件元件库中对比组件元件的展示状态需求，形成至少一个脚本片段，所述脚本片段用于将所述对比组件元件渲染到页面进行静态展示；
[0126]
执行所述脚本片段，以将所述对比组件元件渲染成具有交互效果的用户界面，获
取第二静态用户界面测试用例；
[0127]
基于所述第二静态用户界面测试用例，形成交互脚本，所述交互脚本用于驱动模拟基于所述第二静态用户界面测试用例的用户界面交互；
[0128]
基于所述第二静态用户界面测试用例和所述交互脚本，获取所述对比组件元件对应的第二交互用户界面测试用例；
[0129]
基于所述第二静态用户界面测试用例和所述第二交互用户界面测试用例，确定所述对比测试用例。
[0130]
可选地，所述测试输出模块，在用于所述对所述对比组件元件库内的对比组件元件进行用户界面测试时，用于：
[0131]
将所述对比测试用例与所述基准测试用例作为一组，并将所述对比组合测试用例与所述基准组合测试用例作为一组，构成所述对比组件元件的测试样本；
[0132]
以所述测试样本为输入，对所述对比组件元件进行用户界面测试。
[0133]
可选地，所述测试输出模块，在用于所述获取测试结果时，用于：
[0134]
获取所述用户界面测试的输出结果，并基于所述输出结果，记录错误用例所涉及的对比组件元件和组合关系：
[0135]
若所述错误用例涉及的是单独的对比组件元件，则确定所述单独的对比组件元件为错误组件元件；
[0136]
若所述错误用例涉及的是组合关系及所述组合关系关联的对比组件元件，则根据所述关联的对比组件元件出现错误的次数，确定错误组件元件。
[0137]
可选地，所述测试输出模块，在用于所述根据所述关联的对比组件元件出现错误的次数，确定错误组件元件时，用于：
[0138]
循环执行第一处理流程，直至所述错误用例涉及的均是单独的对比组件元件，所述第一处理流程包括：
[0139]
获取所述关联的对比组件元件的关联对比测试用例，并获取与所述关联的对比组件元件对应的基准组件元件的关联基准测试用例；
[0140]
重新对所述关联的对比组件元件和所述基准组件元件进行排列组合，并根据新的组合结果，重执行所述基于所述对比组合组件，获取对比组合测试用例至所述获取测试结果的步骤，并累计所述关联的对比组件元件出现错误的次数；
[0141]
对各所述关联的对比组件元件出现错误的次数进行排序，并根据所述排序，确定所述单独的对比组件元件中的错误组件元件。
[0142]
可以理解的是，本发明中可以通过硬件处理器(hardwareprocessor)来实现上述各实施例的装置中的各相关程序模块。并且，本发明的组件的用户界面测试装置利用上述各程序模块，能够实现上述各方法实施例的组件的用户界面测试流程，在用于实现上述各方法实施例中的组件的用户界面测试时，本发明的装置产生的有益效果与对应的上述各方法实施例相同，可以参考上述各方法实施例，此处不再赘述。
[0143]
作为本发明的又一个方面，本实施例根据上述各实施例提供一种电子设备，该电子设备包括存储器、处理器及存储在该存储器上并可在该处理器上运行的程序或指令，该处理器执行该程序或指令时，实现如上述各实施例所述的组件的用户界面测试方法的步骤。
[0144]
进一步的，本发明的电子设备还可以包括通信接口和总线。参考图5，为本发明提供的电子设备的实体结构示意图，包括：至少一个存储器501、至少一个处理器502、通信接口503和总线504。
[0145]
其中，存储器501、处理器502和通信接口503通过总线504完成相互间的通信，通信接口503用于该电子设备与组件库设备之间的信息传输；存储器501中存储有可在处理器502上运行的程序或指令，处理器502执行该程序或指令时，实现如上述各实施例所述的组件的用户界面测试方法的步骤。
[0146]
可以理解为，该电子设备中至少包含存储器501、处理器502、通信接口503和总线504，且存储器501、处理器502和通信接口503 通过总线504形成相互间的通信连接，并可完成相互间的通信，如处理器502从存储器501中读取组件的用户界面测试方法的程序指令等。另外，通信接口503还可以实现该电子设备与组件库设备之间的通信连接，并可完成相互间信息传输，如通过通信接口503实现对比组件元件或基准组件元件的读取等。
[0147]
电子设备运行时，处理器502调用存储器501中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例；通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例；基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果等。
[0148]
上述的存储器501中的程序指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。或者，实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：u盘、移动硬盘、只读存储器(read
‑
onlymemory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
[0149]
本发明还根据上述各实施例提供一种非暂态计算机可读存储介质，其上存储有程序或指令，该程序或指令被计算机执行时，实现如上述各实施例所述的组件的用户界面测试方法的步骤，例如包括：基于对比组件元件库，获取多个对比测试用例，并基于基准组件元件库，获取多个基准测试用例；通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例；基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果等。
[0150]
作为本发明的再一个方面，本实施例根据上述各实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的组件的用户界面测试方法，该方法例如包括：基于对比组件元件库，获取多个
对比测试用例，并基于基准组件元件库，获取多个基准测试用例；通过组合模式抽象和组件元件的排列组合，基于所述对比组件元件库获取对比组合组件，并基于所述基准组件元件库获取基准组合组件；基于所述对比组合组件，获取对比组合测试用例，并基于所述基准组合组件，获取基准组合测试用例；基于所述对比测试用例和所述基准测试用例，以及所述对比组合测试用例和所述基准组合测试用例，对所述对比组件元件库内的对比组件元件进行用户界面测试，获取测试结果。
[0151]
本发明提供的电子设备、非暂态计算机可读存储介质和计算机程序产品，通过执行上述各实施例所述的组件的用户界面测试方法的步骤，基于基础组件元件，通过抽象组件元件组合的常用模式，自动进行组件元件的排列组合得到组合组件，并进一步结合组件元件对组合组件进行ui测试，能够快速定位单一组件的深层次错误，准确性更高。
[0152]
可以理解的是，以上所描述的装置、电子设备及存储介质的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，既可以位于一个地方，或者也可以分布到不同网络单元上。可以根据实际需要选择其中的部分或全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
[0153]
通过以上实施方式的描述，本领域的技术人员可以清楚地了解，各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如u盘、移动硬盘、rom、 ram、磁碟或者光盘等，包括若干指令，用以使得一台计算机设备 (如个人计算机，服务器，或者网络设备等)执行上述各方法实施例或者方法实施例的某些部分所述的方法。
[0154]
另外，本领域内的技术人员应当理解的是，在本发明的申请文件中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0155]
本发明的说明书中，说明了大量具体细节。然而应当理解的是，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本发明公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。
[0156]
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。