CN111752663A - 一种Web应用中布局兼容性问题的修复方法和装置 - Google Patents

Abstract

本申请公开了一种Web应用中布局兼容性问题的修复方法和装置，方法包括：获取布局兼容性问题；提取布局兼容性问题的特征信息；根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性；若查询到待修复CSS属性，则根据待修复CSS属性，并通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值；若没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，以得到待修复CSS属性和修复值；根据修复值，对布局兼容性问题进行修复，解决了现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

Description

一种Web应用中布局兼容性问题的修复方法和装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种Web应用中布局兼容性问题的修复方法和装置。

背景技术

随着互联网和Web技术的快速发展，Web应用正在成为重要的信息获取和交流平台。用户通过浏览器进行访问和使用Web应用，由于不同浏览器的差异以及对标准遵循程度的不同，导致Web应用在不同的浏览器平台上运行时可能出现行为和页面展现方面的不一致，即跨浏览器的不兼容问题。跨浏览器兼容性问题(XBI)分为三类：行为不一致、布局不一致和内容不一致。行为不一致：这类不一致通常指页面中元素的功能失效，如点击链接页面无法跳转，点击按钮页面没有反应；布局不一致：指页面中元素在布局方面的错误。例如：两个按钮在Chrome浏览器中横排且上下对齐，但是在IE浏览器中则显示为竖排；内容不一致：进一步分为文本内容不一致和可视内容不一致。文本不一致指的是元素内部的文本不同，可视内容不一致是指元素在可视化方面，如图片内容、元素样式等方面的不同。

现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低。

发明内容

本申请提供了一种Web应用中布局兼容性问题的修复方法和装置，用于解决现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

有鉴于此，本申请第一方面提供了一种Web应用中布局兼容性问题的修复方法，包括：

获取布局兼容性问题；

提取所述布局兼容性问题的特征信息，所述特征信息包括所述布局兼容性问题的类型、所述布局兼容性问题中元素的CSS属性和HTML属性；

根据所述特征信息，通过预置的决策树查询所述布局兼容性问题的待修复CSS属性，其中所述预置的决策树为根据历史修复数据训练得到；

若查询到所述待修复CSS属性，则根据所述待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复所述布局兼容性问题的修复值；

若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值；

根据所述修复值，对所述布局兼容性问题进行修复。

可选地，所述获取布局兼容性问题，之后还包括：

根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

可选地，所述根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题，包括：

根据所述布局兼容性问题中元素的面积大小，对所述元素按从小到大的顺序进行排序，得到排序后的元素序列；

遍历所述元素序列，根据每一所述元素在页面中的位置进行计算，并判断是否得到包含所述元素的父节点；

若是，则计算若干个所述父节点的大小关系，并根据若干个所述父节点对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

若否，则将所述元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

可选地，所述根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题，包括：

获取每一组所述布局兼容性问题中面积最大的组节点，并得到若干个所述组节点中左上角的X坐标和Y坐标；

按照从上到下的渲染顺序对若干个所述组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个所述组节点中左上角的X坐标进行排序，所述得到排序后的布局兼容性问题。

可选地，所述若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值，之后还包括：

通过ID5算法将所述待修复CSS属性和所述特征信息添加至所述预置的决策树。

本申请第二方面提供了一种Web应用中布局兼容性问题的修复装置，包括：获取模块、提取模块、查询模块、第一搜索模块、第二搜索模块和修复模块；

所述获取模块，用于获取布局兼容性问题；

所述提取模块，用于提取所述布局兼容性问题的特征信息，所述特征信息包括所述布局兼容性问题的类型、所述布局兼容性问题中元素的CSS属性和HTML属性；

所述查询模块，用于根据所述特征信息，通过预置的决策树查询所述布局兼容性问题的待修复CSS属性，其中所述预置的决策树为根据历史修复数据训练得到；

所述第一搜索模块，用于若查询到所述待修复CSS属性，则根据所述待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复所述布局兼容性问题的修复值；

