1.界面常见问题

1.1.对齐问题

• 设置左、中、右对齐，其中，数字一般为右对齐，文字常为左对齐；
• 栏目区域对齐，如下图所示，展现行数应该一致，控制不允许换行。

解决方案：

1.标题过长截断；

2.浮动显示全名。

1.2.文字用语业务化问题

解决方案：

规范界面用语，避免使用程序员技术语言，通过与业务人员沟通尽量贴近实际业务。

1.3.图标使用问题

图标的使用，为界面带来了活力，但是使用不当，让人产生疑问，如下图所示：

方案：

按图中文字描述，图片尽量与业务接近，并且区分开发。

2.复杂、灵活所带来的测试复杂度

系统场景描述如下：非数字敏感型表单提交数据到文档型数据库（MongDB），是通过遍历表单输入数据项形成JSON数据来完成的。

而通常开发结构的表单提交，是穷举表单数据项。因此，在集成测试时，凭经验进行白盒测试。

预测很准！

开发人员的确按传统思路实现代码的，并未按规范和设计来实现，因为麻烦。那么我们来分析代码为什么很难从功能上测试出问题呢?

/**
 * 返回业务数据的json对象
 */
function saveObjectByJson() {
    var obj = {};
    $.each($(‘input[type="text"]‘), function (index, value) {
        if ($(value).attr(‘id‘))
            obj[$(value).attr(‘id‘)] = $(value).val();
    });

    obj.standard_Type = $(‘#standard_Type‘).val();
    obj.productType = $(‘#productType‘).val();

    $.each($(‘textarea‘), function (index, value) {
        obj[$(value).attr(‘id‘)] = $(value).val();
    });

    return JSON.stringify(obj);
}

此代码在功能上基本上没有问题，在单元测试时也能顺利通过，如果再新建个表单，增加下拉列表控件。

    <select name="select">
    </select>

测出问题时，开发人员修改代码，增加识别“select”处理，功能好使。

此套路在本项目中将是效率低下的，应为可能后续还会出其他控件，怎么办？穷举不是好办法。

因此，这是属于代码实现逻辑问题，与设计目标偏离了。请参考文档《JavaScript遍历HTML表单元素及表单定义》和《网页表单文档设计及技术实现》。

3.清理浏览器缓存

基于B/S结构，客户端界面都或多或少面临浏览器缓存问题，特别是基于AJAX和SOA的富客户端技术广泛使用，缓存问题更加突出，因此，在每次测试过程中，尤其是重新登录时，请先清理浏览器缓存。

参考

1.JavaScript遍历HTML表单元素及表单定义 肖永威 2015.5

2.网页表单文档设计及技术实现 肖永威 2015.5

3.易扩展的办公流程化管理核心模型（第2版） 肖永威 2015.3

版权声明：本文为博主原创文章，未经博主允许不得转载。