CN105868096A - 用于在浏览器中显示web页面测试结果的方法、装置及设备 - Google Patents

Abstract

本申请公开了一种用于在浏览器中显示web页面测试结果的方法及装置，另一种用于在浏览器中显示web页面测试结果的方法及装置，以及一种电子设备。其中，所述一种用于在浏览器中显示web页面测试结果的方法包括：获取被测试web页面的测试结果信息；在所述web页面中查找与所述测试结果信息对应的可视页面元素；针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。采用本申请提供的方法，可以在浏览器窗口中直观地显示出与测试结果对应的页面元素的具体位置，便于测试人员快速判断测试结果的性质，从而有效减少错误检测、排除以及修复的时间，提高整个测试阶段的效率。

Description

用于在浏览器中显示web页面测试结果的方法、装置及设备

技术领域

本申请涉及软件测试领域，具体涉及一种用于在浏览器中显示web页面测试结果的方法。本申请同时提供一种用于在浏览器中显示web页面测试结果的装置、以及一种电子设备。

背景技术

随着web前端技术的迅速发展，作为与终端用户之间进行交互的载体，网页承载的功能越来越多，样式也越来越复杂。在一个网页中，通常包含多种网页元素，超链接则是其中之一。通过超链接可以将某一网页与其他网页相互联系在一起，由于超链接的存在才使得用户可以随心所欲地在互联网中进行浏览。

但是，如果用户点击web页面中的某个超链接时出现不可达的现象，即，用户无法访问该链接对应的网页或者图片等资源，将会对用户体验造成很大影响，并可能进而影响后续的其他访问，对于商业网站来说，无疑会减少向用户提供或者推荐信息的机会，甚至可能会造成潜在的经济损失。因此对于web页面中超链接有效性的测试，是每个商业网站都必不可少的。

目前有一些工具，可以对web页面中的超链接的有效性进行检测，例如，HTML Link Validator。但是这些工具通常只是通过文本的方式，告知测试人员被测试页面中所有链接的有效性，请参见图1，其为HTML Link Validator输出的检测结果的示意图。如果测试人员对于检测结果有疑问，需要在被测试页面上进一步定位与某个检测结果对应的超链接，则只能在被测试web页面的源代码中去搜索，并根据源代码中的上下文在web页面中进行一一比对来判断该超链接在web页面中的准确位置。

通过上面的描述可以看出，HTML Link Validator或者类似工具由于采用文本形式输出web页面超链接的测试结果信息，测试人员需要通过人工的方式在对应的web页面中定位与测试结果对应的具体超链接，不便于测试人员快速确定失效链接的性质，增加了错误检测和修复的时间，影响整个测试阶段的效率。

发明内容

本申请提供一种用于在浏览器中显示web页面测试结果的方法，以解决现有的测试结果输出方式需要人工定位页面元素、导致错误检测和修复效率低的问题。本申请另外提供一种用于在浏览器中显示web页面测试结果的装置、以及一种电子设备。

本申请提供一种用于在浏览器中显示web页面测试结果的方法，包括：

获取被测试web页面的测试结果信息；

在所述web页面中查找与所述测试结果信息对应的可视页面元素；

针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

可选的，所述测试结果信息是指，通过对所述web页面中的超链接进行测试，得到的无效超链接的相关信息。

可选的，所述测试结果信息包括：标识所述无效超链接的页面标签和属性值，以及与所述无效超链接对应的具体错误原因。

相应的，所述在所述web页面中查找与所述测试结果信息对应的可视页面元素是指，根据所述测试结果信息中包含的页面标签和属性值，在所述web页面中查找对应的可视页面元素。

可选的，所述在所述web页面中查找与所述测试结果信息对应的可视页面元素，包括：

根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素；

判断找到的页面元素是否为可视元素；

若是，所述页面元素即为与所述测试结果信息对应的可视页面元素；

若否，查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

可选的，在所述web页面中找到对应的页面元素后，执行下述操作：

为所述页面元素设置预先设定的属性值，表明存在与所述页面元素对应的测试结果信息。

可选的，所述在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息是指，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号。

可选的，所述针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号，包括：

获取所述可视页面元素在所述浏览器窗口中的位置信息；

按照预先设定的方式在所述位置信息对应的区域内显示所述数字序号。

可选的，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号后，执行下述操作：

监测所述数字序号是否获得焦点；若是，执行下述操作：

获取所述数字序号在所述浏览器窗口中的位置信息；

根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

可选的，在所述信息扩展区域中显示的信息还包括：导航控件，所述导航控件用于跳转到与其他测试结果信息对应的页面元素；

相应的，所述方法还包括：

接收对所述信息扩展区域中的导航控件的触控操作；

根据所述信息扩展区域对应的数字序号获取本次跳转的目标测试结果；

在所述web页面中查找与所述目标测试结果对应的目标页面元素；

更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

可选的，所述方法包括：

采用预先设定的时间间隔，定期更新在所述浏览器窗口中显示测试结果相关信息的位置，使得当某页面元素由隐藏状态变为可视时，将与该页面元素对应的测试结果的相关信息更新显示到其所在的区域中。