所述第二搜索模块，用于若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值；

所述修复模块，用于根据所述修复值，对所述布局兼容性问题进行修复。

可选地，还包括分组模块和排序模块；

所述分组模块，用于根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

所述排序模块，用于根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

可选地，所述分组模块包括第一排序子模块、计算判断子模块、计算分组子模块和分组子模块；

所述第一排序子模块，用于根据所述布局兼容性问题中元素的面积大小，对所述元素按从小到大的顺序进行排序，得到排序后的元素序列；

所述计算判断子模块，用于遍历所述元素序列，根据每一所述元素在页面中的位置进行计算，并判断是否得到包含所述元素的父节点；

所述计算分组子模块，用于若是，则计算若干个所述父节点的大小关系，并根据若干个所述父节点对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

所述分组子模块，用于若否，则将所述元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

可选地，所述排序模块包括获取子模块和排序子模块；

所述获取子模块，用于获取每一组所述布局兼容性问题中面积最大的组节点，并得到若干个所述组节点中左上角的X坐标和Y坐标；

所述排序子模块，用于按照从上到下的渲染顺序对若干个所述组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个所述组节点中左上角的X坐标进行排序，得到排序后的布局兼容性问题。

可选地，还包括添加模块；

所述添加模块，用于通过ID5算法将所述待修复CSS属性和所述特征信息添加至所述预置的决策树。

从以上技术方案可以看出，本申请具有以下优点：

本申请公开了一种Web应用中布局兼容性问题的修复方法，包括：获取布局兼容性问题；提取布局兼容性问题的特征信息，特征信息包括布局兼容性问题的类型、布局兼容性问题中元素的CSS属性和HTML属性；根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性，其中预置的决策树为根据历史修复数据训练得到；若查询到待修复CSS属性，则根据待修复CSS属性，并通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值；若没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，以得到待修复CSS属性和所述修复值；根据修复值，对布局兼容性问题进行修复。

本申请在获取了布局兼容性问题后，先提取布局兼容性问题的特征信息，再根据特征信息，结合根据历史修复数据训练得到的预置的决策树，查询布局兼容性问题的待修复CSS属性，若查询到待修复CSS属性，则根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值，若在预置的决策树中没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，即本申请先在历史修复数据中查询布局兼容性问题的待修复CSS属性，当查询不到时再进行全局的搜索，并不是直接搜索所有导致布局兼容性问题的CSS属性集，从而提高了修复的效率，解决了现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

附图说明

图1为本申请实施例提供的一种Web应用中布局兼容性问题的修复方法的一个流程示意图；

图2为本申请实施例提供的一种Web应用中布局兼容性问题的修复方法的另一流程示意图；

图3为本申请实施例提供的布局兼容性问题自动修复框架图；

图4为本申请实施提供的适应度函数的计算框图；

图5为本申请实施例提供的一种Web应用中布局兼容性问题的修复装置。

具体实施方式

为自动检测跨浏览器不兼容问题，目前工业界和学术界已经提出了有很多的方法和工具，然而，很多都主要关注在兼容性问题的自动检测，当检测到兼容性问题后，仍然需要开发人员对兼容性问题进行手动修复，且容易出错，因此，还有技术人员提出了布局兼容性问题的修复工具—X-Fix，(X-Fix出自Mahajan,Sonal,Abdulmajeed Alameer,PhilMcMinn,and William GJ Halfond."Automated repair of layout cross browserissues using search-based techniques."In Proceedings of the 26th ACM SIGSOFTInternational Symposium on Software Testing and Analysis,pp.249-260.2017)，X-Fix提供了一种基于搜索的方法，对一组可能导致该布局兼容性问题的CSS属性集合进行搜索，确定CSS属性在被测浏览器中的新的合适值，以修复布局兼容性问题，虽然X-Fix在针对布局兼容性问题的修复上有一定效果，但是，该方法不支持重用历史修复数据，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低。

有鉴于此，本申请实施例提供了一种Web应用中布局兼容性问题的修复方法和装置，用于解决现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

