根据StatCounter的一项统计:在亚洲,有82%的移动用户使用着Android,在iOS上的用户数占比为17%,而其他操作系统的使用者则不到1%。在美国,有61%的人使用着iOS,只有38%的人使用Android。而且仍有10.5%的Windows用户仍在使用着Windows7。在用户设备的默认/首选分辨率方面,有着x像素、x像素和x像素等不同的规格。可见,就全球范围而言,Android主导着操作系统市场,其次则为Windows、iOS和OSX。同样,浏览器的市场以Chrome为主,其次是Safari、Firefox、SamsungInternet、Edge、Opera和UCBrowser。
最常见的跨浏览器兼容性问题
如今,各种Web应用往往是通过复杂的CSS、HTML5、JS和其他几个框架来构建的。不过,并非每个用户端的浏览器都会通过自我升级,来支持开发人员部署的各项新功能。据此,我们需要通过测试,来提前处置如下常见的跨浏览器兼容性问题:
浏览器的各个版本均不支持某些HTML5标签。不支持复杂的CSS、AJAX、JS、Flex功能,或在实现行为上有所差异。并非所有的浏览器都支持所有的图像格式(特别是PNG问题在一些旧版的IE浏览器上比较普遍)并非所有的媒体格式都能够得到支持(例如iPhone和Blackberry上的Flash问题)设备本身的限制。例如,残障人士的屏幕阅读器应用可能不支持网站内容的正常显示。因此,在数字化设备和用户偏好纷繁复杂的情况下,企业为了保证用户的UI/UX,需要仔细考虑如下问题:
如何以经济高效的方式为所有用户设计、开发和部署出健壮的应用程序?如何确保应用程序能够适用于所有用户?如何在客户使用的各种设备、操作系统、浏览器和屏幕分辨率上,提供无缝的用户体验?虽然在不同的场景下,上述问题有着不同的优先级,但是它们都引出了跨浏览器兼容性测试,这一主题。
什么是跨浏览器测试?
简而言之,跨浏览器兼容性测试是在各种设备、操作系统、浏览器、及其不同版本上对Web应用进行检查、验证、以及迭代式增强,使其能够对所有用户提供正常服务的方法。例如,对于拥有数十亿用户的Facebook之类的大型应用而言,在理想情况下,我们应当进行针对“浏览器A,版本B,操作系统C,屏幕分辨率D”等所有组合的测试。
手动与自动化跨浏览器测试
跨浏览器测试主要分为三大类:探索性测试、视觉测试和功能性测试。除了视觉测试需要手动开展之外,其他两类测试都可由自动化来完成。手动测试的弊端主要体现在:不仅耗费时间和资源,而且测试的覆盖面可能不够全面。因此,我们通常需要采用混合的测试策略。也就是说,开展跨浏览器兼容性测试的工程师,往往需要具备脚本的编写能力,可以使用Selenium,以及其他编程语言(如:Java、Python、C#、JS、PHP等),通过自动化的方式,来执行各项测试任务。据此,他们可以:
以自动化的方式,查看目标站点的所有HTML、JS和CSS代码,尽早发现它们在不同浏览器上显示和运行时的错误与警告。自动获取Web元素的屏幕快照,以便开展交叉验证。人工判断受测站点的美观性和对残障人士的操作友好性。在此基础上,自动化跨浏览器兼容性测试的好处主要体现在如下方面:
提供无缝的用户体验,保证内部版本的兼容性和质量。尽早、尽快地识别并评估可用性或功能性上的风险,进而按风险的优先级予以修复。作为CI/CD管道实施的关键阶段,自动化测试通过将Selenium之类的自动化工具,集成到DevOps的自动化策略中,可以缩短代码的发布周期。测试团队可以更加专注于编写健壮的脚本,而将繁琐的测试基础架构,交给诸如LambdaTest之类的云测试自动化服务。通过基于云的解决方案,我们不但可以避免人为的错误,而且能够一次性测试多种浏览器与设备的组合,以保障测试的覆盖率和准确性。如何开展有效的跨浏览器兼容性测试?
通常,我们需要通过如下四个阶段,来完成跨浏览器的测试。
设计此阶段涉及到彻底调查应用程序的目标市场,收集所需的可用性需求,通过设计测试路线图,以确保应用能够被成功地开发和部署。例如,如果您要为印度市场(那里仍有许多人在使用IE)构建B2B产品,而且该产品中需提供一个由WebGL支持的3D动画效果。那么,您需要考虑的一个因素便是:是否要支持IE11之前的版本。如果确实无法支持的话,产品应当能够在旧的版本上,让应用并不呈现此功能,以免破坏用户的UI/UX。
开发在此阶段,您需要将应用程序细化为单独的组件,以分解出不同的功能模块。据此,您可以为那些可能无法在各种浏览器或设备上良好呈现的功能,设计出独立的代码方案。此外,开发人员也需要考虑到硬件方面的限制,某些功能可能根本无法在某些设备上实现,因此需要事先设计好替代方法。
测试自动化测试工程师将在该阶段,通过如下方法测试每个新构建的功能:
首先,在稳定的主流浏览器(如:Safari、Chrome和Firefox)上测试应用程序,并确认不会出现任何妨碍应用呈现的错误。
接着,可以尝试使用lo-fi(低保真)的可访问性测试,来交叉验证应用是否需要少量的辅助技术(例如:仅适用于键盘或屏幕阅读器的环境)。
通过仿真器或虚拟机(当然如果买得起真实的物理设备则更好),进行不同设备、浏览器、及其版本的组合测试。
使用自动测试工具(如:SeleniumGrid)或商业服务(如:LambdaTest)来进一步提高跨浏览器兼容性测试的准确性、速度、以及浏览器环境的覆盖率。
其中,跨浏览器兼容性测试的要点清单可以总结为如下方面:
HTML、xHTML、jQUERY、CSS、JS、AJAX的验证SSL证书的验证HTML字符的编码和日期格式在不同的屏幕分辨率下,呈现响应式应用不同浏览器中布局的一致性,包括:字体样式、色彩渲染、导航、客户端表单验证、缩放功能等各种效果与功能,包括:动画、链接、插件、脚本等持续迭代测试和开发该阶段需要查找我们在上述测试阶段产生的错误、及其根本原因,进而缩小存在此类错误的浏览器版本、设备、分辨率的范围。当然,错误的原因可能并非来自应用的本身,也可能是浏览器或设备厂商造成的。因此,我们通过在类似的浏览器或设备进行深入测试,以评估错误的规模,进而报告给有关的开发团队。
跨浏览器兼容性测试的推荐工具和基于云的服务
目前,最受欢迎的Web和移动测试开源框架有:
SeleniumAppium基于商业云的跨浏览器测试应用,例如LamdbaTest之类基于云端的跨浏览器测试解决方案,提供了AI驱动测试、团队协作、增强的可视性、并行测试、自动化测试、按需扩容、布局截图捕获、以及录制测试会话等高级功能。下面,我为您列出了提交和报告不同浏览器错误的对应链接:
MozillaChromeEdgeOperaSafari而以下是各大主流浏览器平台的开发者测试链接。您可以有针对性地对即将发布的应用进行测试:
MozillaChromeEdgeOperaSafari跨浏览器测试的示例
总的说来,我们首先会在云端使用LambdaTest的免费版本设计自动化测试。接着,我们将使用Python在“jqueryui.