CN114579461A - 浏览器兼容性检测方法及相关设备 - Google Patents

Abstract

本公开实施例提供一种浏览器兼容性检测方法及相关设备。该方法包括：获取设计页面及根据所述设计页面确定的页面渲染文件；通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；确定所述设计页面和所述页面截图的页面相似度；根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。该方法可以自动检测页面渲染文件与浏览器的兼容性，提高浏览器兼容性检测的效率。

Description

浏览器兼容性检测方法及相关设备

技术领域

本公开涉及计算机技术领域，具体而言，涉及一种浏览器兼容性检测方法、浏览器兼容性检测装置、电子设备、计算机可读存储介质以及计算机程序产品。

背景技术

随着互联网技术的快速发展，网页应用正在成为重要的信息获取和交流平台。网页开发者希望应用能在浏览器平台上表现一致，但由于浏览器实现技术的差异以及对标准支持程度的不同，导致网页应用在不同的浏览器平台上运行时可能出现行为和页面展现方面的不一致，即浏览器的不兼容问题。

相关技术中，使用手动检测浏览器的兼容性的方法检测浏览器的兼容性，操作成本高、准确性较差。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开实施例提供一种浏览器兼容性检测方法、浏览器兼容性检测装置、电子设备、计算机可读存储介质及计算机程序产品，该方法可以自动检测页面渲染文件与浏览器的兼容性，提高浏览器兼容性检测的效率。

本公开实施例提供一种浏览器兼容性检测方法，该方法包括：获取设计页面及根据所述设计页面确定的页面渲染文件；通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；确定所述设计页面和所述页面截图的页面相似度；根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

在本公开的一些示例性实施例中，所述设计页面包括至少一个设计元素，所述页面截图包括与所述至少一个设计元素对应的至少一个页面元素；确定所述设计页面和所述页面截图的页面相似度，包括：获得各个设计元素和与其对应的页面元素之间的元素差异度；根据各个设计元素和与其对应的页面元素之间的元素差异度，获得所述页面相似度。

在本公开的一些示例性实施例中，若所述页面相似度小于相似度阈值，则从所述至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及所述目标页面元素的位置信息；根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码。

在本公开的一些示例性实施例中，根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码，包括：获得在所述目标页面的渲染过程中生成的渲染树；根据所述目标页面元素的位置信息，在所述渲染树中确定目标渲染节点；根据所述目标渲染节点反解获得目标层叠样式表对象模型；根据所述目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码。

在本公开的一些示例性实施例中，通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图，包括：通过使用具有不同内核的多个浏览器分别将所述页面渲染文件渲染生成多个目标页面，以获得所述多个目标页面的多个页面截图；其中，确定所述设计页面和所述页面截图的页面相似度，包括：分别确定所述设计页面和所述多个目标页面的多个页面截图的页面相似度；其中，根据所述设计页面和所述页面截图的页面相似度，确定所述目标页面与所述浏览器的兼容性，包括：根据所述设计页面和所述多个目标页面的多个页面截图的页面相似度，确定所述页面渲染文件与不同内核的多个浏览器的兼容性。

在本公开的一些示例性实施例中，根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性，包括：若所述页面相似度小于相似度阈值，则确定所述页面渲染文件与所述浏览器不兼容；若所述页面相似度大于或等于所述相似度阈值，则确定所述页面渲染文件与所述浏览器兼容。

在本公开的一些示例性实施例中，通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图，包括：通过浏览器根据所述页面渲染文件生成层叠样式表对象模型；根据层叠样式表对象模型生成渲染树；根据渲染树渲染生成目标页面；通过所述浏览器对所述目标页面进行截图，获得所述目标页面的页面截图。

本公开实施例提供一种浏览器兼容性检测装置，包括：获取模块，被配置为执行获取设计页面及根据所述设计页面确定的页面渲染文件；访问模块，被配置为执行通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；确定模块，被配置为执行确定所述设计页面和所述页面截图的页面相似度；所述确定模块还被配置为执行根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

在本公开的一些示例性实施例中，所述设计页面包括至少一个设计元素，所述页面截图包括与所述至少一个设计元素对应的至少一个页面元素；所述确定模块还包括：获得模块，被配置为执行获得各个设计元素和与其对应的页面元素之间的元素差异度；所述获得模块还被配置为执行根据各个设计元素和与其对应的页面元素之间的元素差异度，获得所述页面相似度。