为使得本申请的发明目的、特征、优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本申请一部分实施例，而非全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

请参阅图1，本申请实施例提供了一种Web应用中布局兼容性问题的修复方法，包括：

步骤101、获取布局兼容性问题。

需要说明的是，获取检测工具报告中的布局兼容性问题，布局兼容性问题可表示为<type,(e1,e2)>，其中type为布局兼容性问题的类型，e1和e2为存在布局兼容性问题的页面元素。

步骤102、提取布局兼容性问题的特征信息，特征信息包括布局兼容性问题的类型、布局兼容性问题中元素的CSS属性和HTML属性。

在获取布局兼容性问题后，需要提取布局兼容性问题的特征信息，特征信息包括布局兼容性问题的类型、布局兼容性问题中元素e1、e2的CSS属性和HTML属性。

步骤103、根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性，其中预置的决策树为根据历史修复数据训练得到。

需要说明的是，获取了特征信息后，根据预置的决策树查询布局兼容性问题的待修复CSS属性，当浏览器上渲染页面时，每个元素可能包含上百个HTML属性和CSS属性，但对于布局兼容性问题的元素e1和e2，并不是所有的HMTL属性、CSS属性都与布局兼容性问题相关。在对多个布局兼容性问题进行分析后，可发现大部分的布局兼容性问题与用户设定的CSS属性值和HTML属性值相关。因此，在训练预置的决策树时，主要考虑布局兼容性问题中元素e1和e2的CSS属性和HTML属性。预置的决策树可包括以下参数：

Type：布局兼容性问题的类型，可以为父子关系(parent-child)获兄弟关系(sibling)；

e1^t：元素e1的tag名；

e2^t：元素e2的tag名；

e1^c：元素e1声明的CSS属性；

e2^c：元素e2声明的CSS属性；

e1^h：元素e1声明的HTML属性；

e2^h：元素e2声明的HTML属性。

需要注意的是，在声明的CSS属性中有些属性明显与布局兼容性问题不相关(例如：color)，因此，将被过滤掉；同样，一些常见的HTML属性，如：id，class和name也不会导致布局兼容性问题。这些CSS属性和HMTL属性将首先被过滤，不会被选择为特征信息。

步骤104、判断是否查询到待修复CSS属性，若是则进入步骤105，若否则进入步骤106。

需要说明的是，本申请实施例在获取布局兼容性问题时，首先根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性，即先在历史修复数据中查询是否有对应的待修复CSS属性，因此，需要判断是否查询到待修复CSS属性，若是则进入步骤105、若否则进入步骤106。

步骤105、根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值。

需要说明的是，若在预置的决策树中能查询到待修复CSS属性，则直接针对该CSS属性进行搜索，以确定在参考浏览器上能够修复该布局兼容性问题的修复值。

步骤106、根据特征信息，通过交替变量搜索方法进行全局搜索，以得到待修复CSS属性和修复值。

需要说明的是，若在预置的决策树中没有查询到CSS属性，则说明在兼容性问题修复历史中没有类似的布局兼容性问题，则针对报告的布局兼容性问题类型，尝试所有可能修复该布局兼容性问题的CSS属性集合，以确定能够修复该布局兼容性问题的最合适的CSS属性及其在参考浏览器上的修复值。

步骤107、根据修复值，对布局兼容性问题进行修复。

本申请实施例在获取了布局兼容性问题后，先提取布局兼容性问题的特征信息，再根据特征信息，结合根据历史修复数据训练得到的预置的决策树，查询布局兼容性问题的待修复CSS属性，若查询到待修复CSS属性，则根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值，若在预置的决策树中没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，即本申请先在历史修复数据中查询布局兼容性问题的待修复CSS属性，当查询不到时再进行全局的搜索，并不是直接搜索所有导致布局兼容性问题的CSS属性集，从而提高了修复的效率，解决了现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