相应的，本申请还提供一种用于在浏览器中显示web页面测试结果的装置，包括：

测试结果获取单元，用于获取被测试web页面的测试结果信息；

页面元素查找单元，用于在所述web页面中查找与所述测试结果信息对应的可视页面元素；

测试结果显示单元，用于针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

可选的，所述测试结果获取单元获取的测试结果信息是指，对所述web页面中的超链接进行测试得到的无效超链接的相关信息。

可选的，所述页面元素查找单元具体用于，根据所述测试结果信息中包含的页面标签和属性值，在所述web页面中查找对应的可视页面元素。

可选的，所述页面元素查找单元包括：

页面元素查找子单元，用于根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素；

可视判断子单元，用于判断找到的页面元素是否为可视元素；

直接设置子单元，用于当所述可视判断子单元的输出为“是”时，将所述页面元素作为与所述测试结果信息对应的可视页面元素；

父元素查找子单元，用于当所述可视判断子单元的输出为“否”时，查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

可选的，所述页面元素查找单元还包括：

属性设置子单元，用于在所述web页面中找到对应的页面元素后，为所述页面元素设置预先设定的属性值，表明存在与所述页面元素对应的测试结果信息。

可选的，所述测试结果显示单元具体用于，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号。

可选的，所述测试结果显示单元包括：

位置信息获取子单元，用于获取所述可视页面元素在所述浏览器窗口中的位置信息；

信息显示子单元，用于按照预先设定的方式在所述位置信息对应的区域内显示所述数字序号。

可选的，所述装置包括：

焦点监测单元，用于在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号后，监测所述数字序号是否获得焦点；

序号位置获取单元，用于当所述焦点监测单元监测到所述数字序号获得焦点后，获取所述数字序号在所述浏览器窗口中的位置信息；

错误原因显示单元，用于根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

可选的，所述错误原因显示单元显示的信息扩展区域中还包括：导航控件，所述导航控件用于跳转到与其他测试结果信息对应的页面元素；

相应的，所述装置还包括：

触控接收单元，用于接收对所述信息扩展区域中的导航控件的触控操作；

目标获取单元，用于根据所述信息扩展区域对应的数字序号获取本次跳转的目标测试结果；

目标查找单元，用于在所述web页面中查找与所述目标测试结果对应的目标页面元素；

跳转执行单元，用于更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

可选的，所述装置包括：

定时刷新单元，用于采用预先设定的时间间隔，定期更新在所述浏览器窗口中显示测试结果相关信息的位置，使得当某页面元素由隐藏状态变为可视时，将与该页面元素对应的测试结果的相关信息更新显示到其所在的区域中。

此外，本申请还提供一种用于在浏览器中显示web页面测试结果的方法，包括：

接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息；

根据所述web页面的URL信息，获取所述web页面的原始代码；

将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中；

将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

可选的，采用如下方式获取所述web页面的原始代码：

根据所述web页面的URL信息，采用CasperJS工具获取所述原始代码。

可选的，所述将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中，采用如下方式实现：

采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中。

可选的，所述采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中，包括：

将所述原始代码转换为dom树的形式；

将所述Javascript代码以dom节点的方式添加到所述dom树中。

相应的，本申请还提供一种用于在浏览器中显示web页面测试结果的装置，包括：

请求接收单元，用于接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息；

代码获取单元，用于根据所述web页面的URL信息，获取所述web页面的原始代码；

代码修改单元，用于将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中；

结果返回单元，用于将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

可选的，所述代码获取单元具体用于，根据所述web页面的URL信息，采用CasperJS工具获取所述原始代码。

可选的，所述代码修改单元具体用于，采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中。

可选的，所述代码修改单元包括：

Dom树转换子单元，用于将所述原始代码转换为dom树的形式；

代码注入子单元，用于将所述Javascript代码以dom节点的方式添加到所述dom树中。

此外，本申请还提供一种电子设备，包括：显示器；处理器；存储器，用于存储浏览器，所述浏览器被所述处理器执行时，在所述显示器的至少一部分显示区域显示浏览器窗口，在所述浏览器窗口中显示被测试web页面，并针对与测试结果信息对应的可视页面元素，在所述浏览器窗口的相应显示区域中显示所述测试结果的相关信息。

可选的，所述测试结果的相关信息是指，标识所述测试结果的数字序号。

可选的，当所述数字序号所在显示区域获得焦点时，在所述浏览器窗口中显示与所述可视页面元素对应的信息扩展区域，并在所述信息扩展区域中显示所述测试结果包含的具体错误原因。

可选的，在所述信息扩展区域中显示的信息还包括：导航控件，用于跳转到与其他测试结果信息对应的页面元素；

相应的，当所述导航控件被触控时，在所述浏览器窗口中显示本次跳转的目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

与现有技术相比，本申请具有以下优点:

本申请提供的用于在浏览器中显示web页面测试结果的方法，首先获取被测试web页面的测试结果信息，然后在所述web页面中查找与测试结果信息对应的可视页面元素，并针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。采用上述方法，可以在浏览器窗口中直观地显示出与测试结果对应的页面元素的具体位置，便于测试人员快速判断测试结果的性质，并进一步做出是否需要修复以及如何修复的正确决定，从而有效减少错误检测、排除以及修复的时间，提高整个测试阶段的效率。