在本公开的一些示例性实施例中，所述装置还包括：定位模块；所述获得模块还被配置为执行若所述页面相似度小于相似度阈值，则从所述至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及所述目标页面元素的位置信息；所述定位模块被配置为执行根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码。

在本公开的一些示例性实施例中，所述装置还包括：反解模块；所述获得模块还被配置为获得在所述目标页面的渲染过程中生成的渲染树；所述确定模块还被配置为执行根据所述目标页面元素的位置信息，在所述渲染树中确定目标渲染节点；所述反解模块被配置为执行根据所述目标渲染节点反解获得目标层叠样式表对象模型；所述反解模块还被配置为执行根据所述目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码。

在本公开的一些示例性实施例中，所述访问模块还被配置为执行通过使用具有不同内核的多个浏览器分别将所述页面渲染文件渲染生成多个目标页面，以获得所述多个目标页面的多个页面截图；所述确定模块还被配置为执行分别确定所述设计页面和所述多个目标页面的多个页面截图的页面相似度；所述确定模块还被配置为执行根据所述设计页面和所述多个目标页面的多个页面截图的页面相似度，确定所述页面渲染文件与不同内核的多个浏览器的兼容性。

在本公开的一些示例性实施例中，所述确定模块还被配置为执行若所述页面相似度小于相似度阈值，则确定所述页面渲染文件与所述浏览器不兼容；所述确定模块还被配置为执行若所述页面相似度大于或等于所述相似度阈值，则确定所述页面渲染文件与所述浏览器兼容。

在本公开的一些示例性实施例中，所述装置还包括：生成模块；所述生成模块被配置为执行通过浏览器根据所述页面渲染文件生成层叠样式表对象模型；所述生成模块还被配置为执行根据层叠样式表对象模型生成渲染树；所述生成模块还被配置为执行根据渲染树渲染生成目标页面；所述获得模块还被配置为执行通过所述浏览器对所述目标页面进行截图，获得所述目标页面的页面截图。

本公开实施例提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行可执行指令，以实现如上述任一项的浏览器兼容性检测方法。

本公开实施例提供一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如上述任一项的浏览器兼容性检测方法。

本公开实施例提供一种计算机程序产品，包括计算机程序，计算机程序被处理器执行时实现上述任一项的浏览器兼容性检测方法。

本公开实施例提供的浏览器兼容性检测方法，获取设计页面及根据所述设计页面确定的页面渲染文件，通过浏览器将页面渲染文件渲染生成目标页面，可以获得设计页面在浏览器中展现的实际效果；根据设计页面和目标页面的页面截图的页面相似度，可以自动检测页面渲染文件与浏览器的兼容性，提高浏览器兼容性检测的效率，提高浏览器兼容性检测的准确性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了可以应用本公开实施例的浏览器兼容性检测方法的示例性系统架构的示意图。

图2是根据一示例性实施例示出的一种浏览器兼容性检测方法的流程图。

图3是根据一示例示出的设计页面和页面截图的示意图。

图4是根据一示例性实施例示出的另一种浏览器兼容性检测方法的流程图。

图5是根据一示例性实施例示出的一种浏览器兼容性检测装置的框图。

图6是根据一示例性实施例示出了适于用来实现本公开示例性实施例的电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本公开将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

本公开所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。

附图仅为本公开的示意性图解，图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在至少一个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和步骤，也不是必须按所描述的顺序执行。例如，有的步骤还可以分解，而有的步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

本说明书中，用语“一个”、“一”、“该”、“所述”和“至少一个”用以表示存在至少一个要素/组成部分/等；用语“包含”、“包括”和“具有”用以表示开放式的包括在内的意思并且是指除了列出的要素/组成部分/等之外还可存在另外的要素/组成部分/等；用语“第一”、“第二”和“第三”等仅作为标记使用，不是对其对象的数量限制。

图1示出了可以应用本公开实施例的浏览器兼容性检测方法的示例性系统架构的示意图。

如图1所示，该系统架构可以包括服务器101、网络102、终端设备103、终端设备104和终端设备105。网络102用以在终端设备103、终端设备104或终端设备105和服务器101之间提供通信链路的介质。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

