网页前端测试方法及装置与流程

本发明涉及互联网技术领域，具体而言，涉及网页前端测试方法及装置。

背景技术：

网页前端为互联网技术的重要分支，在界面展示和用户交互方面占据极为重要的地位。随着互联网的发展，越来越多的后端业务逻辑逐步前端化，使得前端业务逻辑日趋复杂。

近些年前端技术日新月异，随之，前端领域也纷纷涌现出各种单元测试方案，如：jasmine、mocha等。这些单元测试方案虽从一定程度上能保证前端代码质量。但均存在将业务功能的测试用例直接耦合在业务代码中，前端业务代码的高耦合度致使前端单元测试用例维护变得异常复杂。

技术实现要素：

本发明的目的在于提供一种网页前端测试方法，用以改善上述问题。

本发明的另一目的在于提供一种网页前端测试装置，用以改善上述问题。

为了实现上述目的，本发明实施例采用的技术方案如下：

本发明实施例提供一种网页前端测试方法。所述方法应用于相互通信连接的客户端与网页服务器。所述方法包括：所述客户端响应测试指令，生成访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识；所述客户端将所述访问请求数据发送给所述网页服务器；所述网页服务器根据所述测试标识，获得与待测试功能对应的测试用例；所述网页服务器根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件；所述网页服务器根据所述测试用例及待反馈数据，生成响应数据；所述网页服务器将所述响应数据发送至所述客户端；所述客户端执行所述响应数据，以得测试结果。

本发明实施例还提供一种网页前端测试方法。所述方法应用于与客户端通信连接的网页服务器，所述方法包括：接收所述客户端发送的访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识；根据所述测试标识，获得与待测试功能对应的测试用例；根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件；根据所述测试用例及待反馈数据，生成响应数据；将所述响应数据发送至所述客户端，以获得所述客户端反馈的测试结果，其中，所述测试结果由所述客户端执行所述响应数据后生成。

本发明实施例还提供一种网页前端测试装置。所述装置应用于与客户端通信连接的网页服务器，所述装置包括：接收模块、获取模块、生成模块及发送模块。接收模块，用于接收所述客户端发送的访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识。获取模块，用于根据所述测试标识，获得与待测试功能对应的测试用例；及还用于根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件。生成模块，用于根据所述测试用例及待反馈数据，生成响应数据。发送模块，用于将所述响应数据发送至所述客户端，以获得所述客户端反馈的测试结果，其中，所述测试结果由所述客户端执行所述响应数据后生成。

与现有技术相比，本发明提供的一种网页前端测试方法及装置。可应用于相互通信连接的客户端与网页服务器。所述方法包括所述客户端响应测试指令，生成访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识。所述网页服务器根据所述测试标识，获得与待测试功能对应的测试用例。精确及快速的查找到对应的测试用例，通过效率。根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件；根据所述测试用例及待反馈数据，生成响应数据。从而减少待反馈数据与测试用例的高度耦合，提高测试用例可维护性以及测试效率。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明较佳实施例的应用环境示意图。

图2为本发明较佳实施例提供的网页服务器的方框示意图。

图3为本发明第一实施例提供的一种网页前端测试方法的流程图。

图4为图3中步骤s101的子步骤流程图。

图5为图3中步骤s105的子步骤流程图。

图6为本发明第二实施例提供的一种网页前端测试方法的流程图。

图7本发明第三实施例提供的一种网页前端测试装置的方框示意图。

图标：400-用户终端；401-客户端；100-网页服务器；300-网络；111-存储器；112-处理器；113-通信单元；200-网页前端测试装置；201-接收模块；202-获取模块；203-生成模块；204-发送模块。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

本发明下述各实施例如无特别说明均可应用于如图1所示的环境中，如图1所示，用户终端400、网页服务器100位于网络300中，网络300包括无线网络或有线网络，通过网络300，用户终端400与网页服务器100进行数据交互。网页服务器100可以是一个服务器，也可以是多个执行不同任务的服务器。

于本发明实施例中，用户终端400优选为移动终端设备，例如可以包括智能手机、平板电脑、电子书阅读器、膝上型便携计算机、车载电脑、穿戴式移动终端等等。该用户终端400中安装客户端401，与网页服务器100相对应，为用户提供服务。所述客户端401与所述网页服务器100通信连接。所述客户端401可以是浏览器，也可以为其他可访问网页服务器100的app。

如图2所示，是图1中网页服务器100的方框示意图。所述网页服务器100包括网页前端测试装置200、存储器111、处理器112及通信单元113。