以上为本申请提供的一种Web应用中布局兼容性问题的修复方法的第一个实施例的详细说明，下面为本申请提供的一种Web应用中布局兼容性问题的修复方法的第二个实施例的详细说明。

请参阅图2，本申请实施例提供了一种Web应用中布局兼容性问题的修复方法，包括：

步骤201、获取布局兼容性问题。

步骤202、根据布局兼容性问题中元素在页面中的大小和位置，对布局兼容性问题进行分组，得到分组后的布局兼容性问题。

需要说明的是，浏览器渲染规则：(1)低优先级组的兼容性问题修复不会影响到已经修复成功的高优先级组，从而避免重复修复高优先级组的兼容性问题；(2)高优先级组的修复会影响到低优先级组，当高优先级组中的兼容性问题修复后，该修复可能会导致低优先级组的兼容性问题也被修复，从而提高修复效率。由此，可以知道，分组修复可以提高页面总体修复的成功率和效率。因此，为了更加有效地对布局兼容性问题进行修复，可以根据元素在页面中的位置和大小进行分组，分组过程具体如下：

根据布局兼容性问题中元素的面积大小，对元素按从小到大的顺序进行排序，得到排序后的元素序列；

遍历元素序列，根据每一元素在页面中的位置进行计算，并判断是否得到包含元素的父节点；

若是，则计算若干个父节点的大小关系，并根据若干个父节点对布局兼容性问题进行分组，得到分组后的布局兼容性问题；

若否，则将元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

步骤203、根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

需要说明的是，在将布局兼容性问题划分为不同的组后，可以按照浏览器对页面中元素从上到下，从左到右的渲染顺序，对组进行排序。每组中矩形面积最大的元素代表该组，即是组节点，如果元素的top、left值越小，则该组在修复顺序上越优先；如果top值相同，则left值小的元素所代表的组修复优先级越高，排序过程具体如下：

获取每一组布局兼容性问题中面积最大的组节点，并得到若干个组节点中左上角的X坐标和Y坐标。

按照从上到下的渲染顺序对若干个组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个组节点中左上角的X坐标进行排序，得到排序后的布局兼容性问题。

步骤204、提取布局兼容性问题的特征信息，特征信息包括布局兼容性问题的类型、布局兼容性问题中元素的CSS属性和HTML属性。

步骤205、根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性，其中预置的决策树为根据历史修复数据训练得到。

步骤206、判断是否查询到待修复CSS属性，若是则进入步骤207，若否则进入步骤208。

步骤207、根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值。

步骤208、根据特征信息，通过交替变量搜索方法进行全局搜索，以得到待修复CSS属性和修复值。

作为进一步地改进，如图3所示，为布局兼容性问题自动修复框架图，在经过全局搜索，得到待修复CSS属性后，还需要通过ID5算法将待修复CSS属性和特征信息添加至预置的决策树，即对预置的决策树进行更新，显然，当训练的历史数据较少时，决策树的推荐结果可能不准确，随着修复方案的增多，更多的历史修复数据可以用来对初始训练得到的预置的决策树进行更新，利用不断积累的历史修复方案进行决策树的更新，从而不断提高决策树对待修复CSS属性推荐的准确度。

对于每组布局兼容性问题，同样需要先修复top和left值小的元素所涉及的兼容性问题，首先查询预置的决策树，如果预置的决策树存在待修复CSS属性，则可以根据该待修复CSS属性搜索修复值，如果不存在，则需要先搜索所有可能修复布局兼容性问题的CSS属性及其组合。

搜索过程具体如下：

(1)若预置的决策树中存在待修复CSS属性，则采用交替变量搜索方法(alternating variable method)确定待修复CSS属性在测试浏览器中的新的值，以尽量减少与其在参考浏览器中的差异。

(2)若预置的决策树中不存在待修复CSS属性，或者(1)无法修复布局兼容性问题，则针对所有CSS属性集合进行搜索，并得到在测试浏览器上的最合适的值，以消除布局兼容性问题。

在(1)和(2)中，针对单个待修复CSS属性，其对应的修复值的搜索过程如下：