服务器101可以是提供各种服务的服务器，例如对用户利用终端设备103、终端设备104或终端设备105所进行操作的装置提供支持的后台管理服务器。后台管理服务器可以对接收到的请求等数据进行分析等处理，并将处理结果反馈给终端设备103、终端设备104或终端设备105。

终端设备103、终端设备104和终端设备105可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、可穿戴智能设备、虚拟现实设备、增强现实设备等，但并不局限于此。

本公开实施例中，服务器101可以：获取设计页面及及根据所述设计页面确定的页面渲染文件；通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；确定所述设计页面和所述页面截图的页面相似度；根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

应该理解，图1中的终端设备103、终端设备104、终端设备105、网络102和服务器101的数目仅仅是示意性的，服务器101可以是一个实体的服务器，还可以为多个服务器组成的服务器集群，还可以是云端服务器，根据实际需要，可以具有任意数目的终端设备、网络和服务器。

下面，将结合附图及实施例对本公开示例实施例中的浏览器兼容性检测方法的各个步骤进行更详细的说明。本公开实施例提供的方法可以由任意的电子设备来执行，例如上述图1中的服务器101和/或终端设备103，但本公开对此不作限定。

图2是根据一示例性实施例示出的一种浏览器兼容性检测方法的流程图。

如图2所示，本公开实施例提供的方法可以包括以下步骤。

在步骤S210中，获取设计页面及根据设计页面确定的页面渲染文件。

本公开实施例中，设计页面(也可称为设计图)是业务开发时UI(User Interface，用户界面)设计师提供的包含图层和尺寸等相关信息的简易网页，设计页面中不包含交互功能和真实数据。

本公开实施例中，可以对设计页面进行预处理：将获取的设计页面的格式转换为图片格式，并进行压缩。

本公开实施例中，页面渲染文件是页面开发人员根据设计页面开发获得的，页面渲染文件例如可以包括业务代码(也可称为网页开发代码)，页面渲染文件可以包括CSS(Cascading Style Sheets，层叠样式表)代码文件。

具体地，可以根据设计页面中的设计元素、尺寸、颜色、大小、位置等信息将其转为浏览器可以识别的网页开发代码，即可以将设计页面还原为具有交互功能、数据真实的目标页面。

在示例性实施例中，设计页面包括至少一个设计元素。

其中，设计元素可以包括文字元素、图片元素、按钮元素、超链接元素、表格元素中的至少一种。

在步骤S220中，通过浏览器将页面渲染文件渲染生成目标页面，以获得目标页面的页面截图。

在示例性实施例中，页面截图包括与至少一个设计元素对应的至少一个页面元素。

其中，页面元素可以包括文字元素、图片元素、按钮元素、超链接元素、表格元素中的至少一种，一般情况下，设计元素和页面元素是一一对应的。

图3是根据一示例示出的设计页面和页面截图的示意图。

参考图3，例如，设计页面301可以包括图片元素302、文字元素303和按钮元素304等，页面截图305可以包括图片元素306、文字元素307和按钮元素308等，其中，图片元素302和图片元素306是对应的、文字元素303和文字元素307是对应的、按钮元素304和按钮元素308是对应的。

本公开实施例中，可以基于页面渲染文件通过浏览器渲染目标页面，使用浏览器对目标页面进行截图，获得目标页面的页面截图。

本公开实施例中，上述浏览器可以为无头浏览器，其中，无头浏览器可以用来模拟浏览器的运行，服务器可以通过无头浏览器提供的接口启动、渲染目标页面，对目标页面进行截图等。

在示例性实施例中，通过浏览器根据页面渲染文件生成层叠样式表对象模型；根据层叠样式表对象模型生成渲染树；根据渲染树渲染生成目标页面；通过浏览器对目标页面进行截图，获得目标页面的页面截图。

本公开实施例中，可以根据CSS代码文件生成CSSOM(CSS Object Model，层叠样式表对象模型)，根据CSSOM生成render tree(渲染树)，根据render tree渲染目标页面。