所述存储器111、处理器112以及通信单元113各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述网页前端测试装置200包括至少一个可以软件或固件(firmware)的形式存储于所述存储器111中或固化在所述网页服务器100的操作系统(operatingsystem，os)中的软件功能模块。所述处理器112用于执行所述存储器111中存储的可执行模块，例如所述网页前端测试装置200所包括的软件功能模块及计算机程序等。

其中，所述存储器111可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread-onlymemory，eeprom)，实现了数据持久化功能的存储系统等。其中，存储器111用于存储程序或者数据。所述通信单元113用于通过所述网络300建立所述网页服务器100与其它通信终端之间的通信连接，并用于通过所述网络300收发数据。

应当理解的是，图1所示的结构仅为网页服务器100的结构示意图，所述网页服务器100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

第一实施例

请参照图3，是本发明较佳实施例提供的一种网页前端测试方法，应用于相互通信连接的客户端401与网页服务器100。所述网页前端测试方法包括以下步骤：

步骤s101，所述客户端401响应测试指令，生成访问请求数据。

本实施例中，客户端401通过访问请求数据从网页服务器100获取加载网页的数据及实现各种前端网站服务的数据。所述访问请求数据包括用于标识需要测试的待测试功能及与待测试功能对应的待测试文件的测试标识。需要说明的是，待测试功能与待测试文件之间的对应关系可以预先设置。所述访问请求数据还包括网页服务器100对应的网页地址(例如，百度网页服务器100对应的网页地址为www.baidu.com)。待测试功能可以是网页的前端网站服务对应的功能模块。待测试文件可以是实现待测试功能的脚本文件，例如可以是前端javascript脚本文件。如图4所示，步骤s101包括以下子步骤：

子步骤s1011，所述客户端401响应所述测试指令，获得与所述测试指令对应的待测试业务信息。

在本实施例中，测试指令可以是触发对网页的一个或多个前端网站服务进行测试的指令。测试指令可以由测试员通过用户终端400触发，也可以是按照预设置的规则触发。待测试业务信息可以是被指定需要被测试的一个或多个前端网站服务对应的待测试功能的业务信息。待测试业务信息包括待测试功能的标识信息及实现待测试功能的业务规则。前端网站服务与待测试业务信息之间的对应关系可以通过预先设置于用户终端400。

子步骤s1012，所述客户端401根据待测试业务信息生成与所述待测试功能对应的测试标识。

在本实施例中，测试标识包括待测试文件标识及待测试功能标识。待测试文件标识可以是待测试文件名称，例如，待测试文件名称可以是demo.js；待测试功能标识可以是待测试功能的名称，例如，待测试功能的名称可以是democontroller.demofunction。客户端401根据待测试业务信息生成待测试文件标识及待测试功能标识。

子步骤s1013，所述客户端401获取与所述网页服务器100对应的网页地址。

子步骤s1014，所述客户端401根据所述网页地址及所述测试标识生成所述访问请求数据。

在本实施例中，客户端401通过网页地址访问网页服务器100以获取加载网页的数据及实现各种前端网站服务的数据，例如，与各项前端网站服务对应的多个前端js脚本文件、前端css样式文件、jpg、png等图片资源文件，这些资源文件在访问时可以同时从网页服务器100中获取。所述测试标识用于标示通过访问请求数据需要测试的待测试功能及待测试文件。所述访问请求数据可以是包括访问地址，访问地址包括网页地址及测试标识。例如，访问地址可以是baidu.com？testfile＝demo.js&testmodule＝democontroller.demofunction。

步骤s102，客户端401将所述访问请求数据发送给所述网页服务器100。

在本实施例中，客户端401在生成访问请求数据后自动发送给网页服务器100。具体地，通过网络300将访问请求发送给网页服务器100。以便流程进入步骤s103。

步骤s103，所述网页服务器100根据所述测试标识，获得与待测试功能对应的测试用例。

在本实施例中，网页服务器100接收访问请求数据后，解析访问请求数据中的测试标识，以获得测试标识中的待测试文件标识及待测试功能标识。测试用例(testcase)是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果。每一个待测试功能都存在对应的测试用例。测试用例、及测试用例与待测功能之间的对应关系可以是预先存储在网页服务器100内。因此，当从测试标识中解析出待测试功能标识后，根据待测试功能标识，利用测试用例与待测功能之间的对应关系从预先存储的测试用例中获取与待测试功能对应的测试用例。这样提高查找与待测试功能对应的测试用例的精确性和效率。

步骤s104，所述网页服务器100根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件。

