web常见产品问题及预防

qq_27004843 2018-01-26 11:48:19

1. 分辨率兼容性
产品的网页通常保证在1024*768的分辨率下显示正常，但是常常忽略
800*600分辨率下的显示情况，还有其他特殊要求的分辨率
如果页面设计明确只考虑1024*768的需求，则只在1024*768下验证各个
产品页面的显示正确无误
预防方法：
产品：需要明确产品需要兼容的常见屏幕分辨率
开发：网页页面的设计需要针对多种屏幕分辨率制定设计规范，并依据设计规范进行开发
测试：在不同分辨率下验证页面显示的兼容正确性

2. 浏览器兼容性
目前市场上的主流浏览器如下：
a. IE 6.0-11
b. 360 浏览器
c. 猎豹浏览器
d. QQ 浏览器
e. Chrome 浏览器
f. FireFox 浏览器
通常情况下要保证IE6-11和360 浏览器下的兼容性，需要保证页面不变型，
Js执行均正确

预防方法：
产品：依据主流的浏览器市场占比，评估你需要兼容的浏览器
开发：针对需要兼容的浏览器类型和版本，指定浏览器兼容设计开发规（CSS和Js 为主），并不断总结兼容性的经验教训
测试：在产品要求兼容的浏览器类型和版本下，进行兼容性测试

3. Link问题
所有链接是否按指示那样确实链接到了该链接的页面
所链接的页面是否存在
保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面
链接的打开方式是否合理（在当前窗口中打开、打开新窗口）
有死链

预防方法：
产品：提供的需求中明确是否需要链接以及链接的位置以及链接的打
开方式
测试：死链测试可以采用工具自动进行

4. 快捷键和焦点
Tab键和焦点的切换：在测试的页面中使用Tab键可以在全页面的所有元素进行焦点切换、并且要将相邻元素的 tab键切换顺序做到关联。
如：
a. 用户打开登录首页，则焦点应该默认显示在用户名输入框中
b. 在用户名输入框输入用户名之后，按下tab 键后，焦点应该切换到密码输入框中，而不是切换到其他元素上。
c. 输入密码后，按下tab键可将焦点切换到“保存密码”的复选框或者登录按钮以上操作，均对偏好使用快捷键的用户给于更友好的支持。

预防方法：
产品：考虑页面的默认焦点设定位置，设定tab键在界面上切换焦点的顺序
开发：依据产品人员的要求实现默认焦点位置，和tab 键的切换顺序
测试：验证默认焦点位置和tab切换的顺序

5. 前进、后退和刷新
IE 有一个特性：就是允许前进、后退到某一个页面或在当前页面刷新，在某些特殊业务场景的要求下，用户进行前进、后退和刷新当前页面的操作，会造成数据不完整、校验失败或者重复提交的情况。

预防方法：
产品：明确哪些敏感页面不允许前进、后退和刷新，一般情况下充值和支付等相关的页面或者其他数据提交页面禁止后退和刷新后提交。
开发：从技术层面考虑后退和前进操作是否会造成系统漏洞，让用户重复充值或者支付。如果用户尝试后退，则让页面强制失效或者禁止后退。
测试：和产品确认禁止后退的操作限制页面，进行针对性测试

6. 页面提示语言、js提示语言、程序提示语言
通常情况下，产品人员并不会将产品需求细化到某句话应该如何提示用户，所以不同的程序员会根据自己的语言特点来提示用户，这就造成了不同程序员提示的语言风格完全不一样，造成产品友好度下降。

预防方法：
产品：产品人员和开发人员一起制定尽可能大而全的产品提示语言规范，并且作为规范说明提供给开发人员进行使用。
开发：遵守语言说明规范，并且针对各种系统的要求不断补充和规范提示
测试：测试过程中，验证语言是否符合指定的语言规范