附图说明

图1是现有技术中HTML Link Validator工具输出的测试结果的示意图；

图2是本申请的一种用于在浏览器中显示web页面测试结果的方法实施例的流程图；

图3是本实施例提供的查找与所述测试结果信息对应的可视页面元素的处理流程图；

图4是本实施例提供的展示超链接测试结果的示意图；

图5是本申请的一种用于在浏览器中显示web页面测试结果的装置实施例的示意图；

图6是本申请的另一种用于在浏览器中显示web页面测试结果的方法实施例的流程图；

图7是本申请的另一种用于在浏览器中显示web页面测试结果的装置实施例的示意图；

图8是本申请的一种电子设备的实施例的示意图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

在本申请中，分别提供了一种用于在浏览器中显示web页面测试结果的方法及装置，另一种用于在浏览器中显示web页面测试结果的方法及装置，以及一种电子设备，在下面的实施例中逐一进行详细说明。

请参考图2，其为本申请的一种用于在浏览器中显示web页面测试结果的方法实施例的流程图。所述方法包括如下步骤：

步骤201：获取被测试web页面的测试结果信息。

一个web页面通常包含多种页面元素，例如：图片、文字、动画、超链接、表格、表单等，针对web页面的测试也可以是针对其中某一种或者几种元素进行的，例如：表格测试、表单测试、超链接测试等，

在本实施例的一个具体例子中，对web页面中包含的超链接的有效性进行测试，对于被测试web页面中包含的超链接，通过向服务器发送获取超链接对应的URL资源的请求，并对服务器响应的数据进行分析、验证，来判断所述超链接是否可达、以及是否指向了正确的图片或者页面等网络资源。并将不可达的或者指向不正确的超链接统一称为无效超链接，并记录相关信息。

上面给出的是对web页面进行测试的一个具体例子，在其他实施方式中，可以根据具体的业务需求针对不同的页面元素、采用不同的方法进行测试。本申请技术方案的核心在于对测试结果的展示，因此本实施例并不对具体的测试内容或者测试方式进行限定，只要在本步骤中可以获取被测试web页面的测试结果信息即可。

所述测试结果信息可以包括以下内容：被测试页面元素的标识，以及与被测试页面元素对应的具体错误原因。在上述具体例子中，所述测试结果信息包括：标识所述无效超链接的页面标签和属性值，以及与所述无效超链接对应的具体错误原因，其中所述页面标签和属性值，包括a标签和相应的href属性值(全部或者部分)，以及img标签和相应的src属性值(全部或者部分)。

步骤202：在所述web页面中查找与所述测试结果信息对应的可视页面元素。

本步骤根据在步骤201中获取的测试结果信息，在所述web页面中查找对应的可视页面元素。下面仍沿用上述对超链接的有效性进行测试的具体例子，对本步骤的处理过程作进一步说明，请参见附图3，该处理过程包括如下所示的步骤202-1至步骤202-4。

步骤202-1：根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素。

超链接元素在web页面中通常对应于a标签或img标签，因此在本步骤中根据测试结果信息中包含的a标签及对应的href属性值，或者img标签及对应的src属性值，在所述web页面中查找对应的页面元素。

找到与测试结果信息对应的页面元素后，可以进一步为该页面元素设置一个预先设置的属性值，表明已经处理过该页面元素(该页面元素有相应的测试结果信息与之对应)。这样在后续查找页面元素的过程中就不会再重复地找到该页面元素。

在具体实施时，可以使用jquery实现页面元素的查找功能，如：$("a[href＝'"+href+"'][checked！＝'checked']")，如果查找出多个符合条件的页面元素，则可以从中选取第一个。如果步骤201获取的测试结果信息中还包含了与测试结果对应的页面元素的id信息，则也可以综合使用该信息实现上述查找功能。对于找到的页面元素，可以采用下述语句为其设置相应的"checked"属性值：$(ele).attr("checked","checked")。

步骤202-2：判断找到的页面元素是否为可视元素，若是，执行步骤202-3，否则执行步骤202-4。

对于隐藏在web页面中的元素，例如下拉菜单中的选项，通常无法获取其显示位置信息，针对这种情况，本实施例采取将测试结果信息显示在离其最近的父元素上的方式。因此在本步骤需要判断找到的页面元素是否为可见的(即：可视元素)，从而才能进一步确定后续的处理方式。

对于web页面来说，判断某个页面元素是否为可视元素，主要是判断该页面元素的css属性，包括：visible属性和display属性，但是同时也要兼顾考虑其父元素的可见性，如果父元素不可见那么子元素也必然不可见。因此可以采用递归的方式逐级向上检查父元素可见性，直到查找到body标签。代码示例如下所示：

步骤202-3：将所述页面元素作为与所述测试结果信息对应的可视页面元素。

执行到本步骤，说明在步骤202-1中找到的页面元素是可见的，可以在其显示区域中显示测试结果的相关信息，因此可以直接将该页面元素作为与所述测试结果信息对应的可视页面元素。

步骤202-4：查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

