布局测试 - 网页测试答案

【问题标题】：Layout Testing - Web Testing布局测试 - 网页测试
【发布时间】：2011-03-20 08:34:53
【问题描述】：

对于布局测试，我想知道最好的方法

根据链接Regression Testing for Styling and Layout of Web Apps，他们建议了浏览器截图

我想知道你们中是否有人在您的项目中使用过 Google 布局检测工具 - http://code.google.com/p/fighting-layout-bugs/

请分享您对使用自动化验证布局问题的想法

谢谢，湿婆

【问题讨论】：

标签： testing user-interface layout automation

【解决方案1】：

这是一个模糊而广泛的问题，但我会尝试回答：

是的，我用过这个。 Michael Tamm and Co. 更好地表达了我的想法。我整理了几个视频，这些视频对我在大约五周前实施 Fighting-Layout-Bugs 时很有帮助：

http://www.infoq.com/presentations/Fighting-Layout-Bugs

http://www.testingtv.com/2010/01/18/fighting-layout-bugs/

【讨论】：

【解决方案2】：

您可以为此使用 Galen 框架，请参阅此处的介绍：http://holisticon.github.io/presentations/jsunconf_galen/#/

基本上你在 DSL 中定义你的规范：

@ Overall layout | *
--------------------------
content
   visible
navbar
   visible
content
   below: navbar 370 to 410 px


@ navigation hidden on mobile | mobile
--------------------------
navbar-item-*
   absent


@ navigation shown on desktop | desktop
--------------------------
navbar-item-*
   visible   


@ Content should fit to screen size | mobile
--------------------------
content
   width: 100% of screen/width


@ Content should fit to screen size | desktop
--------------------------
content
   width: 80 to 90% of screen/width

您可以在此处找到更多示例代码：https://github.com/hypery2k/galen_samples

【讨论】：