Chrome 分辨率测试

    在平时测试过程中,会经常听到兼容性测试等,今天就来整理一下,详细如下。

1.兼容性测试概述

1.1 兼容性测试定义

    兼容性测试是指验证被测系统在不同的硬件平台、不同的应用软件之间、不同的操作系统、不同的网络环境中能否正常运行,有无异常的一种测试过程。

1.2 兼容性测试分类

    兼容性测试主要分为以下几类:

  • 1、浏览器测试

    检查被测试系统在不同浏览器中的WEB页面样式展示效果交互是否正常等。主流浏览器有ChromeEdgeFirefoxSafari等。

因为不同的浏览器使用的内核和所支持的HTML等有所不同,因此会出现在一种浏览器中正常,另一种浏览器不正常的情况出现。

  • 2.分辨率测试

    验证被测试系统在不同分辨下能否正常显示,常见的分辨率有2560*1440、1920*1080、1440*900等。

  • 3.操作系统

    操作系统又可以分为面向桌面操作系统、面向服务器操作系统、面向于移动端操作系统等。

桌面操作系统主要为Windows、Mac、Ubuntu等
服务器操作系统主要为Windwos Server、CentOS等
移动端操作系统主要为Android、iOS、HarmonyOS等

  • 4.硬件平台

    常见的硬件平台可以分为PC/服务器、手机、Pad

1.3 兼容性测试方法

    兼容性测试常用测试方法如下所示:

  • 手工测试

    通过人工测试被测系统在不同浏览器和操作系统上的主流程和界面等是否能正常运行和显示。

  • 借助于第三方工具或平台

    借助于第三方工具或平台来进行对被测试系统进行兼容性验证。

1.4 浏览器兼容性

1.4.1 测试点

    若要对一个被测试进行全方位的兼容性测试,工作量还是挺大的。我们以常见的浏览器兼容性做为切入点,其测试功能点主要如下所示:

1、界面

  • 1.在不同的浏览器中运行,其展示的页面要保持一致
  • 2.在不同浏览器中,字体是否有错位、重叠、显示是否完整等
  • 3.在不同浏览器中,窗体是否有异常拉伸和缩进
  • 4.图片是否显示在指定位置

注意事项:有些系统在不同的浏览器中运行,界面不一样,但实现了同样的功能,也是可以的。因为不同浏览器所使用的渲染引擎不一样导致。

2、控件

  • 1.在不同的浏览器中,所使用的控件都能正常运行
  • 2.在不同的浏览器中,各窗体上按钮、输入框等功能都能正常点击和输入

3、图片

  • 1.在不同浏览器中,图片大小是否相同
  • 2.在不同浏览器中,图片质量是否一致、有无拉伸和伸缩

4、动画/视频

  • 在不同浏览器中,各类动画和视频均可以正常播放等

5、响应时间

  • 在不同浏览器中,每个功能选项,响应时间相差不会太大,否则则是缺陷

6、链接

  • 在不同的浏览器中,各类链接能正常打开且能正常跳转到正确的链接地址

7、分辨率

  • 在不同的浏览器中,在不同分辨率下,页面能正常显示和进行交互

1.4.2 注意事项

    主要注意事项如下所示:

1.向前兼容和向后兼容:

    一般来讲,被测试系统能实现向前兼容,但不要求向后兼容。即新版本的系统可以正常读取、加载旧系统,并能正常的交互操作等。

2.异构数据库兼容:

    被测试系统需要考虑对不同的数据库平台的支持能力。系统是否可以直接连接,若不能,需要提供相应的兼容性转换工具等。

2. 浏览器分辨率测试

    浏览器分辨率测试是非常常见的一种兼容性测试。今天我就以Google Chrome 为例,来汇总整理一下其手动测试常用的工具,如下所示:

2.1 Chrome自带兼容性工具

    这里主要是Chrome自带的调试工具为例,操作步骤如下所示:

  • 1.F12打开调试模式–>Settings->Devices
  • 2.添加模拟器,如下所示:
01Chrome自定义设备.png

以上红色框中内容为必填填

    主要参数如下所示:

  • Device Name:设备名,可随意填写
  • Width:设备的宽
  • Height:设备的高
  • Device pixel ratio:设备像素比,设备上物理像素和设备独立像素比例,其计算方式如下所示:

devicePixelRatio = 屏幕物理像素/设备独立像素

    一个标准像素是160ppi,假设需要模拟设备为1920*1080手机端,则宽和高的计算结果如下所示:

- 分辨率:1920*1080
- 像素密度:400
- 设备像素比:400/160=2.5
- 设备独立像素-高=1080/2.5=432
- 设备独立像素-宽=1920/2.5=768
  • User agent String:用户代理,获取方法如下所示:
在浏览器地址栏中输入javascript:alert(navigator.userAgent),再复制过来即可
  • 最后是指设备类型,有Mobile/Mobile(no touch)/Desktop/Desktop(touch)根据实际情况选择。

  • 3.添加完成,勾选添加的自定义设备

  • 4.在页面选择添加的自定义设备即可

2.2 第三方工具

2.2.1 Resolution Test

    Resolution Test是一款为Chrome制作的调整窗口大小的工具插件,通过选择不同分辨率来打开相应大小的窗口。

  • 1.安装步骤

    在Chrome网上应用店搜索Resolution Test安装即可

  • 2.使用方法

    打开Resolution Test窗口,选择对应的分辨率,再点击View all selected即可,如下所示:

02ResolutionTest.png

2.2.2 Window Resizer

    Window Resizer也是一款为Chome制作的调整窗口大小的工具插件,从而让浏览器能适应不同大小的分辨率。

  • 1.安装步骤

    在Chrome网上应用店搜索Window Resizer安装即可

  • 2.使用方法

    打开Window Resizer插件,选择对应的分辨率,点击即可,如下所示:


03WindowResizer.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容