执行到本步骤，说明在步骤202-1中找到的页面元素是不可见的，因此在本步骤中需要逐级向上查找离它最近的可见父元素，即，从所述页面元素开始逐级向上查找第一个满足如下条件的父元素：该父元素是可见的，而且该父元素的各级父元素(如果存在)也都是可见的。满足上述条件的第一个父元素即为所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

在具体实施时，本步骤的查找过程的基本原理与步骤102-3是类似的，此处不再赘述。

通过上述步骤202-1至202-4，找到了与所述测试结果信息对应的可视页面元素。在具体实施时，由于一个web页面上通常包含多个被测试的页面元素，也可能包含多处错误，因此所述测试结果信息可能不只一条，而是由多条测试结果信息组成的集合，每条测试结果信息可以用递增的数字序号加以标识。

因此在本步骤中，可以针对每条测试结果信息执行上述处理，找到与每条测试结果信息对应的可视页面元素，并将相关信息存储在特定的数据结构中，然后将所述数据结构添加到数组或者链表中，为后续步骤的渲染显示做好准备。这里所说的相关信息可以包括：用于标识测试结果信息的数字序号、与所述测试结果信息对应的页面元素、其第一个可视父元素(当该页面元素不可见时)，还可以包括具体的错误原因等额外信息。

步骤203：针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

本步骤通过对可视页面元素的标记和渲染，最终在浏览器窗口中直观地呈现出与测试结果信息对应的页面元素的具体位置，便于测试人员快速判断测试结果的性质，提高错误修复效率。

具体说，将与展示测试结果相关的html代码添加到web页面中，这些代码通过设置显示样式等方式，指示浏览器如何在当前窗口中绘制、显示测试结果的相关信息，该过程也称为在web页面中添加标记的过程。如果在步骤202中获取了多个需要展示测试结果信息的可视页面元素，则根据数组或者链表中存储的信息依次进行标记处理，从而当浏览器在显示所述web页面时，能够根据标记信息在相应页面元素的显示位置处展现对应的测试结果信息。在具体实施中，上述过程也通常称为渲染过程。

在浏览器窗口中展示测试结果相关信息的方式有多种，例如，可以显示测试结果包含的具体错误原因，或者具体错误原因的关键词等。为了尽量减少对所述web页面原有显示内容的影响，在本实施例提供的显示超链接测试结果的具体例子中，针对在步骤202中找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的数字序号，测试人员可以通过该数字序号查询在步骤201中获取的测试结果信息，测从而获知测试结果的详细信息。

具体说，在浏览器窗口中显示与某可视页面元素对应的测试结果的数字序号时，可以先获取所述可视页面元素在浏览器窗口中的位置信息。例如，使用javascript中的getClientRects()方法，该方法会返回某个页面元素在浏览器窗口中的绝对位置，包含top、left、bottom、right、height、width六个属性，在得到所述可视页面元素的位置以后，就可以按照预先设定的方式在该位置信息对应的区域内渲染一个数字序号元素，该元素显示与之对应的测试结果信息的数字序号，例如在该区域的左上角或者左侧边界处显示数字序号。这里需要设置数字序号元素的position属性为absolute，并设置合适的背景色及宽度和高度，以达到既不影响原始页面的展示又可以清晰地标记出数字序号的效果。

进一步地，在上述展示测试结果数字序号的基础上，本实施例还提供了动态弹出测试结果详细信息(例如，具体错误原因)的技术方案。

具体说，监测所述数字序号元素是否获得焦点，并在所述数字序号元素获得焦点时，执行下述操作：获取所述数字序号元素在所述浏览器窗口中的位置信息；根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

在具体实施时，可以在数字序号元素针对mouseOver或者click等事件处理函数中，添加上述显示信息扩展区域的代码，所述信息扩展区域可以采用div标签实现，也可以称为详情div。按照常规的浏览习惯，可以在数字序号元素的下方显示所述详情div，在该显示过程中，详情div的定位方式与上述数字序号元素的定位方式类似，但是需要考虑数字序号元素的高度以保证其显示在数字序号元素的下方。详情div中显示的内容(例如，具体错误原因)可以从步骤202存储的数组或链表数据结构中获得。

进一步地，在上述动态展示信息扩展区域的基础上，本实施例还提供了在不同测试结果之间跳转的技术方案，即，导航功能。

具体说，在上述动态显示的信息扩展区域中，不仅可以包含测试结果的详细信息，还可以包含用于在不同测试结果之间跳转的导航控件。如果接收到测试人员对所述导航控件的触控操作，例如：鼠标点击操作，根据所述信息扩展区域对应的数字序号以及导航控件代表的跳转方式获取本次跳转的目标测试结果，并在所述web页面中查找与所述目标测试结果对应的目标页面元素，找到后，更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

请参见附图4，其为采用本申请的技术方案展示的超链接测试结果的示意图，在该示意图中，显示了2号测试结果信息的信息扩展区域，即详情div，在该详情div中的导航控件可以包含“上一个”和“下一个”两种导航方式，如果测试人员点击了“上一个”，则说明要跳转到1号测试结果信息，在步骤202中获得的数组或者链表数据结构中找到数字序号为1的测试结果信息，并获取对应的页面元素标识，然后在web页面中找到对应的页面元素，并触发浏览器窗口更新显示所述页面元素，并在详情div中显示与所述目标页面元素对应的具体错误原因，从而实现了不同错误之间的跳转显示功能。

