一种自动对页面渲染进行截图的方法及装置与流程

本发明涉及计算机技术领域，尤其涉及一种自动对页面渲染进行截图的方法及装置。

背景技术：

随着网络应用的日益发达,用户上网已经成为了及其普遍的习惯。但是在点击网页过程中，经常遇到的问题就是网页加载慢，甚至很长一段时间网页都不能够加载成功。如此，将会导致用户失去耐心，甚至关闭页面。大大降低的用户的体验。而很多时候，网页加载较慢可能是网速慢导致的前端页面加载较慢，但是也有时候是因为网络接口响应时间过长导致的。测试人员需要确切的知道页面加载较慢的具体原因，然后根据具体原因采取有效的措施，实现页面渲染性能优化。

在以往的页面前端性能测试过程中，测试人员由于无法直观的过程化监控页面渲染，所以也无法直观的评估页面性能，也就不能清楚的知道页面加载过慢的具体原因。所以，如何清楚的确定页面加载过慢的原因是本发明要解决的技术问题。

技术实现要素：

为解决上述技术问题，本发明提供一种自动对页面渲染进行截图的方法，通过该方法，清楚的确定页面加载过慢的原因，方便测试人员根据页面加载过慢的具体原因，采取有效的措施，实现页面渲染性能的优化。

本发明解决上述技术问题的技术方案如下：

第一方面，本发明实施例提供了一种自动对页面渲染进行截图的方法，该方法包括：

打开测试页面；

在测试页面渲染过程中，根据预设的截图频率和循环次数，自动对测试页面进行截图。

本发明的有益效果是：本发明提供的一种自动对页面渲染进行截图的方法，根据预设的截图频率和循环次数，自动打开测试页面后，在测试页面渲染过程中对测试页面进行截图，测试人员可以根据截图确定页面打开过程中的页面加载时间。以及，根据后台生成的日志确定接口响应时间。最终，根据页面渲染时间和接口响应时间，确定页面加载较慢的原因。并根据原因对页面前端性能进行优化。

进一步，在打开测试页面之前，方法还包括：

打开浏览页面；

从浏览页面输入与测试页面相关网页对应的链接信息，并点击进入与测试页面相关的网页；

从与测试页面相关的网页进入测试页面。

采用上述进一步的方案的有益技术效果在于，进入测试页面之前，首先需要通过浏览页面进入该测试页面。而本发明所采用的方法则是处理器通过读取存储器中存储的脚本，模拟人为操作，自动打开浏览测试页面，输入与测试页面对应的网址，进入与测试页面相关的网页，并从与测试页面相关网页进入测试页面。

进一步，从与测试页面相关的网页进入测试页面，具体包括：

接收用户输入的操作信息；

根据用户输入的操作信息，定位页面元素；

根据页面元素，对与测试页面相关的网页进行模拟操作，进入测试页面。

采用上述进一步的技术方案的有益技术效果在于，进入测试页面之前，需要定位页面元素，然后才能进入。因此，需要首先接收用户输入的操作信息，然后根据操作信息定位页面元素，并通过页面元素，实现对测试页面相关的网页进行模拟操作，进入测试页面。

进一步的，定位页面元素的方式包括如下方式之一：

通过元素的身份标识号码ID定位元素；

通过元素的名字定位元素；

通过标识名称定位元素；

通过数据类型定位元素；

通过层叠样式表定位元素；

通过可扩展标记语言路径语言定位元素。

采用上述进一步的技术方案的有益技术效果在于:定位页面元素方式可以包括多种，本发明中仅是列举了上述几种。

第二方面，本发明实施例提供了一种自动对页面渲染进行截图的装置，该文件装置包括：处理单元,用于打开测试页面；

并在测试页面渲染过程中,根据预设的截图频率和循环次数,自动对测试页面进行截图。

上述方案的有益技术效果在于，处理单元根据预设的截图频率和循环次数，自动打开测试页面后，在测试页面渲染过程中对测试页面进行截图，测试人员可以根据截图确定页面打开过程中的页面加载时间。以及，根据后台生成的日志确定接口响应时间。最终，根据页面渲染时间和接口响应时间，确定页面加载较慢的原因。并根据原因对页面前端性能进行优化。

进一步的，处理单元具体用于：

打开浏览页面；

从浏览页面输入与测试页面相关网页对应的链接信息，并点击进入与测试页面相关的网页；

从与测试页面相关的网页进入测试页面。

采用上述进一步的方案的有益技术效果在于，进入测试页面之前，首先需要通过浏览页面进入该测试页面。而本发明所采用的方法则是处理单元通过读取存储器中存储的脚本，模拟人为操作，自动打开浏览测试页面，输入与测试页面对应的网址，进入与测试页面相关的网页，并从与测试页面相关网页进入测试页面。

进一步的，装置还包括：

