关于跨浏览器测试那点事

简介: Web 设计与开发师的一个重要工作环节是跨浏览器测试,谁让我们生活在这个既幸福又痛苦的时代,有那么多浏览器摆在我们面前,还有那个噩梦般总也摆脱不掉的 IE6。本文讲述了与跨浏览器测试有关的各种问题与知识,包括渲染,平台,设备以及 JavaScript 引擎。

Web 设计与开发师的一个重要工作环节是跨浏览器测试,谁让我们生活在这个既幸福又痛苦的时代,有那么多浏览器摆在我们面前,还有那个噩梦般总也摆脱不掉的 IE6。本文讲述了与跨浏览器测试有关的各种问题与知识,包括渲染,平台,设备以及 JavaScript 引擎。

梦幻五组合

IE 独霸天下的那些日子,Web 设计师不时陷入 IE 同它竞争者的口水战,然而,当一些新的,注重 Web 标准的浏览器出现时,事情发生了改变,IE 的统治地位受到了挑战。时过境迁,移动浏览器与新渲染引擎的出现,使 Web 设计者开始考虑跨浏览器测试的问题。如今,Web 设计者逐渐将目标固定在5或6个主要浏览器,然而事情并没有了结,一劳永逸是一个永远的梦。

Browser market shares. Source: Net-Applications.

尽管浏览器市场被5大浏览器主导,但是,也不能忽视那个占 0.87% 的其它。

一般来说,跨浏览器测试是针对不同的渲染引擎,假如你已经针对 Trident,Gecko,Webkit,Presto 等主流渲染引擎做过了测试,似乎可以说已经是比较安全了。然而,针对更广泛的设备与平台的测试仍然必要,可以帮你发现很多潜在的问题。

 

Icons of Internet Explorer, Firefox, Chrome, Safari and Opera.

Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome and Safari) and Presto (Opera).

基础测试

目前,一个严重的问题是设备相关性。Apple 一意孤行拒绝在 iPhone 和 iPad 中支持 Flash,Apple 与 Adobe 相互攻击的声音不绝于耳。尽管 Flash 自己负责内容的渲染,但,仅仅在主流浏览器进行测试仍不足发现潜在的问题,拓展你的测试范围势在必行。

A Flash powered website.

Flash 自己渲染内容,但并不是所有浏览器都支持 Flash。

另一个问题是渲染引擎的版本,支持最新版本固然重要,然而很多设备仍在使用旧版本的渲染引擎,这要求我们同时针对渲染引擎的新旧版本进行测试。

Internet Explorer 6.0

Internet Explorer 6.0 使用的是 BUG 重重的旧 Trident 渲染引擎

渲染引擎的问题不仅存在于版本之间,还有不同的平台和设备,毫无疑问,针对各种平台,各种设备的测试会让你疯掉。为小屏幕进行设计着实不易,尤其当不同设备间还没有达成一致的时候。这在桌面系统中叶存在,同一个渲染引擎,在不同平台,仍有细微差别。

A mobile version of A List Apart.

A List Apart 对渲染差异十分重视,他们干脆为移动设备设计了单独的版本

除了渲染差异,跨浏览器兼容还有一个更重要的问题,javaScript 引擎。早期,人们对 JavaScript 唯一问题是,是否启用它,然而现在,那些拥有相同渲染引擎的不同浏览器往往拥有差别巨大的 JavaScript 引擎。你需要针对不同浏览器测试 JavaScript 的性能,尤其当你使用了大量 jQuery 绚丽效果的时候。

The Chrome Experiments website.

这是 Chrome 试验站点,用来展示 Chrome 的 JavaScript 的性能。

最后,是可访问性问题。你必须明白,当一些有某些方面的障碍的人访问你的站点的时候,可访问性问题会迫使他们只使用某种浏览器,在这种情形,你要记住,不能忽视这些常常被遗忘的人。

The Opera browsers built in screen reader.

Opera 尽管只占很小的市场份额,但它的语音功能对那些有特殊需求的人士来说,意味着全部

长远视角