需要说明的是，如果目标页面元素是隐藏的，那么可以尝试触发该元素的第一个可视父元素的onmouseover或onclick事件，将隐藏的目标页面元素展示出来，然后再重新更新与每个测试结果信息对应的页面元素的位置并显示。

进一步地，由于对于不可见的页面元素(例如，存在于某个下拉列表中的页面元素)，本实施例将相关的测试结果信息显示在与其最近的可视父元素所在显示区域中，针对这种情况，本实施例还提供了根据页面元素状态的变化，自动更新相应测试结果信息的显示位置的功能。

具体说，可以采用预先设定的时间间隔，定期检测与测试结果信息对应的页面元素的状态，使得当某页面元素由隐藏状态变为可见状态时(例如，其父元素上的事件被触发)，通过获取该页面元素在浏览器窗口中的位置信息并进行相应的渲染操作，将原来显示在其可视父元素所在显示区域中的测试结果信息，更新显示在该页面元素所在的显示区域中，从而保证测试结果信息能够自动更新显示到正确的位置上。

在具体实施时，可以使用javascript的定时器实现上述定时检测与更新功能，具体的定时时间可以根据具体需要进行设置，例如：每500毫秒执行一次。

此外，在具体实施时，也可以仅在信息扩展区域(例如，详情div)中显示关于测试结果的概要信息，同时提供关于详细信息的链接，如图4所示的“详情链接”，从而便于测试人员根据需要查看相关信息。上面描述的各种关于测试结果信息的展示方式，以及其它类似的变更，都不偏离本申请的核心，都在本申请的保护范围之内。

综上所述，本申请提供的用于在浏览器中显示web页面测试结果的方法，通过在web页面中查找与测试结果信息对应的可视页面元素，并在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息，从而在浏览器窗口中直观地展示出了与测试结果对应的页面元素的具体位置，便于测试人员快速判断测试结果的性质，并进一步做出是否需要修复以及如何修复的正确决定，从而有效减少错误检测、排除以及修复的时间，提高整个测试阶段的效率。

在上述的实施例中，提供了一种用于在浏览器中显示web页面测试结果的方法，与之相对应的，本申请还提供一种用于在浏览器中显示web页面测试结果的装置。请参看图5，其为本申请的一种用于在浏览器中显示web页面测试结果的装置实施例的示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

本实施例的一种用于在浏览器中显示web页面测试结果的装置，包括：测试结果获取单元501，用于获取被测试web页面的测试结果信息；页面元素查找单元502，用于在所述web页面中查找与所述测试结果信息对应的可视页面元素；测试结果显示单元503，用于针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

可选的，所述测试结果获取单元获取的测试结果信息是指，对所述web页面中的超链接进行测试得到的无效超链接的相关信息。

可选的，所述页面元素查找单元具体用于，根据所述测试结果信息中包含的页面标签和属性值，在所述web页面中查找对应的可视页面元素。

可选的，所述页面元素查找单元包括：

页面元素查找子单元，用于根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素；

可视判断子单元，用于判断找到的页面元素是否为可视元素；

直接设置子单元，用于当所述可视判断子单元的输出为“是”时，所述页面元素即为与所述测试结果信息对应的可视页面元素；

父元素查找子单元，用于当所述可视判断子单元的输出为“否”时，查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

可选的，所述页面元素查找单元还包括：

属性设置子单元，用于在所述web页面中找到对应的页面元素后，为所述页面元素设置预先设定的属性值，表明存在与所述页面元素对应的测试结果信息。

可选的，所述测试结果显示单元具体用于，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号。

可选的，所述测试结果显示单元包括：

位置信息获取子单元，用于获取所述可视页面元素在所述浏览器窗口中的位置信息；

信息显示子单元，用于按照预先设定的方式在所述位置信息对应的区域内显示所述数字序号。

可选的，所述装置包括：

焦点监测单元，用于在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号后，监测所述数字序号是否获得焦点；

序号位置获取单元，用于当所述焦点监测单元监测到所述数字序号获得焦点后，获取所述数字序号在所述浏览器窗口中的位置信息；

错误原因显示单元，用于根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

可选的，所述错误原因显示单元显示的信息扩展区域中还包括：导航控件，所述导航控件用于跳转到与其他测试结果信息对应的页面元素；

相应的，所述装置还包括：

触控接收单元，用于接收对所述信息扩展区域中的导航控件的触控操作；

目标获取单元，用于根据所述信息扩展区域对应的数字序号获取本次跳转的目标测试结果；

目标查找单元，用于在所述web页面中查找与所述目标测试结果对应的目标页面元素；

跳转执行单元，用于更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

可选的，所述装置包括：

定时刷新单元，用于采用预先设定的时间间隔，定期更新在所述浏览器窗口中显示测试结果相关信息的位置，使得当某页面元素由隐藏状态变为可视时，将与该页面元素对应的测试结果的相关信息更新显示到其所在的区域中。

