如何使用 javascript 测试框架测试网页布局答案

【问题标题】：How to test web layout using javascript testing frameworks如何使用 javascript 测试框架测试网页布局
【发布时间】：2011-01-28 15:11:23
【问题描述】：

有没有人尝试在不同的浏览器中测试 Web 应用程序的实际布局？我只能想到获取所有元素的实际尺寸，然后将其与预期值匹配。我认为这是一种粗鲁的做法。有没有更好的方法来实际测试布局？

谢谢巴拉尼

【问题讨论】：

【解决方案1】：

您打算测试什么？如果您需要知道某个元素是否与窗口的边框齐平，clientLeft == 0 是最佳选择。如果要确保两个元素彼此相邻，则必须比较公共边框的位置。

OTOH，检查每个值没有多大意义。布局可以是动态的，并且取决于屏幕分辨率、缩放系数和基本字体大小等因素。所以黄金法则（一如既往）是：知道你想测试什么，然后只测试那个。

【讨论】：

是的，这就是我认为它很粗糙的原因。但我不确定如果你不包含所有元素，你是否可以检测到重叠或错误的布局。
在我的测试中，我为所有重要页面创建了一个静态 HTML 版本，因此我可以将它们加载到 Web 浏览器中并检查布局是否有任何重大异常。当我找到一个时，我添加了一个测试。但由于大多数事情都会奏效，因此没有理由对所有内容都进行测试。

【解决方案2】：

我从未尝试过，但我认为这比它的价值要付出更多的努力。

布局问题只有在很明显时才重要，而且如果它们很明显，与编写和维护检查同一事物的脚本相比，人类会更轻松地发现它们。

此外，布局问题从来没有那么重要。例如，它们不会导致用户数据丢失。

【讨论】：

当然不是世界末日。但人们确实主要根据可用性、外观和感觉来判断您网站的质量
哦，确实，只是设置外观和感觉的程序化测试（至少是这种类型的）是如此耗时的，它不会起作用。您的布局可能会比您更新测试的速度更快。我想知道一个截取和区分屏幕截图的工具是否可行。它必须以某种方式忽略页面中具有不同内容的区域。
顺便说一下，我注意到外观和感觉和可用性是两个不同的东西。你根本无法自动化可用性测试。