例如，渲染引擎可以将HTML(Hyper Text Markup Language，超文本标记语言)文件解析为DOM(Document Object Model，文档对象模型)树，将CSS代码文件解析为CSSOM，将DOM树和CSSOM结合起来生成渲染树。其中，渲染树可以由一些包含有颜色和大小等属性的矩形组成，可以按照正确的顺序将渲染树显示到屏幕上。

在示例性实施例中，通过使用具有不同内核的多个浏览器分别将页面渲染文件渲染生成多个目标页面，以获得多个目标页面的多个页面截图。

下面以多个浏览器包括第一浏览器和第二浏览器为例进行说明，但本公开并不限定于此。

其中，第一浏览器和第二浏览器具有不同的内核，以第一浏览器具有的内核、第二浏览器具有的内核为第二内核为例进行说明。

本公开实施例中，可以使用具有第一内核的第一浏览器渲染生成第一目标页面，使用第一浏览器对第一目标页面进行截图，获得第一目标页面的第一页面截图；使用第二内核的第二浏览器渲染生成第二目标页面，使用第二浏览器对第二目标页面进行截图，获得第二目标页面的第二页面截图。

由于不同内核的浏览器对于开发语言代码的支持度不同，可能会导致相同的业务代码出现不同表现的情况，即相同的页面渲染文件在不同内核的浏览器下生成的目标页面可能不同，因此得到的页面截图可能不同。

在步骤S230中，确定设计页面和页面截图的页面相似度。

本公开实施例中，可以通过图片处理、签名、对比等技术，将设计页面和页面截图进行比较，获得设计页面和页面截图的页面相似度。

在示例性实施例中，分别确定设计页面和多个目标页面的多个页面截图的页面相似度。

本公开实施例中，可以将设计页面分别和多个目标页面的多个页面截图进行比较，分别获得设计页面和多个页面截图的相似度。

例如，可以将设计页面与第一页面截图进行比较，获得设计页面与第一页面截图的第一相似度；可以将设计页面与第二页面截图进行比较，获得设计页面与第二页面截图的第二相似度。

在示例性实施例中，获得各个设计元素和与其对应的页面元素之间的元素差异度；根据各个设计元素和与其对应的页面元素之间的元素差异度，获得页面相似度。

本公开实施例中，可以将设计页面中的各个设计元素和页面截图中的与各个设计元素对应的页面元素进行比较，获得各个设计元素和与其对应的页面元素之间的元素差异度；根据各个设计元素和与其对应的页面元素之间的元素差异度，确定设计页面和页面截图的页面相似度。

例如，参考图3，可以将设计页面301中的图片元素302和页面截图305中的图片元素306进行比较，获得图片元素302和图片元素306的元素差异度；可以将设计页面301中的文字元素303和页面截图305中的文字元素307进行比较，获得文字元素303和文字元素307的元素差异度；可以将设计页面301中的按钮元素304和页面截图305中的按钮元素308进行比较，获得按钮元素304和按钮元素308的元素差异度；根据图片元素302和图片元素306的元素差异度、文字元素303和文字元素307的元素差异度、以及按钮元素304和按钮元素308的元素差异度，确定设计页面301和页面截图305的页面相似度。

在示例性实施例中，可以在页面截图中从至少一个页面元素中标记出元素差异度大于元素差异度阈值的目标页面元素。

例如，继续参考图3，按钮元素304和按钮元素308的元素差异度大于元素差异度阈值，则在页面截图305中标记出按钮元素308(即目标页面元素)。

在步骤S240中，根据设计页面和页面截图的页面相似度，确定页面渲染文件与浏览器的兼容性。

在示例性实施例中，若页面相似度小于相似度阈值，则确定页面渲染文件与浏览器不兼容；若页面相似度大于或等于相似度阈值，则确定页面渲染文件与浏览器兼容。

本公开实施例中，页面相似度可以用数值表示，最大值可以为100％，即表示设计页面和页面截图完全相同；相似度阈值可以根据实际情况设置，本公开对此不作限定。

本公开实施例中，可以将页面相似度和相似度阈值进行比较，若页面相似度小于相似度阈值，则确定页面渲染文件与浏览器不兼容，即浏览器兼容性检测不通过；若页面相似度大于或等于相似度阈值，则确定页面渲染文件与浏览器兼容，即浏览器兼容性检测通过。