在提供上述的一种用于在浏览器中显示web页面测试结果的方法的同时，本申请还提供另一种用于在浏览器中显示web页面测试结果的方法。请参考图6，其为本申请提供的另一种用于在浏览器中显示web页面测试结果的方法实施例的流程图，本实施例与第一实施例内容相同的部分不再赘述，下面重点描述不同之处。本申请提供的另一种用于在浏览器中显示web页面测试结果的方法包括：

步骤601：接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息。

在上述第一实施例提供的用于在浏览器中显示web页面测试结果的方法的基础上，本申请还提供了一种基于请求和响应模式来展示测试结果信息的方法，从而将在web页面上展示测试结果信息作为一种服务提供给测试人员，便于测试人员直观地获知与测试结果对应的页面元素的具体位置，缩短错误排查和修复时间，提高整个测试阶段的效率。

在具体应用中，测试人员可以通过在浏览器的地址栏中输入所述web页面URL的方式，发出所述请求，实施了本方法的服务端设备就可以接收到该请求，该请求中包含了被测试web页面的URL信息。

步骤602：根据所述web页面的URL信息，获取所述web页面的原始代码。

通常可以根据web页面的URL信息，通过向提供所述web页面的服务端发送HTTP请求和接收响应的方式，获取所述页面的原始代码(通常也称为源代码)。为了简化这一处理过程，也可以采用CasperJS工具实现。

CasperJS是一个开源的、用JavaScript编写的基于WebKit内核的导航脚本和测试工具，它简化了定义一个完成的导航操作所需的步骤，还提供了大量功能丰富的函数和方法，可以实现根据URL信息抓取网页内容、填充并提交表单编写测试套件等功能。

具体实施时，由于目前很多页面都采用异步加载技术，在页面刚打开时不会加载全部内容，而是当用户调整浏览器窗口的滚动条，使页面滚动显示到某个位置时才加载相应的页面内容，因此在使用CasperJS抓取所述web页面时，为了使得页面中的所有元素都被加载，需要设置viewport窗口大小，例如，将窗口的垂直大小设置为5000像素，同时在页面打开后等待5秒，5秒之后使用scrollToBootom()函数将页面自动下拉到底部，以保证更多内容被加载。同时考虑到抓取页面可能出现超时的情况，需要监听CasperJS的timeout事件，并在监测到该事件时进行相应的处理，例如，重新执行抓取操作。

步骤603：在所述web页面的原始代码中添加Javascript代码，所述Javascript代码用于在web页面中展示测试结果。

在步骤602中获取了所述web页面的原始代码，例如采用CasperJS获取了字符串格式的原始代码，在本步骤中，进一步在所述原始代码中添加javascript代码，所述javascript代码实现了本申请第一实施例所述的用于在浏览器中显示web页面测试结果的方法。当浏览器加载添加了所述javascript代码的web页面并执行所述javascript代码，就会在页面显示过程中展现与页面元素对应的测试结果信息。

将javascript代码添加到所述web页面中，可以采用不同的方式，例如通过文本编辑方式，添加到所述web页面原始代码的相应位置(例如，在body后面)。这种方式简单易行，但是效率比较低，而且难以实现自动化，针对这一问题本实施例提供一种优选实施方式，即采用nodejs(一种用于服务端的Javascript运行环境)中的cheerio插件将所述javascript代码注入到所述web页面的原始代码中。

具体说，以类似jquery的方式来操作所述原始代码，首先将所述web页面的原始代码转换为dom(文档对象模型—Document Object Model的英文缩写)树的格式，然后将所述javascript代码以dom节点的方式添加到所述dom树中，从而实现所述代码注入功能。请参见如下所示的代码片断，其中html为所述web页面的原始代码，annotation.js为所述javascript代码，通过append()实现注入功能。

步骤604：将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

在所述web页面的原始代码中添加了用于展示测试结果信息的javascript代码后，就可以将该web页面代码返回给请求方，例如通过上述代码片断中的res.write($.html())语句，所述请求方的浏览器获取所述web页面后，在浏览器窗口中加载以及显示所述web页面时，会执行注入的javascript代码的相应部分，从而在浏览器窗口中直观地显示出与测试结果对应的页面元素的具体位置。

综上所述，采用本申请提供的上述方法，不仅可以在测试设备的浏览器窗口中显示所述web页面，还能够显示与相关页面元素对应的测试结果信息，从而便于测试人员快速判断测试结果的性质，并进一步作出是否需要修复以及如何修复的正确决定，从而有效减少错误检测、排除以及修复的时间，提高整个测试阶段的效率。

在上述的实施例中，提供了另一种用于在浏览器中显示web页面测试结果的方法，与之相对应的，本申请还提供另一种用于在浏览器中显示web页面测试结果的装置。请参看图7，其为本申请的另一种用于在浏览器中显示web页面测试结果的装置实施例的示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

本实施例的另一种用于在浏览器中显示web页面测试结果的装置，包括：请求接收单元701，用于接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息；代码获取单元702，用于根据所述web页面的URL信息，获取所述web页面的原始代码；代码修改单元703，用于将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中；结果返回单元704，用于将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