接收单元，用于接收用户输入的操作信息；

处理单元还用于，根据用户输入的操作信息，定位页面元素；

根据页面元素，对与测试页面相关的网页进行模拟操作，进入测试页面。

采用上述进一步的技术方案的有益技术效果在于，进入测试页面之前，需要定位页面元素，然后才能进入。因此，需要接收单元接收用户输入的操作信息，处理单元根据操作信息定位页面元素，并通过页面元素，实现对测试页面相关的网页进行模拟操作，进入测试页面。

进一步的，处理单元定位页面元素的方式包括如下方式之一：

通过元素的身份标识号码ID定位元素；

通过元素的名字定位元素；

通过标识名称定位元素；

通过数据类型定位元素；

通过层叠样式表定位元素；

通过可扩展标记语言路径语言定位元素。

采用上述进一步的技术方案的有益技术效果在于，定位页面元素方式可以包括多种，本发明中仅是列举了上述几种。

附图说明

图1为本发明实施例提供的一种自动对页面渲染进行截图的方法流程示意图；

图2为从与测试页面相关的网页进入测试页面的流程示意图；

图3为本发明实施例提供的一种自动对页面渲染进行截图的装置结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、接口、技术之类的具体细节，以便透切理解本发明。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

图1为本发明实施例提供的一种自动对页面渲染进行截图的方法流程示意图。该方法可以适用于任何一种具有自动处理功能的终端，例如个人电脑(personal Computer，简称PC)、手机、paid等等。在本实施例中，以PC机执行该方法为例进行说明。具体如图1所示，该方法包括：

步骤110，打开测试页面。

具体的，打开测试页面，这里的测试页面并非人为操作。而是通过PC机中的处理器自动读取已经存储在存储器中的脚本语言(例如，在本实施例中所采用的脚本语言为phthon中的selenium语言)，模拟人为操作自动打开测试页面。

步骤120，在测试页面渲染过程中，根据预设的截图频率和循环次数，自动对测试页面进行截图。

具体的，在步骤110中已经模拟人为操作打开了测试页面。那么在页面加载过程中，处理器就可以根据预设的截图频率和循环次数，自动对测试页面进行截图了。截图之后，则保存至存储器中的一个预设的地址中，以方便测试人员对截图进行分析。

当然，在测试页面进行渲染过程中，首先处理器可以自动根据预设的截图频率不停的对页面进行截图。由此，从不同的截图中获取页面加载过程中加载较慢的截图。而设置循环次数，则是为了能够更加精确的分析页面加载过程中，哪些页面加载较慢。这里的循环次数计数的基准是页面加载完成一次，算是一次循环。然后继续第二次重新加载页面，并不断进行页面截图。

另外，读者还应理解的是，上文中所述的在页面渲染过程中进行截图，每个截图中均记录了截图时间，所以可以根据每一幅截图中的时间，确定从上一副页面截图到当前页面截图，页面渲染所花费的时间。而且，在一次循环中，设定第一次截图是从页面渲染开始，而最后一次截图是页面渲染结束。也既是第一幅截图记录页面渲染开始的时间，最后一副截图记录的是页面渲染结束的时间。那么，测试人员则可以清楚地知道从页面渲染开始到页面渲染结束，一共花费的时间。进而确定页面前端性能差是否是因为页面渲染过程太长导致。

优选的，因为设置了循环次数，也即是每一次循环，都会根据不同的页面截图频率获取至少两个页面截图。那么，不同的页面截图过程中，由于页面渲染时间会有偏差，同一频率所获取的页面截图也是稍有不同的。也既是最终页面加载完成时间可能会有偏差。所以，根据每一次循环所述获取的页面渲染时间，计算一个页面渲染时间平均值(从页面渲染开始到结束的时间平均值)。

此外，测试人员还需要从后台服务器中所生成的日志中，获取接口响应时间。当然，每一次循环，均会获取一次接口相应时间。那么也需要计算接口响应时间平均值。测试人员根据页面渲染时间平均值和接口响应时间平均值，判断导致页面前端性能不佳的最终原因。

例如，页面加载时间平均值，与页面加载时间平均值和接口响应时间平均值总和之间的比值大于预设阈值(例如60％)。那么，说明页面加载时间过长，测试人员需要对页面加载过程进行优化。或者，接口响应时间平均值，与页面加载时间平均值和接口响应时间平均值总和之间的比值大于预设阈值时，则说明接口响应时间过长，测试人员需要对接口进行优化。当然，比值并非是绝对的，还要考虑页面加载时间平均值和接口响应时间平均值的大小。如果二者中的一个数值很大，或者两个数值都很大，均以超出与之对应的预设阈值，那么测试人员仍然需要对二者中的一个或者全部进行优化。

而在打开测试页面之前，该方法还包括步骤130～步骤150。

具体的，步骤130，打开浏览页面。