可访问性问题,不同的 JavaScript 引擎,跨平台问题,渲染的差异,技术依赖等等问题会让你自叹命苦,然而这还不够,你还要研究你的目标用户。花一些时间和你的访问者进行沟通,了结他们的需求,比如,使用投票统计你的访问者所使用的浏览器分布,最终你会发现,你可能还要针对移动浏览进行设计,或者为 iPhone 设计。

The Piwik browser statistics dashboard.

类似的统计可以让你了解你的站点访问者的浏览器分布

不同平台的渲染引擎

以下是移动和桌面平台的浏览器渲染引擎清单,我们会看到越来越多的浏览器面世,因此,要为未来考虑。

The rendering engines commonly found on platform devices.

桌面和移动平台下,都有相当数量的渲染引擎

以下浏览器使用 Trident 引擎

Browsers that use the Trident or Tasman rendering engine.

以下浏览器使用 Gecko 引擎

Browsers that use the Gecko rendering engine.

以下浏览器使用 Webkit 引擎

Browsers that use the Webkit rendering engine.

而使用 Presto 引擎的浏览器则主要限于 Opera

Browsers that use the Presto rendering engine.

总结

或许你的网站没有任何错误,或许在每一个场合都看上去很棒,然而,对于真正的跨平台兼容,5大浏览器测试仍然不够。如果本文只教会你一件事,那就是,花时间同你的访问者沟通,分析他们的需求。另外,花时间测试各种平台,各种设备的每个渲染引擎,针对不同的 JavaScript 引擎进行性能测试。在一个 Web 主导的世界,花时间让你的站点延伸到尽可能多的人,是值得的。

 

本文国际来源:webdesignerdepot.com Browser Testing: A Family Tree (作者:Alexander Dawson

中文编译来源:锐商企业CMS 网站内容管理系统 官方网站

相关文章
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)
【2月更文挑战第13天】《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程) 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下。
254 1
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程)
【2月更文挑战第12天】《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程) 前边宏哥已经将环境搭建好了,今天就在Java项目搭建环境中简单地实践一下: 启动三大浏览器。按市场份额来说,全球前三大浏览器是:IE.Firefox.Chrome。因此宏哥这里主要介绍一下如何启动这三大浏览器即可,其他浏览器类似的方法,照猫画虎就可以了。
224 1
|
11月前
|
运维 Prometheus 监控
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
11月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
1460 1
|
11月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
885 1
|
Web App开发 缓存 Linux
高效Selenium测试技巧:轻松控制已开启的浏览器
【10月更文挑战第13天】在进行Selenium测试时,通常会启动新浏览器实例,但有时需要控制已开启的浏览器,以节省时间并更真实地模拟用户行为。这可通过设置Chrome为可远程控制并使用`Remote WebDriver`连接实现。需在启动Chrome时添加`--remote-debugging-port`参数,并通过Python脚本中的`webdriver.Remote`连接至指定端口。此外,还可利用会话ID(Session ID)重新连接浏览器,提高测试灵活性。需要注意浏览器版本兼容性及元素定位稳定性等问题,确保测试准确性和一致性。
962 1
|
Web App开发 XML Java
《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
【7月更文挑战第14天】这篇教程介绍了如何使用Java和Selenium构建一个支持跨浏览器测试的自动化测试框架。设计的核心是通过读取配置文件来切换不同浏览器执行测试用例。配置文件中定义了浏览器类型(如Firefox、Chrome)和测试服务器的URL。代码包括一个`BrowserEngine`类,它初始化配置数据,根据配置启动指定的浏览器,并提供关闭浏览器的方法。测试脚本`TestLaunchBrowser`使用`BrowserEngine`来启动浏览器并执行测试。整个框架允许在不同浏览器上运行相同的测试,以确保兼容性和一致性。
309 3
|
Web App开发 IDE Java
自动化测试谷歌浏览器和其驱动版本差不多却还是报错The chromedriver version (121.0.6167.184) detected in PATH at DPythonchromed
自动化测试谷歌浏览器和其驱动版本差不多却还是报错The chromedriver version (121.0.6167.184) detected in PATH at DPythonchromed
288 2
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
157 5

热门文章

最新文章