可选的，所述代码获取单元具体用于，根据所述web页面的URL信息，采用CasperJS工具获取所述原始代码。

可选的，所述代码修改单元具体用于，采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中。

可选的，所述代码修改单元包括：

Dom树转换子单元，用于将所述原始代码转换为dom树的形式；

代码注入子单元，用于将所述Javascript代码以dom节点的方式添加到所述dom树中。

为了实现上述实施例，本申请还提出一种电子设备。请参看图8，其为本申请的电子设备实施例的示意图，该电子设备包括：显示器801；处理器802；存储器803；所述存储器用于存储浏览器，所述浏览器被所述处理器执行时，在所述显示器的至少一部分显示区域显示浏览器窗口，在所述浏览器窗口中显示被测试web页面，并针对与测试结果信息对应的可视页面元素，在所述浏览器窗口的相应显示区域中显示所述测试结果的相关信息。

可选的，所述测试结果的相关信息是指，标识所述测试结果的数字序号。

可选的，当所述数字序号所在显示区域获得焦点时，在所述浏览器窗口中显示与所述可视页面元素对应的信息扩展区域，并在所述信息扩展区域中显示所述测试结果包含的具体错误原因。

可选的，在所述信息扩展区域中显示的信息还包括：导航控件，用于跳转到与其他测试结果信息对应的页面元素；

相应的，当所述导航控件被触控时，在所述浏览器窗口中显示本次跳转的目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

本实施例提供的电子设备，能够在浏览器窗口中直观地显示出与测试结果对应的页面元素的具体位置，从而便于测试人员快速判断测试结果的性质，有效减少错误检测、排除以及修复的时间，提高整个测试阶段的效率。

本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (32)

1.一种用于在浏览器中显示web页面测试结果的方法，其特征在于，包括：

获取被测试web页面的测试结果信息；

在所述web页面中查找与所述测试结果信息对应的可视页面元素；

针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

2.根据权利要求1所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述测试结果信息是指，通过对所述web页面中的超链接进行测试，得到的无效超链接的相关信息。

3.根据权利要求2所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述测试结果信息包括：标识所述无效超链接的页面标签和属性值，以及与所述无效超链接对应的具体错误原因。

相应的，所述在所述web页面中查找与所述测试结果信息对应的可视页面元素是指，根据所述测试结果信息中包含的页面标签和属性值，在所述web页面中查找对应的可视页面元素。

4.根据权利要求3所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述在所述web页面中查找与所述测试结果信息对应的可视页面元素，包括：

根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素；

判断找到的页面元素是否为可视元素；

若是，所述页面元素即为与所述测试结果信息对应的可视页面元素；

若否，查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

5.根据权利要求4所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，在所述web页面中找到对应的页面元素后，执行下述操作：

为所述页面元素设置预先设定的属性值，表明存在与所述页面元素对应的测试结果信息。

6.根据权利要求4所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息是指，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号。

7.根据权利要求6所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号，包括：

获取所述可视页面元素在所述浏览器窗口中的位置信息；

按照预先设定的方式在所述位置信息对应的区域内显示所述数字序号。

8.根据权利要求6-7任一所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号后，执行下述操作：

监测所述数字序号是否获得焦点；若是，执行下述操作：

获取所述数字序号在所述浏览器窗口中的位置信息；

根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

9.根据权利要求8所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，在所述信息扩展区域中显示的信息还包括：导航控件，所述导航控件用于跳转到与其他测试结果信息对应的页面元素；

相应的，所述方法还包括：

接收对所述信息扩展区域中的导航控件的触控操作；

根据所述信息扩展区域对应的数字序号获取本次跳转的目标测试结果；

在所述web页面中查找与所述目标测试结果对应的目标页面元素；

更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

10.根据权利要求1所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，包括：

采用预先设定的时间间隔，定期更新在所述浏览器窗口中显示测试结果相关信息的位置，使得当某页面元素由隐藏状态变为可视时，将与该页面元素对应的测试结果的相关信息更新显示到其所在的区域中。

11.一种用于在浏览器中显示web页面测试结果的装置，其特征在于，包括：

测试结果获取单元，用于获取被测试web页面的测试结果信息；

页面元素查找单元，用于在所述web页面中查找与所述测试结果信息对应的可视页面元素；

测试结果显示单元，用于针对找到的可视页面元素，在浏览器窗口的相应显示区域中显示与其对应的测试结果的相关信息。

12.根据权利要求11所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述测试结果获取单元获取的测试结果信息是指，对所述web页面中的超链接进行测试得到的无效超链接的相关信息。

13.根据权利要求12所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述页面元素查找单元具体用于，根据所述测试结果信息中包含的页面标签和属性值，在所述web页面中查找对应的可视页面元素。

14.根据权利要求13所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述页面元素查找单元包括：

页面元素查找子单元，用于根据所述测试结果信息包含的页面标签和属性值，在所述web页面中查找对应的页面元素；

可视判断子单元，用于判断找到的页面元素是否为可视元素；

直接设置子单元，用于当所述可视判断子单元的输出为“是”时，将所述页面元素作为与所述测试结果信息对应的可视页面元素；