获取待修复CSS属性在测试浏览器中的当期值；

确定调整方向：对该值分别增大、缩小一个预先定义的步长，计算两种情况下，适应度值的变化情况。若适应度值变大，则说明调整的方向错误；若适应度值变小，则说明调整方向正确，可以在该方向上继续调整。为了快速的确定合适的修复值，需要每次调整步长*2，并计算新的适应度值。当适应度值变差时，在前一次调整前的修复值和当前的修复值之间进行二分查找，确定当适应度值最优(最小)时的修复值。

(3)若单个CSS属性值的修复仍然无法消除该布局兼容性问题，则进一步尝试不同的CSS属性组合，以消除该兼容性问题。

本实施例中，为了提高搜索算法的效率，需要定义相应的适应度函数，以指导搜索过程。在适应度函数的确定上，X-Fix假定修复成功后，存在兼容性问题的元素在参考浏览器和测试浏览器上的绝对位置和元素矩形应该相同，因此，所定义的适应度函数主要考虑了调整元素及其邻居节点在绝对位置差异，以及元素的大小差异。计算的差异值越小越好。但是，由于不同浏览器在渲染机制上差异，即使对于不存在兼容性问题的元素，其在不同浏览器上的位置通常也不相同，矩形大小也可能存在差异。因此，为了提高修复的成功率，需要对适应度函数进行设定，本实施例中的适应度函数考虑了待修复元素e与父节点p在测试浏览器和参考浏览器上布局关系的相对差异。定义为：w1*Δpos+w2*Δsize。其中，Δpos为父子节点在不同浏览器中四个方向(上/下/左/右)的相对位置差异，Δsize为父子节点在不同浏览器上的相对大小(宽度/高度)差异。w1、w2为权重，总和为1，其中，适应度函数为：

Δpos＝Δtop+Δbottom+Δleft+Δright；

Δsize＝Δwidth+Δheight；

请参阅图4，为适应度函数的计算框图，其中，待修复元素在测试浏览器中使用e表示，在参考浏览器中对应的元素使用e’表示。P为e在测试浏览器中对应的父节点，p’为e’在参考浏览器中对应的父节点。tx表示e顶部与p顶部的距离，bx表示e底部与p底部的距离，lx表示e左侧与p左侧的距离，rx表示e右侧与p右侧的距离。同理，tx’表示e’顶部与p’顶部的距离，bx’表示e’底部与p’的底部的距离，lx’表示e’左侧与p’左侧的距离，rx’表示e’右侧与p’右侧的距离。

Δtop表示待修复元素在测试浏览器和参考浏览器中与父节点顶部的相对距离差，Δbottom表示待修复元素在测试浏览器和参考浏览器中与父节点底部的相对距离差，Δleft表示待修复元素在测试浏览器和参考浏览器中与父节点左侧的相对距离差，Δright表示待修复元素在测试浏览器和参考浏览器中与父节点右侧的相对距离差。Δpos表示待修复元素在测试浏览器和参考浏览器中与父节点在四个方向上的相对距离差总和，在搜索过程中，该值越小越好。Δwidth表示待修复元素在测试浏览器和参考浏览器中与父节点的相对宽度距离差，Δheight表示待修复元素在测试浏览器和参考浏览器中与父节点的相对高度距离差。Δsize表示待修复元素在测试浏览器和参考浏览器中与父节点相对宽度和相对高度距离差之和，在搜索过程中，该值越小越好。

步骤209、根据修复值，对布局兼容性问题进行修复。

本申请实施例，获取布局兼容性问题后，需要对布局兼容性问题进行分组和排序，以提高修复的成功率和效率，再提取布局兼容性问题的特征信息，并根据特征信息，通过根据历史修复数据训练得到的预置的决策树，查询布局兼容性问题的待修复CSS属性，若查询到待修复CSS属性，则根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值，若在预置的决策树中没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，即本申请先在历史修复数据中查询布局兼容性问题的待修复CSS属性，当查询不到时再进行全局的搜索，并不是直接搜索所有导致布局兼容性问题的CSS属性集，从而提高了修复的效率，解决了现有技术中，即使在历史修复中存在类似的修复方案，仍然需要搜索多个可能导致该兼容性问题的CSS属性集，不能优先搜索历史的修复方案，导致修复效率较低的技术问题。