步骤140，从浏览页面输入与测试页面相关网页对应的链接信息，并点击进入与测试页面相关的网页。

具体的，因为测试页面可能并非是直接可以获取的，可能需要从浏览页面输入与测试页面相关网页对应的链接信息后，才能进入与测试页面相关的网页。而具体的链接信息可以包括：与测试页面相关网页对应的网址、或者搜索与测试页面相关网页对应的全称、简称或者关键字等。点击进入与测试页面相关的网页。当然，如果输入的是与测试页面相关网页对应的名称信息，甚至是关键字信息时，可能直接进入的页面并非是当前所需要的最终与测试页面相关的网页，那么则需要再次点击与测试页面相关的网页，然后进入。

步骤150，从与测试页面相关的网页进入测试页面。

具体的，测试页面可能是某一网站的一个网页，例如将一个个人腾讯邮箱页面作为测试页面。那么，首先需要从浏览页面输入腾讯邮箱的网址，进入腾讯邮箱。然后，通过输入用户名和密码进入个人邮箱，最终才能够进入到测试页面，也即是个人腾讯邮箱页面。

当然，步骤130至步骤150均是PC机中的处理器通过读取存储器中已经存储从脚本语言，然后根据已经存储的脚本语言，模拟人为操作，执行上述相应的步骤。

而步骤150具体还可以包括步骤1501～步骤1503，具体如图2所示，图2为从与测试页面相关的网页进入测试页面的流程示意图。

步骤1501，接收用户输入的操作信息。

步骤1502，根据用户输入的操作信息定位页面元素。

步骤1503，根据页面元素，对与测试页面相关的网页进行模拟操作，进入测试页面。

具体的，从与测试页面相关的网页进入测试页面之前，首先需要在与测试页面相关的网页中定位页面元素，只有定位页面元素后，处理器才能够读取相应的脚本语言，进入测试页面。而这里的页面元素也即是脚本语言中的部分程序代码。定位页面元素之前，首先需要用户点击与测试页面相关的网页中的预定位置。也即是PC机首先需要接收用户输入的操作，例如用户点击的是与测试页面相关的网页中的用户名输入位置和密码输入位置。然后PC机中的处理器接收到用户的输入操作后，定位至与测试页面相关的网页中的用户名输入位置和密码输入位置对应的程序代码处，确定对应的程序代码后，读取程序代码(程序代码中包括用户名和密码)，并执行相应的操作。进入测试页面。

而具体的定位页面元素的方式可以包括如下任意一种：通过元素的身份标识号码ID定位元素；通过元素的名字定位元素；通过标识名称定位元素；通过数据类型定位元素；通过层叠样式表定位元素；通过可扩展标记语言路径语言定位元素。

本发明提供的一种自动对页面渲染进行截图的方法，根据预设的截图频率和循环次数，自动打开测试页面后，在测试页面渲染过程中对测试页面进行截图，测试人员可以根据截图确定页面打开过程中的页面加载时间。以及，根据后台生成的日志确定接口响应时间。最终，根据页面渲染时间和接口响应时间，确定页面加载较慢的原因。并根据原因对页面前端性能进行优化。

相应地，本发明实施例还提供了一种自动对页面渲染进行截图的装置。图3为本发明实施例提供的一种自动对页面渲染进行截图的装置结构示意图。如图3所示，该装置包括：处理单元301。

具体的，处理单元301用于，用于打开测试页面。并在测试页面渲染过程中,根据预设的截图频率和循环次数,自动对测试页面进行截图。

处理单元301需要在打开测试页面之前，用于打开浏览页面。从浏览页面输入与测试页面相关网页对应的链接信息，并点击进入与测试页面相关的网页。从与测试页面相关的网页进入测试页面。

其中，该装置还包括：接收单元302，用于接收用户输入的操作信息。

处理单元301还用于，根据用户输入的操作信息，定位页面元素。根据页面元素，对与所述测试页面相关的网页进行模拟操作，进入测试页面。

而处理单元301定位页面元素的方式包括如下方式之一：

通过元素的身份标识号码ID定位元素；通过元素的名字定位元素；通过标识名称定位元素；通过数据类型定位元素；通过层叠样式表定位元素；通过可扩展标记语言路径语言定位元素。

该装置的各部件所执行的功能已经在上述实施例一种自动对页面渲染进行截图的方法中做了详细的介绍，这里不再赘述。

本发明实施例提供的一种自动对页面渲染进行截图的装置，处理单元根据预设的截图频率和循环次数，自动打开测试页面后，在测试页面渲染过程中对测试页面进行截图，测试人员可以根据截图确定页面打开过程中的页面加载时间。以及，根据后台生成的日志确定接口响应时间。最终，根据页面渲染时间和接口响应时间，确定页面加载较慢的原因。并根据原因对页面前端性能进行优化。

读者应理解，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。