UI界面测试点罗列

背景

最近公司要做官网，出了一些设计图，让我写一些测试功能点和测试用例。由于官网界面大多都是静态页面，很少有业务功能，主要以UI为主，所以我大概罗列了一下UI界面的测试点，如果以后需要做UI界面测试，也可以提供一些思路。

主要从以下方面入手设计测试用例：

1. 内容显示

1. 文字内容显示是否和设计图一致，有没有错别字
2. 文字字体、样式、颜色、尺寸、文字间距、段落间距是否与设计图一致
3. 图片显示是否正确、完整
4. 图片、二维码等是否清晰，二维码是否可扫描
5. 图片位置、尺寸、方向、透明度是否和设计图一致

2. 页面显示

1. 页面数量、布局是否与设计图一致
2. 各个页面的title显示是否正确
3. 页面样式风格是否与设计图一致
4. 按钮风格是否与设计图一致
5. 列表对齐方式、位置、图标是否与设计图一致
6. 页面中有动画展示的，动画显示顺序、效果是否与设计图一致
7. 页面内容超过一屏时是否显示滚动条，拖动滚动条是否可以控制页面上下滑动
8. 刷新页面时是否默认回到页面顶部

3. 窗口

1. 窗口能否正常关闭
2. 窗口名称显示是否正确
3. 调整窗口大小时，页面是否按比例缩放，或出现滚动条让用户可以完整浏览页面
4. 窗口是否可以最大最小化
5. 多窗口的堆叠显示是否正确

4. 图标（包括logo）

1. 图标样式是否正确
2. 图标颜色、背景色是否与设计一致
3. 图标尺寸
4. 图标是否轮廓清晰、保证在不同背景下清晰显示

5. 导航栏（菜单栏）

1. 导航栏显示内容是否正确
2. 是否清晰标识当前所处页面菜单，标识方式和设计图一致
3. 点击某个菜单标签，是否可以显示对应页面，且不打开新的标签页
4. 菜单标签之间是否可以相互切换
5. 顶部和底部（如果有底部的话）的导航栏，点击是否均可跳转

6. 鼠标和点击

1. 鼠标滚轮是否可以控制页面上下滑动
2. 是否会根据不同内容显示对应的光标（箭头、手型、文本指针）
3. 鼠标移动到焦点上特效是否实现，移出焦点特效是否消失，特效和设计一致
4. 点击按钮，是否能跳转至对应页面或显示对应内容
5. 双击图片，图片是否可以放大显示
6. 如果有地图，鼠标在地图范围内滚动滚轮，地图是否可以随着滚轮滚动而缩放

7. 链接跳转

1. 系统上的链接是否有正确的链接地址，且能正确跳转
2. 是否存在无用的链接，即不需要做成链接的地方做成了链接，并且点击不能正常跳转或是跳转错误
3. 跳转链接是否会产生新标签页，期望和设计一致
4. 点击回退按钮，是否可以跳转回之前页面

8. 兼容性

1. 不同浏览器（PC端：chrome、firefox、edge、ie; 移动端：苹果自带的浏览器、安卓自带浏览器）
2. 不同分辨率，例如19201080、25601440
3. 不同操作系统：windows、ios

9. 性能

1. 页面响应速度（一般在3秒内用户体验效果较好）

10. 业务功能

根据业务逻辑，使用等价类划分、边界值、错误猜测、场景法等等测试方法设计功能用例，这是主要测试UI界面，业务功能就不做赘述

除此之外

上面提到的只是比较简单通用的静态界面测试时要考虑的功能点，除此之外，其实还有很多要考虑测试的点。
例如：

1. 页面中有视频、背景音乐
2. 页面中有地图
3. 弹窗测试
4. 易用性测试
5. 其他的界面交互测试
   等等，有很多场景，根据不同场景再去设计不同用例吧~