Providing a good user experience on the ever‐increasing number and variety of devices being used to browse the web is a difficult, yet critical, task. With responsive web design, front‐end web developers design web pages so that they dynamically resize and rearrange content to best fit the dimensions of a device's screen. However, when making code modifications to a responsive page, developers can easily introduce regressions from the correct layout that have detrimental effects at unpredictable screen sizes. For instance, the source code change that a developer makes to improve the layout at one screen size may obscure a page's content at other sizes. Current approaches to testing are often insufficient because they rely on limited tools and error‐prone manual inspections of web pages. As such, many unintended regressions in web page layout often go undetected and ultimately manifest in production websites. To address the challenge of detecting regressions in responsive web pages, this paper presents an automated approach that extracts the responsive layout of two versions of a page and compares them, alerting developers to the differences in layout that they may wish to investigate further. We implemented the approach and empirically evaluated it on 15 real‐world responsive web pages. Leveraging code mutations that a tool automatically injected into the pages as a systematic simulation of developer changes, the experiments show that the approach was highly effective. When compared with manual and automated baseline testing techniques, it detected 12.5% and 18.75% more injected changes, respectively. Along with identifying the best parameters for the method that extracts the responsive layout, the experiments show that the approach surpasses the baselines across changes that vary in their impact, but works particularly well for subtle, hard‐to‐detect mutants, showing the benefits of automatically identifying regressions in web page layout.

中文翻译：

---

自动识别响应式网页布局中的潜在回归

在越来越多的用于浏览网络的设备上提供良好的用户体验是一项艰巨而关键的任务。通过响应式Web设计，前端Web开发人员可以设计网页，以便他们动态调整大小和重新排列内容，以最适合设备屏幕的尺寸。但是，在对响应页面进行代码修改时，开发人员可以轻松地引入来自正确布局的回归，这会对无法预测的屏幕尺寸产生不利影响。例如，开发人员为了以一种屏幕尺寸改善布局而进行的源代码更改可能会使其他尺寸的页面内容难以理解。当前的测试方法通常是不够的，因为它们依赖于有限的工具和易于出错的网页手动检查。因此，网页布局中的许多意外退缩通常都未被发现，并最终在生产网站中体现出来。为了解决在响应式网页中检测回归的挑战，本文提出了一种自动方法，该方法可以提取页面的两个版本的响应式布局并进行比较，从而提醒开发人员可能希望进一步研究的布局差异。我们实施了该方法，并在15个真实的响应式网页上进行了经验评估。利用工具自动注入页面中的代码突变作为开发人员系统化的系统模拟，实验表明该方法非常有效。与手动和自动基准测试技术相比，它分别检测到了12.5％和18.75％的注入变化。