以上为本申请提供的一种Web应用中布局兼容性问题的修复方法的第二个实施例的详细说明，下面为本申请提供的一种Web应用中布局兼容性问题的修复装置的实施例的详细说明。

请参阅图5，本申请实施例提供了一种Web应用中布局兼容性问题的修复装置，包括：获取模块501、提取模块502、查询模块503、第一搜索模块504、第二搜索模块505和修复模块506；

获取模块501，用于获取布局兼容性问题；

提取模块502，用于提取布局兼容性问题的特征信息，特征信息包括布局兼容性问题的类型、布局兼容性问题中元素的CSS属性和HTML属性；

查询模块503，用于根据特征信息，通过预置的决策树查询布局兼容性问题的待修复CSS属性，其中预置的决策树为根据历史修复数据训练得到；

第一搜索模块504，用于若查询到待修复CSS属性，则根据待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复布局兼容性问题的修复值；

第二搜索模块505，用于若没有查询到待修复CSS属性，则根据特征信息，通过交替变量搜索方法进行全局搜索，以得到待修复CSS属性和修复值；

修复模块506，用于根据修复值，对布局兼容性问题进行修复。

作为进一步地改进，本实施例还包括分组模块507和排序模块508；

分组模块507，用于根据布局兼容性问题中元素在页面中的大小和位置，对布局兼容性问题进行分组，得到分组后的布局兼容性问题；

排序模块508，用于根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

作为进一步地改进，本实施中的分组模块507包括第一排序子模块、计算判断子模块、计算分组子模块和分组子模块；

第一排序子模块，用于根据布局兼容性问题中元素的面积大小，对元素按从小到大的顺序进行排序，得到排序后的元素序列；

计算判断子模块，用于遍历元素序列，根据每一元素在页面中的位置进行计算，并判断是否得到包含元素的父节点；

计算分组子模块，用于若是，则计算若干个父节点的大小关系，并根据若干个父节点对布局兼容性问题进行分组，得到分组后的布局兼容性问题；

分组子模块，用于若否，则将元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

作为进一步地改进，本实施中的排序模块508包括获取子模块和排序子模块；

获取子模块，用于获取每一组布局兼容性问题中面积最大的组节点，并得到若干个组节点中左上角的X坐标和Y坐标；

排序子模块，用于按照从上到下的渲染顺序对若干个组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个组节点中左上角的X坐标进行排序，得到排序后的布局兼容性问题。

作为进一步地改进，本实施例还包括添加模块509；

添加模块509，用于通过ID5算法将待修复CSS属性和特征信息添加至预置的决策树。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的网络，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个待安装电网网络，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种Web应用中布局兼容性问题的修复方法，其特征在于，包括：

获取布局兼容性问题；

提取所述布局兼容性问题的特征信息，所述特征信息包括所述布局兼容性问题的类型、所述布局兼容性问题中元素的CSS属性和HTML属性；

根据所述特征信息，通过预置的决策树查询所述布局兼容性问题的待修复CSS属性，其中所述预置的决策树为根据历史修复数据训练得到；

若查询到所述待修复CSS属性，则根据所述待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复所述布局兼容性问题的修复值；

若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值；

根据所述修复值，对所述布局兼容性问题进行修复。

2.根据权利要求1所述的Web应用中布局兼容性问题的修复方法，其特征在于，所述获取布局兼容性问题，之后还包括：

根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

3.根据权利要求2所述的Web应用中布局兼容性问题的修复方法，其特征在于，所述根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题，包括：

根据所述布局兼容性问题中元素的面积大小，对所述元素按从小到大的顺序进行排序，得到排序后的元素序列；

