如何使用javascript测试框架测试web布局

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

谢谢

---

巴拉尼

你打算测试什么？如果需要知道某个元素是否与窗口的边框齐平，

clientLeft==0

是最佳选择。如果要确保两个图元相邻，则必须比较公共边框的位置

---

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

我从未尝试过这个，但我认为这比它值得付出的努力多得多

布局问题只有在它们很明显的情况下才重要，如果它们很明显的话，人类会用比编写和维护检查相同内容的脚本所需的更少的努力来发现它们

---

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

是的，这就是我认为它很粗糙的原因。但我不确定如果不包含所有元素，是否可以检测重叠或错误布局。在我的测试中，我为所有重要页面创建了一个静态HTML版本，这样我就可以将它们加载到web浏览器中，并检查布局是否有任何大的异常。当我找到一个时，我添加一个测试。但既然大多数事情都会成功，就没有理由去测试所有事情。当然，这并不是世界末日。但是人们确实会根据可用性、外观和感觉来判断网站的质量。事实上，只是对外观和感觉（至少是这种）进行编程测试太耗时了，根本不起作用。您的布局更改的速度可能快于您更新测试的速度。我想知道一个截图不同的工具是否可行。它必须忽略页面中内容不同的区域。顺便说一句，我注意到外观和可用性是两件不同的事情。你根本无法自动化可用性测试。