在本实施例中，待反馈数据可以是反馈给客户端401以便客户端401加载网页的数据及实现各种前端网站服务的数据。待反馈数据可以包括，但不限于包括：待测试文件、暂不测试的功能对应的脚本文件、前端css样式文件、jpg、png等图片资源文件。

步骤s105，所述网页服务器100根据所述测试用例及待反馈数据，生成响应数据。

在本实施例中，所述网页服务器100将获取的所述测试用例动态的注入所述待反馈数据，以生成响应数据。测试用例与所有的脚本文件分离，在测试时通过将获取与待测试功能对应的测试用例动态注入待反馈数据中，有效的降低了响应数据的耦合度，使响应数据被优化，减轻客户端401加载响应数据的负担。同时通过动态注入测试用例降低甚至脱离测试用例对运行环境的依赖，实现任意环境的测试用例引入，极大地提高测试用例可维护性以及测试效率。可选地，如图5所示，步骤s105包括以下子步骤：

子步骤s1051，所述网页服务器100根据所述待测试文件标识从所述待反馈数据中获取对应的所述待测试文件。

在本实施例中，待反馈数据中包括实现各个前端网站服务的脚本文件，从所有的脚本文件中通过待测试文件标识查找出待测试文件。需要说明的是，即使只测试一个前端网站服务，客户端401均需先访问网页服务器100，而访问网页服务器100，会同时请求多个前端网站服务对应的多个前端js脚本文件。

子步骤s1052，所述网页服务器100根据与所述待测试功能标识对应的业务规则将所述测试用例注入所述待测试文件。

在本实施例中，业务规则可以是网站服务实现过程中的业务逻辑，例如，搜索服务的业务规则为先显示搜索界面，再接收搜索内容，接着进行搜素，最后显示搜索结果。注入测试用例可以是将测试用例加入待测试文件的脚本文件中。按照业务规则将测试用例注入待测试文件中可以是，根据业务规则在待测试文件中选择加入测试用例的位置。例如，测试搜索功能时，根据搜索服务的业务规则，将测试搜索功能的测试用例注入在实现显示搜索界面的脚本文件之后，使待测试文件在被执行的过程中，当显示了搜索界面后开始执行测试搜索功能的测试用例。这样可减少、甚至是消除测试用例对测试环境的依赖。

在本实施例中，将已注入测试用例的待测试文件替换待反馈数据中没注入测试用例的待测试文件，以生成响应数据。

步骤s106，所述网页服务器100将所述响应数据发送至所述客户端401。

在本实施例中，并将响应数据通过网络300发送给客户端401。

步骤s107，所述客户端401执行所述响应数据，以得测试结果。

在本实施例中，客户端401根据响应数据对网页进行加载。启动待测试功能。可以是运行与待测试功能对应的注入了测试用例的待测试文件，以获得当前测试环境下的测试结果。可选地，可以使用javascriptobjectnotation进行测试结果收集。

步骤s108，所述客户端401将所述测试结果发送至所述网页服务器100。

在本实施例中，将收集的测试结果发送给网页服务器100。例如，将json格式的测试结果通过ajax发送给网页服务器100。

步骤s109，所述网页服务器100对所述测试结果进行展示。

在本实施例中，解析接收到的测试结果。集中展示不同网站服务对应的测试结果。以便对不同网站服务的测试结果进行处理，例如，当测试结果显示一项网站业务的业务逻辑存在逻辑问题，则对该网站也的业务逻辑顺序进行调整等。能够给网站开发人员提供从微观(单项前端业务功能)到宏观(网站前端整体业务功能)的统一监控，极大地提高业务功能和整个网站的稳定性和维护性。

第二实施例

如图6所示，是本发明较佳实施例提供的一种网页前端测试方法，所述方法应用于网页服务器100，所述网页前端测试方法包括以下步骤：

步骤s201，接收所述客户端401发送的访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识。

在本实施例中，解析访问请求数据，从访问请求数据中获取对需要测试的待测试功能的测试标识。测试标识包括待测试文件标识及待测试功能标识。待测试文件标识可以是待测试文件名称，例如，待测试文件名称可以是demo.js；待测试功能标识可以是待测试功能的名称，例如，待测试功能的名称可以是democontroller.demofunction。客户端401根据待测试业务信息生成待测试文件标识及待测试功能标识。

步骤s202，根据所述测试标识，获得与待测试功能对应的测试用例。