本公开实施例中，在页面渲染文件与浏览器不兼容，即浏览器兼容性检测不通过时，可以通过反解页面渲染文件定位目标业务代码(例如有问题的业务代码)，将目标业务代码反馈至网页开发人员，使网页开发人员更改页面渲染文件，从而提高网页开发效率。

在示例性实施例中，根据设计页面和多个目标页面的多个页面截图的页面相似度，确定页面渲染文件与不同内核的多个浏览器的兼容性。

本公开实施例中，可以分别将设计页面和多个目标页面的多个页面截图的页面相似度和相似度阈值进行比较，若设计页面和目标页面的页面截图的页面相似度小于相似度阈值，则确定页面渲染文件与渲染该目标页面的内核浏览器不兼容，即该内核浏览器兼容性检测不通过；若设计页面和目标页面的页面相似度大于或等于相似度阈值，则确定页面渲染文件与渲染该目标页面的内核浏览器兼容，即该内核浏览器兼容性检测通过。

本公开实施例中，可以自动检测不同内核下的浏览器的兼容性，提高不同内核下的浏览器的兼容性的检测效率。

本公开实施例提供的浏览器兼容性检测方法，获取设计页面及根据所述设计页面确定的页面渲染文件，通过浏览器将页面渲染文件渲染生成目标页面，可以获得设计页面在浏览器中展现的实际效果；根据设计页面和目标页面的页面截图的页面相似度，可以自动检测页面渲染文件与浏览器的兼容性，提高浏览器兼容性检测的效率，提高浏览器兼容性检测的准确性。

图4是根据一示例性实施例示出的另一种浏览器兼容性检测方法的流程图。

本公开实施例中，在图2所示的浏览器兼容性检测方法的基础上，图4所示的浏览器兼容性检测方法还可以包括以下步骤。

在步骤S410中，若页面相似度小于相似度阈值，则从至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及目标页面元素的位置信息。

其中，目标页面元素可以为存在兼容性问题的页面元素。

本公开实施例中，可以在将设计页面中的各个设计元素和页面截图中与各个设计元素对应的页面元素进行对比，获得各个设计元素和与其对应的页面元素之间的元素差异度之后，可以将元素差异度大于元素差异度阈值的页面元素(即目标页面元素)在页面截图中标记出来；在确定设计页面和页面截图的页面相似度小于相似度阈值时，获取标记好目标页面元素的页面截图，同时，可以获取该目标页面元素在页面截图中的位置信息。

本公开实施例中，也可以在页面相似度小于相似度阈值、确定页面渲染文件与浏览器不兼容时，将元素差异度大于元素差异度阈值的页面元素(即目标页面元素)在页面截图中标记出来，并获取该目标页面元素在页面截图中的位置信息。

本公开实施例中，将元素差异度大于元素差异度阈值的页面元素作为目标页面元素，可以认为目标页面元素是存在兼容性问题的页面元素。

本公开实施例中，页面元素的位置信息用于表示页面元素在页面截图中的位置，例如，页面元素的位置信息为页面元素的横纵坐标，例如，文字元素的横纵坐标、图片元素的轮廓的横纵坐标，按钮元素的轮廓的横纵坐标。

在示例性实施例中，可以在页面截图中从至少一个页面元素中标记出元素差异度大于元素差异度阈值的目标页面元素。

在步骤S420中，根据目标页面元素的位置信息，在页面渲染文件中定位目标业务代码。

其中，目标业务代码可以为存在兼容性问题的业务代码。

本公开实施例中，可以根据目标页面元素的位置信息，反解获得也页面渲染文件的业务代码中存在兼容性问题的业务代码(即目标业务代码)。

在示例性实施例中，根据目标页面元素的位置信息，在页面渲染文件中定位目标业务代码，包括：获得在目标页面的渲染过程中生成的渲染树；根据目标页面元素的位置信息，在渲染树中确定目标渲染节点；根据目标渲染节点反解获得目标层叠样式表对象模型；根据目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码。

本公开实施例中，目标页面的样式的渲染过程包括：根据CSS代码文件生成CSSOM，根据CSSOM生成渲染树，根据渲染树渲染目标页面(即CSS→CSSOM→render tree→pantingtree)。

