我们如何测试Web UI,以查看它在不同浏览器中是否均匀呈现?

时间:2020-03-06 14:24:54  来源:igfitidea点击:

诸如Selenium之类的工具非常适合测试Web UI上的用户交互。但是,我很好奇人们采用什么方法来严格测试和验证网页是否可以在一组浏览器中正确显示?

这有可能吗?

解决方案

手动吗?

如果我们要进行严格测试,我看不到其他选择。只需安装尽可能多的不同浏览器并在所有浏览器中进行测试。当然,这包括大多数流行浏览器的不同版本,我们需要在Windows,Linux和Macintosh上进行检查。

我可以推荐浏览器快照,我们可以在其中提交页面,并在各种浏览器中启用或者禁用Flash和JavaScript等各种设置的情况下呈现页面。最后,我们仍然需要手动安装FF,IE6-8,Opera和Safari / Chrome。另外,如果我们有使用Mac的朋友(如果使用Mac,则是PC),也请他们在Safari中进行测试,因为我个人发现它们在呈现同一页面的方式上存在差异。

我还建议我们主要在Firefox中进行开发,并在工作时定期在IE6中进行检查。 IE6是最容易搞砸的一种,因此,如果在这两者中均能正常工作,则更有可能在所有方面都能正常工作。

当我们发现渲染异常时,请先尝试在标记和CSS中修复它,然后再诉诸CSS hack,因为它们可能会在以后或者在其他浏览器中引发"有趣的"问题。

如果我们只想查看布局是否正确,只需将网站提交到BrowserShots.org并稍后访问以查看屏幕截图。

如果要测试功能(JavaScript等),则需要手动进行测试。

以前,我曾将WM用于不同版本的IE,但我发现了一些用于测试布局的新工具,以及与此工具一起使用的UI,用于FF的链接使用fire bug扩展,这些工具用于手动测试。

我们只需要测试少数浏览器,因为有些浏览器共享一个通用的渲染引擎(Gecko或者Webkit)。在不说明原因或者原因的情况下,以下是当前的观点(2009年):

  • 使用Firefox或者Opera(在任何平台上)构建网站。 BTW Opera使用自己的Presto引擎;
  • 测试以上未使用的任何一项。
  • 验证(X)HTML和CSS(重要!)。
  • 在> = IE7中进行测试,并记下毛刺(如果有)。
  • 对每个版本的IE在单独的样式表中使用条件注释-切勿使用CSS hack,因为它们会过时。
  • 如果愿意并在IE <7中进行测试,或者使用条件注释(礼貌地)要求用户升级其IE版本。
  • 在Safari(Webkit)中测试。
  • 不要在Chrome中进行测试,我们已经通过代理(Webkit)获得了!
  • 请勿在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,因此旧版本中的功能可能会中断或者失败悄悄。