遍历所述元素序列，根据每一所述元素在页面中的位置进行计算，并判断是否得到包含所述元素的父节点；

若是，则计算若干个所述父节点的大小关系，并根据若干个所述父节点对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

若否，则将所述元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

4.根据权利要求2所述的Web应用中布局兼容性问题的修复方法，其特征在于，所述根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题，包括：

获取每一组所述布局兼容性问题中面积最大的组节点，并得到若干个所述组节点中左上角的X坐标和Y坐标；

按照从上到下的渲染顺序对若干个所述组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个所述组节点中左上角的X坐标进行排序，得到排序后的布局兼容性问题。

5.根据权利要求1所述的Web应用中布局兼容性问题的修复方法，其特征在于，所述若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值，之后还包括：

通过ID5算法将所述待修复CSS属性和所述特征信息添加至所述预置的决策树。

6.一种Web应用中布局兼容性问题的修复装置，其特征在于，包括：获取模块、提取模块、查询模块、第一搜索模块、第二搜索模块和修复模块；

所述获取模块，用于获取布局兼容性问题；

所述提取模块，用于提取所述布局兼容性问题的特征信息，所述特征信息包括所述布局兼容性问题的类型、所述布局兼容性问题中元素的CSS属性和HTML属性；

所述查询模块，用于根据所述特征信息，通过预置的决策树查询所述布局兼容性问题的待修复CSS属性，其中所述预置的决策树为根据历史修复数据训练得到；

所述第一搜索模块，用于若查询到所述待修复CSS属性，则根据所述待修复CSS属性，通过交替变量搜索方法进行搜索，以得到修复所述布局兼容性问题的修复值；

所述第二搜索模块，用于若没有查询到所述待修复CSS属性，则根据所述特征信息，通过交替变量搜索方法进行全局搜索，以得到所述待修复CSS属性和所述修复值；

所述修复模块，用于根据所述修复值，对所述布局兼容性问题进行修复。

7.根据权利要求6所述的Web应用中布局兼容性问题的修复装置，其特征在于，还包括分组模块和排序模块；

所述分组模块，用于根据所述布局兼容性问题中元素在页面中的大小和位置，对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

所述排序模块，用于根据分组后的布局兼容性问题在页面中的坐标信息，按照从上到下，从左到右的渲染顺序对每组布局兼容性问题进行排序，得到排序后的布局兼容性问题。

8.根据权利要求7所述的Web应用中布局兼容性问题的修复装置，其特征在于，所述分组模块包括第一排序子模块、计算判断子模块、计算分组子模块和分组子模块；

所述第一排序子模块，用于根据所述布局兼容性问题中元素的面积大小，对所述元素按从小到大的顺序进行排序，得到排序后的元素序列；

所述计算判断子模块，用于遍历所述元素序列，根据每一所述元素在页面中的位置进行计算，并判断是否得到包含所述元素的父节点；

所述计算分组子模块，用于若是，则计算若干个所述父节点的大小关系，并根据若干个所述父节点对所述布局兼容性问题进行分组，得到分组后的布局兼容性问题；

所述分组子模块，用于若否，则将所述元素作为一组布局兼容性问题，得到分组后的布局兼容性问题。

9.根据权利要求7所述的Web应用中布局兼容性问题的修复装置，其特征在于，所述排序模块包括获取子模块和排序子模块；

所述获取子模块，用于获取每一组所述布局兼容性问题中面积最大的组节点，并得到若干个所述组节点中左上角的X坐标和Y坐标；

所述排序子模块，用于按照从上到下的渲染顺序对若干个所述组节点中左上角的Y坐标进行排序，按照从左到右的渲染顺序对若干个所述组节点中左上角的X坐标进行排序，所述得到排序后的布局兼容性问题。

10.根据权利要求6所述的Web应用中布局兼容性问题的修复装置，其特征在于，还包括添加模块；

所述添加模块，用于通过ID5算法将所述待修复CSS属性和所述特征信息添加至所述预置的决策树。

Images