本公开实施例中，根据存在兼容性问题的页面元素(即目标页面元素)的位置信息，可以在渲染树中进行匹配找到存在兼容性问题的渲染节点(renderer)(即目标渲染节点)，将存在兼容性问题的渲染节点反解为存在兼容性问题的CSSOM(即目标层叠样式表对象模型)，将存在兼容性问题的CSSOM反解为存在兼容性问题的CSS(即目标层叠样式表)，可以将存在兼容性问题的CSS确定为目标业务代码，也可以结合存在兼容性的目标页面元素及反解出的存在兼容性问题的CSS确定出目标业务代码，从而辅助网页开发人员进行代码修改。

具体地，出问题的业务代码(即目标业务代码)可能是因为使用了较新标准的语法，而较新标准的语法在旧浏览器上没有及时得到支持，例如，当前浏览器支持CSS2版本及以下的代码，若使用了CSS3版本的代码，则可能会出现当前浏览器不兼容的问题。

本公开实施例提供的浏览器兼容性检测方法，在页面相似度小于相似度阈值时，从至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及目标页面元素的位置信息，根据目标页面元素的位置信息，一方面，可以自动准确地在页面渲染文件中定位目标业务代码，从而实现将浏览器兼容性检测的精度定位到业务代码，提高浏览器兼容性检测的精度和准确性；另一方面，在页面渲染文件中定位目标业务代码，可以辅助网页开发人员进行业务代码的修改，提高网页开发效率，提高网页开发获得的页面渲染文件和浏览器的兼容性。

在一些实施例中，根据目标页面元素的位置信息，在渲染树中确定目标渲染节点；根据目标渲染节点反解获得目标层叠样式表对象模型；根据目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码；使用反解的方法可以自动准确定位目标业务代码，从而提高浏览器兼容性检测的精度和准确性。

需要注意的是，上述附图仅是根据本公开示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

图5是根据一示例性实施例示出的一种浏览器兼容性检测装置的框图。参照图5，该装置500可以包括获取模块510、访问模块520和确定模块530。

其中，获取模块510被配置为执行获取设计页面及根据所述设计页面确定的页面渲染文件；访问模块520被配置为执行通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；确定模块530被配置为执行确定所述设计页面和所述页面截图的页面相似度；所述确定模块530还被配置为执行根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

在本公开的一些示例性实施例中，所述设计页面包括至少一个设计元素，所述页面截图包括与所述至少一个设计元素对应的至少一个页面元素；所述确定模块530还包括：获得模块，被配置为执行获得各个设计元素和与其对应的页面元素之间的元素差异度；所述获得模块还被配置为执行根据各个设计元素和与其对应的页面元素之间的元素差异度，获得所述页面相似度。

在本公开的一些示例性实施例中，所述装置还包括：定位模块；所述获得模块还被配置为执行若所述页面相似度小于相似度阈值，则从所述至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及所述目标页面元素的位置信息；所述定位模块被配置为执行根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码。

在本公开的一些示例性实施例中，所述装置500还包括：反解模块；所述获得模块还被配置为获得在所述目标页面的渲染过程中生成的渲染树；所述确定模块530还被配置为执行根据所述目标页面元素的位置信息，在所述渲染树中确定目标渲染节点；所述反解模块被配置为执行根据所述目标渲染节点反解获得目标层叠样式表对象模型；所述反解模块还被配置为执行根据所述目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码。

在本公开的一些示例性实施例中，所述访问模块还被配置为执行通过使用具有不同内核的多个浏览器分别将所述页面渲染文件渲染生成多个目标页面，以获得所述多个目标页面的多个页面截图；所述确定模块530还被配置为执行分别确定所述设计页面和所述多个目标页面的多个页面截图的页面相似度；所述确定模块530还被配置为执行根据所述设计页面和所述多个目标页面的多个页面截图的页面相似度，确定所述页面渲染文件与不同内核的多个浏览器的兼容性。

在本公开的一些示例性实施例中，所述确定模块530还被配置为执行若所述页面相似度小于相似度阈值，则确定所述页面渲染文件与所述浏览器不兼容；所述确定模块530还被配置为执行若所述页面相似度大于或等于所述相似度阈值，则确定所述页面渲染文件与所述浏览器兼容。

