02- web UI测试与UI Check List

UI英文是 user interface 。所以UI测试就是用户界面测试。

Web UI测试

用户界面测试：user interface testing，UI Testing指软件中的可见外观及其与用户交互的部分。

包括

1.菜单

2.对话框

3.窗口

4.其他控件

UI测试的目标

UI测试是测试用户界面的庚哥是否满足客户要求，文字是否正确，页面是否美观，文字，图片组合是否完美，操作是否友好等。

UI测试的目标是确保用户界面通过测试对象的工鞥呢为用户提纲相应访问或浏览功能。确保用户界面 符合公司或行业标砖。包括用户友好性，人性化，易操作性。

WebUI整体页面测试

整体界面是指整个web应用系统的页面结构设计，是给用户一个整体感，例如：

1.当用户浏览web应用系统时是否感到舒适，是否凭直觉就知道要找的信息在什么地方？

2.整个web应用系统的设计风格是否一致。

3.对所有的可用性测试来说，都需要外部人员的参与，最好是最终用户的参与。

web整体页面测试点

1.调整页面大小，检验页面的布局是否被压缩，重叠，覆盖等；

2.检查需要滚动条的页面是否提供的滚动条，并可有效滑动。

3.页面被内容拉长，拉宽后，检查页面的文字是否还能正确显示，对齐方式，格式都保持一致，正常；

4.对外文和繁体的显示，需要支持，不允许出现乱码；

5.页面中的tab键可以正常切换，支持tab按键切换的要检验是否的正确。

6.多个tab页面间的数据交换更新要检验正确性；

7.页面推荐的内容要保证有结果，可以正常使用。

Web UI导航

导航：引用用户在web页面内操作的方式。

导航类型：

1.超链接

2.菜单

3.按钮

4.对话框

5.列表

6.窗口

web导航测试点

1.web应用系统是否易于导航，导航是否直观？

2.web系统的主要部分是否可以通过主页进行访问、

3.web应用系统导航是否准确。

4.web应用系统的页面结构，导航，菜单，连接的风格是否一致。

web UI导航测试点

1.对广告图片的点击是否正常，点击后给出的页面是否正确；

2.检查页面链接是否正常点击，点击后链接到的位置是否正确；

3.链接点击后是否长长的发生颜色变化（若特殊处理也需要相应的检查）；

4.链接打开的方式是否合理（在当前窗口打开，打开新窗口），是否符合产品设计；

web UI图片

在web应用系统中，适当的图片和动画技能起到广告宣传的作用，又能起到美化页面的功能。

一个web应用系统的图形可以包括图片，动画，边框，颜色，字体，背景，按钮等。

web UI 图片测试点：

1.要确保图形有明确的用途

2.web应用系统的图片尺寸要尽量的小，并且能清楚地说明某件事情，一般都连接到某个具体的页面。

3.验证所有页面字体的风格是否一致；

4.背景颜色应该与字体颜色和前景颜色相搭配；

5.检查图片的尺寸，位置是否符合需求；

6.对广告图片的点击是否正常，点击后给出的页面是否正确；

7.页面上具有相同意义的图标应该保持一致；

8.对于链接其他网站的图片，无法显示时是否有容错性处理。

web UI内容测试

内容测试用来检验web应用系统提供信息的正确性，准确性和相关性，例如：

1.在商品加个列表中，错误的加个可能引起财政问题甚至导致法律纠纷。

2.信息的准确性是指是否有语法错误或拼写错误。

2.信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般web测试点中的所谓“相关文章列表”

webUI静态文字测试

1.内检查一个页面或者一组中多个页面的字体，size，颜色，位置等因素是否符合需求；

2.检查页面文字图标的间距，行距是否统一，对齐方式是否统一；

3.静态文字的含义是否符合需求；

4.静态文字中是否存在拼写错误；

web UI测试典型错误小结

文字或图片重叠，剪裁，没对齐。

重复菜单或连接

提示信息错误，tooltip不显示。

js错误问题

页面连接错误

页面访问资源不可用

出现‘404页面错误’

按钮不工作，功能没有实现

错误信息提示不合理

文档无法下载

web客户端平台相关性测试

1.最常见的Windows Unix macintosh linux等

2.web应用系统的最终用户究竟使用哪一种操作系统，取决于用户系统的配置，可能会发生兼容性问题。

同一个应用可能在某些操作系统下能正常运行，但在另一个操作系统下可能会运行失败

在web系统发布之前，需要在各种操作系统下对web系统进行兼容性测试。

通常会UI测试不需要单个写测试用例，可以编写一个测试点，或者checklist，如下：

UI Check List

1、如果页面内容超过一个页面可以显示的量，检查是否有滚动条操作
2、改变浏览器页面大小，移动浏览器，看控件展示是否错位
3、动态显示的页面，页面最小化或者将其置于后台，再将其打开，检查动态显示部分是否正常运行，是否有浏览器卡死现象
4、按tab键，看是否能跟踪到页面的每个控件
5、检查是否相关的下拉框，工具条，滚动条是否运行正常
6、当有多个tab页面或者多个状态流程时，当前操作的状态或者流程的图标是否适当加亮
7、受限制的按钮或者tab页是否有还是正常明亮色？有无变暗？比如，已经有四个子账号，“添加子账号”按钮是否变暗，不能再次操作等
8、更新，添加或者删除一个内容时，相关显示的内容是否同时更新
9、当前页面的声音，不同内容的字体颜色和大小，和窗口的操作是否符合规范（比如：错误提示的颜色，字体大小是否一致，正确操作提示信息的颜色是否一致等）
10、检查错误提示信息是否与对应的字段关联
11、检查每个页面的title， 是否全部显示，显示的内容是否符合当时的业务逻辑
12、检查页面的风格是否满足客户的设计要求，文字和图片组合是否正确，操作是否友好
13、当前页面是否能顺利正确地关闭
14、菜单功能的名字是否具有字解释性
15、是否有无用的按钮或者功能？
16、检查所有的超链接，链接和链接内容是否正确， 该有链接的地方是否有链接
17、在不能输入非数字的字段中，通过中文输入其他字符
18、检查加密字段，能否通过复制按钮，将加密内容复制出来
19、页面中的每个字段或者功能，该有描述或者功能解释，字段解释的地方是否都有
20、项目中，同一个字段的术语，在所有页面中是否一致
21、在上传图片的功能中，选择路径以后，检查路径字段的路径是否与选择的路径一致
22、检查有字符限制的地段，是否可以输入限制意外的字符
23、检查需要在同一个窗口跳转的页面，是否在另一个tab窗口打开；同样的，需要在新的tab窗口打开的是否覆盖了现有的窗口
24、打开一个新的链接或者新的页面时，检查浏览器中的链接是否合理，是否有泄漏用户资料的参数
25、本地化测试中，是否显示有其他国家的语言
26、本地化测试中，检查电话号码，身份证件号码，邮编，全名，货币符号，标点符号，货运，税费等是否符合国人标准
27、本地化测试中，英文翻译成中文的是否是直译的，是否符合本地化环境和业务术语的标准