在本实施例中，测试用例、及测试用例与待测功能之间的对应关系可预先存储在网页服务器100内。因此，当从测试标识中解析出待测试功能标识后，根据待测试功能标识，利用测试用例与待测功能之间的对应关系从预先存储的测试用例中获取与待测试功能对应的测试用例。这样提高查找与待测试功能对应的测试用例的精确性和效率。

步骤s203，根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件。

在本实施例中，待反馈数据可以是反馈给客户端401以便客户端401加载网页的数据及实现各种前端网站服务的数据。待反馈数据可以包括，但不限于包括：待测试文件、暂不测试的功能对应的脚本文件、前端css样式文件、jpg、png等图片资源文件。

步骤s204，根据所述测试用例及待反馈数据，生成响应数据。

在本实施例中，所述网页服务器100将获取的所述测试用例动态的注入所述待反馈数据，以生成响应数据。测试用例与所有的脚本文件分离，在测试时通过将获取与待测试功能对应的测试用例动态注入待反馈数据中，有效的降低了响应数据的耦合度，使响应数据被优化，减轻客户端401加载响应数据的负担。同时通过动态注入测试用例降低甚至脱离测试用例对运行环境的依赖，实现任意环境的测试用例引入，极大地提高测试用例可维护性以及测试效率。可选地，执行步骤s204的方式可以是根据所述待测试文件标识从所述待反馈数据中获取对应的所述待测试文件；根据与所述待测试功能标识对应的业务规则将所述测试用例注入所述待测试文件。

步骤s205，将所述响应数据发送至所述客户端401，以获得所述客户端401反馈的测试结果，其中，所述测试结果由所述客户端401执行所述响应数据后生成。

步骤s206，对所述测试结果进行展示。

在本实施例中，解析接收到的测试结果。集中展示不同网站服务对应的测试结果。以便对不同网站服务的测试结果进行处理，例如，当测试结果显示一项网站业务的业务逻辑存在逻辑问题，则对该网站也的业务逻辑顺序进行调整等。能够给网站开发人员提供从微观(单项前端业务功能)到宏观(网站前端整体业务功能)的统一监控，极大地提高业务功能和整个网站的稳定性和维护性。

第三实施例

请参照图7，是本发明较佳实施例提供的应用于网页服务器100的网页前端测试装置200。网页前端测试装置200包括：接收模块201、获取模块202、生成模块203及发送模块204。

接收模块201，用于接收所述客户端401发送的访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识。

在本发明实施例中，步骤s201可以由接收模块201执行。

获取模块202，用于根据所述测试标识，获得与待测试功能对应的测试用例；及还用于根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件。

在本实施例中，步骤s202、步骤s203、步骤s103步骤s104可以由获取模块202执行。

生成模块203，用于根据所述测试用例及待反馈数据，生成响应数据。

在本实施例中，步骤s204及步骤s105可以由生成模块203执行。需要说明的是，子步骤s1051及子步骤s1051也可以由生成模块203执行。生成模块203执行步骤s204或步骤s105的方式可以是将获取的所述测试用例动态的注入所述待反馈数据，以生成响应数据。可选地，所述测试用例动态的注入通过如下方式：根据所述待测试文件标识从所述待反馈数据中获取对应的所述待测试文件，再根据与所述待测试功能标识对应的业务规则将所述测试用例注入所述待测试文件。

发送模块204，用于将所述响应数据发送至所述客户端401，以获得所述客户端401反馈的测试结果，其中，所述测试结果由所述客户端401执行所述响应数据后生成。

在本实施例中，步骤s205及步骤s106可以由发送模块204执行。

在本实施例中，网页前端测试装置200还包括展示模块，所述展示模块用于对所述测试结果进行展示。可选地，步骤s109及步骤s206可以由展示模块执行。

综上所述，本发明实施例提供的一种网页前端测试方法及装置。所述方法应用于相互通信连接的客户端与网页服务器。所述方法包括：客户端响应测试指令，生成访问请求数据，其中，所述访问请求数据包括用于标识需要测试的待测试功能的测试标识；将所述访问请求数据发送给所述网页服务器；所述网页服务器根据所述测试标识，获得与待测试功能对应的测试用例；根据访问请求数据，获取待反馈数据，其中，所述待反馈数据包括与所述待测试功能对应的待测试文件；根据所述测试用例及待反馈数据，生成响应数据；将所述响应数据发送至所述客户端；所述客户端执行所述响应数据，以得测试结果。降低测试过程中客户端加载数据的耦合度，降低测试用例对测试环境的依赖，提高测试效率。测试用例也更加方便管理维护。进而减少网页前端测试工作的人力成本和时间成本。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。