如何测试Web UI以查看它是否在不同浏览器中统一呈现？

Question

像Selenium这样的工具非常适合在Web UI上测试用户交互。但是，我很好奇人们在严格测试和验证网页是否在一组浏览器中正确呈现的方法是什么？

这甚至可能吗？

Answer 1

我可以推荐browsershots，您可以在其中提交页面并在各种浏览器中呈现这些页面，其中包含打开或关闭的各种内容，例如Flash和JavaScript。在一天结束时，您仍然需要安装FF，IE6-8，Opera和Safari / Chrome进行手动测试。此外，如果你有一个使用Mac的朋友（或者如果你使用的是PC的PC）也让他们在Safari中进行测试，因为我个人发现他们两者呈现相同页面的方式存在差异。< / p>

我还建议您主要在Firefox中开发，并在工作时定期在IE6中进行检查。 IE6是一个大部分会搞砸的，所以如果它在两者中都有效，那么它更有可能全部工作。

当你发现渲染怪异时，首先尝试在你的标记和CSS中修复它，然后再使用CSS hacks，因为它们可能会在以后或其他浏览器中导致“有趣”的问题。

Answer 2

您需要测试少数几个浏览器，因为有些浏览器共享一个共同的渲染引擎（Gecko or Webkit）。没有解释是什么或为什么，这是当前的智慧（2009）：

1. 使用Firefox或Opera（在任何平台上）构建您的网站。 BTW Opera使用自己的Presto引擎;
2. 在上述任何一种情况下进行测试。
3. 验证（X）HTML和CSS（重要！）。
4. 在＆gt; = IE7中进行测试并注意毛刺，如果有的话。
5. 在每个版本IE的单独样式表中使用conditional comments - 从不使用CSS黑客，因为它们会过时。
6. 在IE中测试＆lt; 7如果你喜欢并做同样的事情，或者使用条件评论来要求用户（礼貌地）升级他们的IE版本。
7. 在Safari（Webkit）中测试。
8. 请勿在Chrome中测试，您已经通过代理（Webkit）进行测试！
9. 不要在IE for Mac中测试 - 共享太低而且不再更新。

最后，尝试在Firefox，Opera，IE和Safari中扩大文本。 Opera还为手机提供手持仿真模式。

您现在将覆盖（戏剧性猜测）99.9％的浏览器设置。如果您使用的是OS X或Linux，则可以在Parallels或Wine等虚拟环境中运行Windows。显然Wine也有一个Windows二进制文件，但我找不到它。 警告：您需要确保您的虚拟环境允许IE阅读条件评论。

在实践中，我发现如果一个站点有有效的代码并且可以在Firefox，Safari和Opera中运行，那么它在IE7中可能没问题。唯一的HTML / CSS问题是IE的“haslayout”处理。如果您没有浏览器，BrowserStack是一个出色的在线测试服务。

最后，如果你正在使用Javascript，你需要经历一个类似的过程，问题是作为一个快速发展的领域，一些浏览器的新版本以越来越有效的方式处理Javascript，因此旧版本中的功能可能悄然破裂或失败。

Answer 3

手动？

如果你想进行严格的测试，我没有看到替代方案。只需安装尽可能多的不同浏览器并在所有浏览器中进行测试。当然，这包括最流行的浏览器的不同版本，您需要检查Windows，Linux和Macintosh。

Answer 4

如果您只想查看布局是否正确，只需将您的网站提交至BrowserShots.org，然后再访问以查看屏幕截图。

如果您想测试功能（JavaScript等），那么您需要手动测试。

Answer 5

以前我在不同版本的IE上使用W​​M，但是我发现了一些用于测试布局的新工具，以及使用此工具的UI，link用于FF使用fire bug扩展，这些工具用于手动测试