热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

软件测试工程师必备:全面解析Web应用的浏览器兼容性测试方法与工具

随着市场上浏览器种类的不断增多,特别是在平板和移动设备上的普及,确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具,帮助软件测试工程师全面掌握这一关键技能,以提高应用的用户体验和可靠性。

如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作。

同时,主流浏览器(IE,Firefox,Chrome,Opera,Safari)版本更新更加频繁,终端用户甚至不会感知这些浏览器版本的升级。

这两点就导致了对于日益增多的浏览器做兼容性测试显示十分必要,但也使得这种兼容性测试变得十分耗时。

通过全覆盖的测试,你就可以明确的知道你的站点支持哪些浏览器,哪些有兼容性问题。一个最简单的减少浏览器兼容性测试的办法,就是停止对老版本浏览器的支持。这个策略对一些公司是适用的,但并不适用所用的公司。

停止对老版本浏览器的支持,并不意味这你的产品在这些老版本上就没有bug, 这仅仅是你可以忽略那些老版本上的潜在问题,把精力放在那些当前支持的浏览器版本上。

一、分散风险

一个途径就是在多浏览器环境中执行日常的测试工作。

举个例子来讲,你要测试这样一个web应用:用户登入,生成报表,发送报表,退出系统。这个应用还包含一个管理功能,管理员或经理登入后可查看哪些人做了哪些改动。

为了覆盖更多的浏览器,你可以用一种浏览器来测试登入功能,在另一个浏览器中测试“发送报表”的功能,用第三种浏览器测试“审计变动”的功能。

这是一个有效的方法,在日常的功能测试的过程中,同时覆盖多浏览器兼容性测试。上面这个例子还是存在一些问题的,比如讲,如果“审计变动”这个功能在第一种,或第二种浏览器里是有问题,那么就会发现不了。这种方法节省下来的时间,可以让你在做兼容性测试策略时,更有侧重。

二、让其他人帮你做测试

对于一些明显的页面兼容性问题,有一些在线工具可以帮着你检查,例如Browser Shots,它可以将你的页面载入到它所支持的浏览器中(它支持浏览器种类和版本很丰富),然后截屏,你可以查看在这些浏览器下的载入情况了.

这是一个很棒的工具,但那些需要登入验证的应用,或则你的应用中包含的页面太多 ,这个工具就显得有点力不从心了.
在这里插入图片描述

三、和标准进行对比

你可以对你的站点进行HTML语法标准检查,如果通过了,在多浏览器兼容性上,你可以更有自信一点了,但即使通过了,还是总有一些浏览器渲染你的页面是会有兼容性问题。

四、自动化

Web UI的测试可以通过webdriver这个工具来实现自动化,可以使用selenium Grid来将自动化脚本在多浏览器上运行。如果不会写代码的话可以使用TestWriter,完全零编码进行测试。
在这里插入图片描述

前提是你得有Web UI自动化的投入。Web UI自动化可以发现一些功能上的问题,但对于多浏览器页面布局方面的差异,通过它是很难发现的。

五、Fight Layout Bugs

你可以写一些自动化脚本来检查页面在不同浏览器下渲染效果。Fighting Layout bugs是一个开源的工具,可以用来检查页面布局方面的bug

六、手工测试

你可以手工测试所有的浏览器版本,为了避免混淆,你可以将不同的浏览器安装在不同的虚拟机上(uedde的确这这样做的),当有其他人需要用是,可以直接克隆这些虚拟机,或则直接访问这些虚拟机。但这太耗时,费力了,但还是有必要做一次这样的多浏览器手工测试的。

七、分类

你可以依据内核来划分浏览器。

chrome & safari使用的是webkit内核,Firefox则是Gecko, IE系列的是Trident内核,Opera使用Presto内核。最新的Opera好像也开始使用webkit内核了。

这样你就可以认为,如果在chrome上没有问题,那么“理应”在safari也应该没问题。

