Web applications can be accessed through a variety of user agent configurations, in which the browser, platform, and device capabilities are not under the control of developers. In order to grant the compatibility of a web application in each environment, developers must manually inspect their web application in a wide variety of devices, platforms, and browsers. Web applications can be rendered inconsistently depending on the browser, the platform, and the device capabilities which are used. Furthermore, the devices’ different viewport widths impact the way web applications are rendered in them, in which elements can be resized and change their absolute positions in the display. These adaptation strategies must also be considered in automatic incompatibility detection approaches in the state of the art. Hence, we propose a classification approach for detecting Layout Cross-platform and Cross-browser incompatibilities, which considers the adaptation strategies used in responsive web applications. Our approach is an extension of previous Cross-browser incompatibility detection approaches and has the goal of reducing the cost associated with manual inspections in different devices, platforms, and browsers, by automatically detecting Layout incompatibilities in this scenario. The proposed approach classifies each DOM element which composes a web application as an incompatibility or not, based on its attributes, position, alignment, screenshot, and the viewport width of the browser. We report the results of an experiment conducted with 42 Responsive Web Applications, rendered in three devices (Apple iPhone SE, Apple iPhone 8 Plus, and Motorola Moto G4) and browsers (Google Chrome and Apple Safari). The results (with F-measure of 0.70) showed evidence which quantify the effectiveness of our classification approach, and it could be further enhanced for detecting Cross-platform and Cross-browser incompatibilities. Furthermore, in the experiment, our approach also performed better when compared to a former state-of-the-art classification technique for Cross-browser incompatibilities detection.

中文翻译：

---

使用 DOM 元素分类的布局跨平台和跨浏览器不兼容性检测

可以通过各种用户代理配置访问 Web 应用程序，其中浏览器、平台和设备功能不受开发人员控制。为了在每个环境中授予 Web 应用程序的兼容性，开发人员必须在各种设备、平台和浏览器中手动检查他们的 Web 应用程序。根据所使用的浏览器、平台和设备功能，Web 应用程序的呈现可能不一致。此外，设备的不同视口宽度会影响 Web 应用程序在其中呈现的方式，其中元素可以调整大小并更改它们在显示中的绝对位置。在现有技术的自动不兼容性检测方法中也必须考虑这些适应策略。因此，我们提出了一种用于检测布局跨平台和跨浏览器不兼容性的分类方法，该方法考虑了响应式 Web 应用程序中使用的适应策略。我们的方法是以前的跨浏览器不兼容性检测方法的扩展，其目标是通过在这种情况下自动检测布局不兼容性来降低与不同设备、平台和浏览器中的手动检查相关的成本。所提出的方法根据其属性、位置、对齐方式、屏幕截图和浏览器的视口宽度，将构成 Web 应用程序的每个 DOM 元素分类为不兼容或不兼容。我们报告了一项使用 42 个响应式 Web 应用程序进行的实验的结果，这些应用程序在三种设备（Apple iPhone SE、Apple iPhone 8 Plus、和摩托罗拉 Moto G4）和浏览器（Google Chrome 和 Apple Safari）。结果（F-measure 为 0.70）显示了量化我们分类方法有效性的证据，并且可以进一步增强检测跨平台和跨浏览器的不兼容性。此外，在实验中，与以前用于跨浏览器不兼容性检测的最先进的分类技术相比，我们的方法也表现更好。