语言文字提示：
a. 全角字符和半角字符都要使用一个空格分开
b. 英文和数字之间要有空格分开
c. 汉字和英文、数字要有空格分开
d. 带有汉字的话要使用全角字符
e. 语言中不要混用全角和半角标点
f. 在语言中，永远不要用“你”这个字，要做一些操作步骤描述的时候，要多用“请”字

7. 文字缩略和折行
输入框提交很长的纯英文字母或者数字（不带任何全角字符和中文），并且不换行，则提交数据后，页面可能被此相关字符拉伸的特别长。

预防方法：
开发：提交公共处理字符的程序，解决上述问题，在所有输入框中增加相关处理
测试：所有输入框需要进行此输入测试，保证页面不会被用户的恶意输入拉长

8. 图片的显示和链接
图片是否增加链接通常会被开发人员忽略掉图片的显示位置通常会显示不同像素大小和比例的图，所以需要明确定义大图片如何缩减成为小图片的策略，以及小图片如何拉伸显示为大的图片。

预防方法：
产品：提供的需求中明确图片是否需要链接以及链接的url地址以及点击后实在当前页打开，还是弹出新页面打开。明确用户上传图片的显示方法，采用等比缩放，还是原大小显示，还是自适应显示
开发：按照产品要求进行开发，针对图像的显示开发统一显示模块
测试：点击图片链接，验证图片链接的正确性和打开方式是否符合产品设计要求。传不同格式的图片（长方形图、正方形的图、原型图、超大图和超小图)，验证图片显示策略符合产品

9. 重复提交
用户提交数据页面，用户有可能连续多次点击提交按钮，造成数据的重复提交。
黑客或者不良用户通过抓包可以获取提交的url ，进行尝试重复提交。

预防方法：
开发：点击“提交”后，将按钮变为Disable状态，禁止用户再次点击。针对每条提交的数据需要增加校验参数，方式不良用户通过其他工具恶意提交。
测试：通过页面验证按钮点击后的状态，通过工具发送重复提交的请求，验证系统是否可以处理重复提交的问题（金融系统需重点测试）

10. 输入判断问题
所有键盘输入的特殊字符，均可以正常保存
需要特别处理英文单引号、英文双引号等引起程序错误的问题
需要处理“ <”、“ /”和“ \”等容易保存出错的字符
数字框只能输入数字的内容
日期框需要判断日期是否合法
文本框需要判断字段长是否限制了
对于空格的处理，如果系统想trim掉字符串最开头和最后的空格，则需要整个儿系统都使用此策略，否则会造成数据传递不一致的问题
需要前台页面使用js来判断输入的合法性，同时后台逻辑也要添加判断输入合

预防方法：
开发：开发公共处理特殊字符的模块，在系统中进行规范应用
测试：对所有输入字段，进行输入判断测试，超长、空、特殊字符、 utf8字符等，并验证其他页面输入有效性，验证前台和后台均加有输入判断逻辑。

11. 多个ie同时访问
用户可能打开不同的IE使用相同的用户登录后进行操作，程序处理的时候要考虑到数据的一致性和同步问题
多个IE使用不同用户，则cookie操作不会出现用户信息混乱的问题

预防方法：
开发：提前考虑到多个IE操作和多用户操作的使用场景，在使用cookie本地信息时需要做好针对性的程序处理，依据以往出现的问题设计开发规范
测试：按照多浏览器和多用户的使用情况，进行更多场景的测试

12. 安全考虑
在URL中不要带有明文的用户信息写代码的时候，不要把密码等敏感的用户信息明文的显示在url中
 即使要传递密码参数也不要使用pwd、 passpord这样的参数名称来进行传递，防止被截获
要在传递参数的操作中使用NoCache参数，防止将url参数进行缓存

预防方法：
开发：建立数据传输技术规范和参数命名规范标准，严格参照执行，防止信息被拦截，造成应用系统的信息泄露
测试：在缓存目录验证缓存信息是否有敏感信息，通过抓包方式验证是否暴露了敏感信息

...全文