父元素查找子单元，用于当所述可视判断子单元的输出为“否”时，查找所述页面元素的第一个可视父元素，并将该父元素作为与所述测试结果信息对应的可视页面元素。

15.根据权利要求14所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述页面元素查找单元还包括：

属性设置子单元，用于在所述web页面中找到对应的页面元素后，为所述页面元素设置预先设定的属性值，表明存在与所述页面元素对应的测试结果信息。

16.根据权利要求14所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述测试结果显示单元具体用于，在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号。

17.根据权利要求16所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述测试结果显示单元包括：

位置信息获取子单元，用于获取所述可视页面元素在所述浏览器窗口中的位置信息；

信息显示子单元，用于按照预先设定的方式在所述位置信息对应的区域内显示所述数字序号。

18.根据权利要求16-17任一所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述装置包括：

焦点监测单元，用于在浏览器窗口的相应显示区域中显示标识所述测试结果的数字序号后，监测所述数字序号是否获得焦点；

序号位置获取单元，用于当所述焦点监测单元监测到所述数字序号获得焦点后，获取所述数字序号在所述浏览器窗口中的位置信息；

错误原因显示单元，用于根据所述位置信息，按照预先设定的方式显示信息扩展区域，并在所述信息扩展区域中显示对应于所述数字序号的测试结果所包含的具体错误原因。

19.根据权利要求18所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述错误原因显示单元显示的信息扩展区域中还包括：导航控件，所述导航控件用于跳转到与其他测试结果信息对应的页面元素；

相应的，所述装置还包括：

触控接收单元，用于接收对所述信息扩展区域中的导航控件的触控操作；

目标获取单元，用于根据所述信息扩展区域对应的数字序号获取本次跳转的目标测试结果；

目标查找单元，用于在所述web页面中查找与所述目标测试结果对应的目标页面元素；

跳转执行单元，用于更新浏览器窗口的显示内容，显示所述目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。

20.根据权利要求11所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述装置包括：

定时刷新单元，用于采用预先设定的时间间隔，定期更新在所述浏览器窗口中显示测试结果相关信息的位置，使得当某页面元素由隐藏状态变为可视时，将与该页面元素对应的测试结果的相关信息更新显示到其所在的区域中。

21.一种用于在浏览器中显示web页面测试结果的方法，其特征在于，包括：

接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息；

根据所述web页面的URL信息，获取所述web页面的原始代码；

将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中；

将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

22.根据权利要求21所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，采用如下方式获取所述web页面的原始代码：

根据所述web页面的URL信息，采用CasperJS工具获取所述原始代码。

23.根据权利要求21所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中，采用如下方式实现：

采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中。

24.根据权利要求23所述的用于在浏览器中显示web页面测试结果的方法，其特征在于，所述采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中，包括：

将所述原始代码转换为dom树的形式；

将所述Javascript代码以dom节点的方式添加到所述dom树中。

25.一种用于在浏览器中显示web页面测试结果的装置，其特征在于，包括：

请求接收单元，用于接收在web页面上显示测试结果的请求，所述请求中至少包含所述web页面的URL信息；

代码获取单元，用于根据所述web页面的URL信息，获取所述web页面的原始代码；

代码修改单元，用于将执行如权利要求1所述方法的Javascript代码添加到所述web页面的原始代码中；

结果返回单元，用于将修改后的web页面代码返回给请求方，供所述请求方在浏览器中加载所述web页面并显示测试结果的相关信息。

26.根据权利要求25所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述代码获取单元具体用于，根据所述web页面的URL信息，采用CasperJS工具获取所述原始代码。

27.根据权利要求25所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述代码修改单元具体用于，采用nodejs中的cheerio插件将所述Javascript代码注入到所述web页面的原始代码中。

28.根据权利要求27所述的用于在浏览器中显示web页面测试结果的装置，其特征在于，所述代码修改单元包括：

Dom树转换子单元，用于将所述原始代码转换为dom树的形式；

代码注入子单元，用于将所述Javascript代码以dom节点的方式添加到所述dom树中。

29.一种电子设备，其特征在于，所述电子设备包括：

显示器；

处理器；

存储器，用于存储浏览器，所述浏览器被所述处理器执行时，在所述显示器的至少一部分显示区域显示浏览器窗口，在所述浏览器窗口中显示被测试web页面，并针对与测试结果信息对应的可视页面元素，在所述浏览器窗口的相应显示区域中显示所述测试结果的相关信息。

30.根据权利要求29所述的电子设备，其特征在于，所述测试结果的相关信息是指，标识所述测试结果的数字序号。

31.根据权利要求30所述的电子设备，其特征在于，当所述数字序号所在显示区域获得焦点时，在所述浏览器窗口中显示与所述可视页面元素对应的信息扩展区域，并在所述信息扩展区域中显示所述测试结果包含的具体错误原因。

32.根据权利要求31所述的电子设备，其特征在于，在所述信息扩展区域中显示的信息还包括：导航控件，用于跳转到与其他测试结果信息对应的页面元素；

相应的，当所述导航控件被触控时，在所述浏览器窗口中显示本次跳转的目标页面元素，并在对应的信息扩展区域中显示与所述目标页面元素对应的具体错误原因。