八、模拟

市面上有一些工具可以模拟不同的浏览器,有一些浏览器也附带了工具来兼容老版本。但使用这些工具是要谨慎,这样的模拟并不一定准确。慎重。

九、outsource selenium

如果你没有条件搭建selenium grid测试环境,你可以尝试着使用Sauce Labs 和 testingbot 这样的服务。

多浏览器的支持我们心中永远的痛,特别是如今浏览器更新如此频繁的状况下。哎~ 你可以选择上面的适合你的方法。

PS:有些浏览器有兼容模式,可以通过兼容模式来模拟老版本。有些浏览器,如chrome,提供了开发者工具可以帮着定位问题。

最后感谢每一个认真阅读我文章的人,下面这个网盘链接也是我费了几天时间整理的非常全面的,希望也能帮助到有需要的你!

在这里插入图片描述

这些资料,对于想转行做【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!凡事要趁早,特别是技术行业,一定要提升技术功底。希望对大家有所帮助……

如果你不想一个人野蛮生长,找不到系统的资料,问题得不到帮助,坚持几天便放弃的感受的话,可以点击下方小卡片加入我们群,大家可以一起讨论交流,里面会有各种软件测试资料和技术交流。

敲字不易,如果此文章对你有帮助的话,点个赞收个藏来个关注,给作者一个鼓励。也方便你下次能够快速查找。

自学推荐B站视频:

零基础转行软件测试:38天自学完软件测试,拿到了字节的测试岗offer,堪称B站最好的视频!

自动化测试进阶:已上岸华为,涨薪20K,2022最适合自学的python自动化测试教程,自己花16800买的,无偿分享

在这里插入图片描述


推荐阅读
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
  • (1)搜狗搜索人物实战 importrequestsurlhttps:www.sogou.comweb?query李荣浩 #首先我们需要观察在搜狗输入李 ... [详细]
  • 代码:headersAccept:texthtml,applicationxhtml+xml,applicationxml;q0.9,imagewebp,image ... [详细]
  • CSS深入剖析text和column
    这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过 ... [详细]
  • 【原创】响应式网页设计基础【从零开始】
    2019独角兽企业重金招聘Python工程师标准响应式网页设计基础【从零开始】如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率 ... [详细]
  • iOS9中的WebKit 与 Safari带来的惊喜
    iOS9中的WebKit与Safari带来的惊喜-每个用过UIWebView的iOS开发者对其诸多的限制和有限的功能也深有感触。悻然,自iOS8推出WebKit框架后将改变这一窘境 ... [详细]
  • 使用Python下载Instagram卷轴原文:http ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • 在前一篇文章中,我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求,包括参数格式、请求封装等关键技巧,并通过“历史上的今天”API实例进行详细说明。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 在即将完成的人事项目中,报表管理问题依然未能得到有效解决。尽管前端采用了MVC开发模式,但与锐浪报表系统的集成存在兼容性问题。虽然简单查询所有数据相对容易实现,但用户希望能够在报表中进行更复杂的条件查询和直接操作。为满足这一需求,我们正积极探索优化方案,以提升系统的查询效率和用户体验。 ... [详细]
  • 本文详细解析了如何利用Appium与Python在真实设备上执行测试示例的方法。首先,需要开启手机的USB调试功能;其次,通过数据线将手机连接至计算机并授权USB调试权限。最后,在命令行工具中验证设备连接状态,确保一切准备就绪,以便顺利进行测试。 ... [详细]
  • 探讨.NET技术与Silverlight中控件拖放及复制功能的实现方法
    Silverlight拖动复制控件,就是将控件从一个容器中向另一个容器中拖动时,不是移动控件而把该控件到另一个容器中。这种情形在程序中经常遇到ÿ ... [详细]
  • 在PC端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在CSS标准文档中,视口也被称为初始包含块,它是所有 ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
author-avatar
客官真的真的不可以
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有