[发明专利]用于验证Web页面布局的方法和系统

说明书

技术领域

本发明涉及数据处理领域。更确切的，本发明涉及用于验证Web页面布局的方法和系统。

背景技术

如今Web页面已经成为最重要也是最普遍使用的用户界面之一。然而，由于Web页面布局的灵活性以及浏览器之间互不兼容，自动验证Web页面布局就变得比较困难。大多数情况下，测试人员需要亲自检查Web页面以保证页面布局能够像设计的那样显示。

现有技术中存在的方法主要用于验证Web页面的内容。这些方法的一个例子是基于DOM的验证方法。基于DOM的验证方法检查DOM节点与给定的条件是否匹配，比如节点的文字内容。如果匹配，则验证结果就是成功的。因此，基于DOM的验证方法实际上与页面布局的验证之间没有关系，比如只要某个节点符合匹配的文字内容就可以了。另一个例子是基于图像的验证方法。基于图像的验证方法比较当前页面和预先存储的图像是否相匹配。由于基于图像的验证方法对图像本身非常敏感，因此实现比较复杂，并且验证的结果不那么灵活。

现有技术中还不存在对Web页面布局有效地进行验证的解决方案。

发明内容

本公开的说明性实施例认识到现有技术中的上述不足，提供了用于验证Web页面布局的方法和系统。

根据本公开的一个方面，提供了一种用于验证Web页面布局的方法，包括：读取Web页面布局的规则；解析读取的Web页面布局的规则；产生需要验证的Web页面布局的规则的列表；收集Web页面布局的信息；以及基于需要验证的Web页面布局的规则列表中的规则验证Web页面布局。

根据本公开的一个方面，提供了一种用于验证Web页面布局的系统，包括：读取装置，被配置为读取Web页面布局的规则；解析装置，被配置为解析读取的Web页面布局的规则；产生装置，被配置为产生需要验证的Web页面布局的规则的列表；收集装置，被配置为收集Web页面布局的信息；以及验证装置，被配置为基于需要验证的Web页面布局的规则列表中的规则验证Web页面布局。

利用本公开说明性实施例的方法和系统，能够有效地对Web页面布局进行验证。

附图说明

本公开可以通过参考下文中结合附图所给出的描述而得到更好的理解，其中在所有附图中使用了相同或相似的附图标记来表示相同或者相似的部件。所述附图连同下面的详细说明一起包含在本说明书中并且形成本说明书的一部分，而且用来进一步举例说明本公开的优选实施例和解释本公开的原理和优点。在附图中：

图1显示了根据本公开的实施例用于验证Web页面布局的方法100；

图2A显示了一个Web页面的示例；

图2B显示了对应于图2A的Web页面在指定的浏览器中显示的结果；

图3显示了根据本公开的实施例用于验证Web页面布局的系统300。

具体实施方式

在下文中将结合附图对本公开的示范性实施例进行描述。为了清楚和简明起见，在说明书中并未描述实际实施方式的所有特征。然而，应该了解，在开发任何这种实际实施例的过程中必须做出很多特定于该实际实施方式的决定，以便实现开发人员的具体目标，例如，符合与系统及业务相关的那些限制条件，并且这些限制条件可能会随着实施方式的不同而有所改变。此外，还应该了解，虽然开发工作有可能是非常复杂和费时的，但对得益于本公开公开内容的本领域技术人员来说，这种开发工作仅仅是例行的任务。

在此，还需要说明的一点是，为了避免因不必要的细节而模糊了本公开，在附图中仅仅示出了与根据本公开的方案密切相关的装置结构和/或处理步骤，而省略了与本公开关系不大的其他细节。

下面结合图1详细说明根据本公开实施例的方法。图1显示了根据本公开的实施例用于验证Web页面布局的方法100。方法100从步骤102开始。接下来，方法100进入步骤104，其中读取Web页面布局的规则。Web页面布局的规则是由开发人员在进行网页设计时针对所设计的网页指定的，用于在运行时测试Web页面布局的正确性。根据本公开的一个实施例，Web页面布局的规则包括独立规则和相对规则，其中独立规则包含Web页面元素自身的属性，相对规则包含Web页面元素之间的关系。Web页面元素可以是Widget，或者是DOM，也可以是两者的结合。独立规则可以定义Web页面元素的面积、宽度和高度，或者其在页面中的位置等，相对规则可以定义各个Web页面元素之间的关系，例如两个Widget之间的距离，两者大小的比例等等。

下面将以Widget作为Web页面元素示例性的描述Web页面布局的规则的一个例子。下面给出的例子对应于图2A中显示的Web页面的布局的规则。