在本公开的一些示例性实施例中，所述装置500还包括：生成模块；所述生成模块被配置为执行通过浏览器根据所述页面渲染文件生成层叠样式表对象模型；所述生成模块还被配置为执行根据层叠样式表对象模型生成渲染树；所述生成模块还被配置为执行根据渲染树渲染生成目标页面；所述获得模块还被配置为执行通过所述浏览器对所述目标页面进行截图，获得所述目标页面的页面截图。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

下面参照图6来描述根据本公开的这种实施例的电子设备600。图6显示的电子设备600仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：上述至少一个处理单元610、上述至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640。

其中，存储单元存储有程序代码，程序代码可以被处理单元610执行，使得处理单元610执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施例的步骤。例如，处理单元610可以执行如图2中所示的各个步骤。

又如，电子设备可以实现如图2所示的各个步骤。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)621和/或高速缓存存储单元622，还可以进一步包括只读存储单元(ROM)623。

存储单元620还可以包括具有一组(至少一个)程序模块625的程序/实用工具624，这样的程序模块625包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备670(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器660通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器，上述指令可由装置的处理器执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，计算机程序/指令被处理器执行时实现上述实施例中的浏览器兼容性检测方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种浏览器兼容性检测方法，其特征在于，包括：

获取设计页面及根据所述设计页面确定的页面渲染文件；

通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；

确定所述设计页面和所述页面截图的页面相似度；

根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

2.根据权利要求1所述的浏览器兼容性检测方法，其特征在于，所述设计页面包括至少一个设计元素，所述页面截图包括与所述至少一个设计元素对应的至少一个页面元素；

确定所述设计页面和所述页面截图的页面相似度，包括：

获得各个设计元素和与其对应的页面元素之间的元素差异度；

根据各个设计元素和与其对应的页面元素之间的元素差异度，获得所述页面相似度。

3.根据权利要求2所述的浏览器兼容性检测方法，其特征在于，还包括：

若所述页面相似度小于相似度阈值，则从所述至少一个页面元素中获得元素差异度大于元素差异阈值的目标页面元素及所述目标页面元素的位置信息；

根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码。

4.根据权利要求3所述的浏览器兼容性检测方法，其特征在于，根据所述目标页面元素的位置信息，在所述页面渲染文件中定位目标业务代码，包括：

获得在所述目标页面的渲染过程中生成的渲染树；

根据所述目标页面元素的位置信息，在所述渲染树中确定目标渲染节点；

根据所述目标渲染节点反解获得目标层叠样式表对象模型；

根据所述目标层叠样式表对象模型反解获得目标层叠样式表，以确定目标业务代码。

5.根据权利要求1所述的浏览器兼容性检测方法，其特征在于，通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图，包括：

通过使用具有不同内核的多个浏览器分别将所述页面渲染文件渲染生成多个目标页面，以获得所述多个目标页面的多个页面截图；

其中，确定所述设计页面和所述页面截图的页面相似度，包括：

分别确定所述设计页面和所述多个目标页面的多个页面截图的页面相似度；

其中，根据所述设计页面和所述页面截图的页面相似度，确定所述目标页面与所述浏览器的兼容性，包括：

根据所述设计页面和所述多个目标页面的多个页面截图的页面相似度，确定所述页面渲染文件与不同内核的多个浏览器的兼容性。

6.根据权利要求1所述的浏览器兼容性检测方法，其特征在于，根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性，包括：

若所述页面相似度小于相似度阈值，则确定所述页面渲染文件与所述浏览器不兼容；

若所述页面相似度大于或等于所述相似度阈值，则确定所述页面渲染文件与所述浏览器兼容。

7.一种浏览器兼容性检测装置，其特征在于，包括：

获取模块，被配置为执行获取设计页面及根据所述设计页面确定的页面渲染文件；

访问模块，被配置为执行通过浏览器将所述页面渲染文件渲染生成目标页面，以获得所述目标页面的页面截图；

确定模块，被配置为执行确定所述设计页面和所述页面截图的页面相似度；

所述确定模块还被配置为执行根据所述设计页面和所述页面截图的页面相似度，确定所述页面渲染文件与所述浏览器的兼容性。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述可执行指令，以实现如权利要求1至6中任一项所述的浏览器兼容性检测方法。

9.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至6中任一项所述的浏览器兼容性检测方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6任一项所述的浏览器兼容性检测方法。

Images