测试人员如何玩转前端

      随着工作年限的增加，发现以前根本不关注的事情反而变成了瓶颈，比如说前端相关的知识。在写接口自动化，页面自动化或是服务自动化的时候，根本不会涉及太多前端的东西，后来在开发测试平台的时候，一个简单的前端交互就会折腾上半天。这使我不得不静下心来，好好补充一下前端知识了。那么测试人员如何玩转前端呢？

一，  测试人员与前端渊源

       其实在我们工作过程中，一直在于前端相关的内容在打交道，只是我们没有深入了解涉及到的相关知识。主要表现在以下几个方面：

• 功能测试之前端验证。

　　　在进行功能测试的时候，我们从用户角度出发，结合需求文档，验证开发做的功能是否符合要求，样式与交互是否友好。

•  脚本，接口自动化，页面自动化，ATF自动化之终端输出。

　　　如果遇到繁复的工作，通过会借助于脚本语言来完成，此时的终端输出的内容，也算是前端交互的部分。

• 接口，页面，ATF自动化之测试报告 。

　　  在开发接口自动化，Web自动化或是服务自动化测试用例的时候，不论我们是使用的是java,或是python最终都会输出一下详细的执行报告。此时会借助于TestNG，HtmlTestRunner输出一个页面的报告，就会涉及Html，CSS，JS相关的内容。

• 测试工具的操作界面-----简单的软件界面 。

        在开发工具的时代，不论你的工具是要完成什么功能，必须有相应的用户交互，否则就不能称之为工具。此时的如登录界面，菜单，按钮，输入框等元素就需要进行详情的设计与精准的布局，没有相关的适应是非常痛苦的事情。

• 测试平台之前端展示-----复杂的用户交互界面。

        在开发测试平台的时候，我们是把一个完整的系统给整合起来，彼此相互通信和交互。同时我们的用户群体也变得更加庞大，所以考虑的事情必须全面，用户体验也比较好，兼容性，健壮性等等也要跟得上，此时单独的考虑问题是不行的，必须前后端结合。

二，  测试开发前端技术探讨

从我们工作中的了解，对前端的知识也有相关的认识也是一个递进的过程。下面我们就探讨一下：

（1）基本的前端知识

      一说到前端知识，我们首先想到的是页面组成的相关内容，如HTML，CSS，JS，XML等等吧！通过相关的设置，达到我们想要的效果。此时感觉设计出一个我们想要的页面或是交互，还是比较麻烦的，毕竟我们测试人员不是专业的前端同学，没有专业的素养。我是深有体会的，想做出满意的效果，差不多要花费上一两天的时间。

（2）开源的框架的应用

     随着对前端知识的深入学习，认识到了前端也有很多开源的框架可以让我们节省很多精力，从面轻松实现布局与交互。如：

• Bootstrap或是相应的二次开发框架，Bootstrap Cosmo，jQuery UI Bootstrap，bootstrap-datetimepicker，android-bootstrap等等！ 推荐 10 款基于 Bootstrap 框架的扩展:

http://www.oschina.net/news/41627/10-bootstrap-extensions

 

• jQuery及JS相关的开源框架：angular.js，backbone，ember.js，KISSY等等！ 八款你不得不知的开源前端JS框架:http://www.cnblogs.com/liangxiaofeng/p/5936284.html

 

• 前端开发模式，在node.js，vue.js等出现之后，又出现了不少针对前端的开发模式，前端也有MVC开发模式。不过在这方面我还了解的不太多，感兴趣的同学可以自行去查阅相关的资料。

三，  前端设计建议

     我们在开发一个测试平台的时候，需要用到很多前端相关的资源，此时需要对前端资源做一个整体的设计：

• 设计主题颜色方案：

     一个测试平台需求有一个主题颜色，此颜色包含图标，菜单等主要元素的颜色搭配。如：

（1）业内通常的四色原则

（2）科技类网站：蓝色系居多——权威、理性、严肃

（3）购物类网站：红橙色系居多——喜庆、热情、冲动

（4）社区类网站：绿色系、蓝紫系偏重——轻松、安静、朝气蓬勃

      网站主题色设计常规步骤如下：

首先，拟定网站理想的色彩形象。先调研，了解用户的价值观、色彩流行动态及使用情况，竞争对手的颜色运用等，这是第一步作业；

其次，色彩设计。选好主题色、基础色、辅助色、重点色的组合，考虑好色彩的耀目性与美感；

再次，选好的色彩精致规范化，正规的企业会以国际通用色规范标准对上述因素加以锁定，以便统一管理，防止偏差

      同时需要注意：

A,背景和字体搭配合理，色值不能太近。如蓝白，而灰白就不太好。

B,菜单选中效果与原色值不能相差太大，只需要加重原来的颜色即可。

 

• 设计相关元素的颜色方案：

        相关元素如菜单，表格，弹窗，标题，按钮等等，需要与主题色保持一个色系。不能相差太大，或是根本不是一个色系，测试平台不是娱乐网站，不能太花哨。

• 注意CSS资源引用顺序以及合理设计

       前端资源引用是有顺序：内联样式表优于外联样式表，外联样式表越靠后优先级越高。 合理地利用此规则，就能轻松地实现自己相关的前端效果：

           先引用开源的框架，再设计出自己的风格，利用上面的规则进行覆盖。尽量利用开源的框架，插件完成前端相关设计。

• 合理利用前端技术，如$(function(){}),定时器，异步加载等技巧设计交互。如页面加载的时候就需要渲染的效果，定时更新内容的效果等等。
• 注意前端资源的一些特性，如前端JS交互是单线程的，所以如果的实时显示的时候，注意阻塞。

四，  前端资源引用思考

     既然我们在开发自己的测试平台时需要引用开源的前端资源，而这类资源在网上还是比较多的，所以我们就可以根据自己的需要，引用第三方的前端资源文件。但是需要注意以下几点：

（1）  根据功能对前端资源进行分别加载

      如在模块A中，我们需要使用表格的相关功能，就可以在模块A的相关页面中引入bootstrap-table相关的资源文件。而模块B不需要这类资源，其相关的页面就不需要引用这类资源；同时两个模板都需要使用bootstrap相关的资源，就可以在两个模块之前进行加载。如此有针对性的载，可是防止一次加载过多，或是做无用的加载。

（2）  使用压缩后的前端资源,如开源框架的*.min.js,*.min.css等，自己的前端资源文件过大时，利用第三方压缩工具进行压缩。

     前端资源存在着开发版和发布版的区别，如果你仔细观察一下，两个版本的文件大小相差还是挺大的。所以在引用第三方资源的时候，最好引用压缩版的，而自己开发的前端资源文件，如果过大，在发布测试平台的时候，最好对前端资源进行压缩，以提高网络加载的速度。

（3）通过接口与前端进行交互

     现在很多公司开发东西的时候，都在强调前后端分离。如vue.js出现后，这类现象更加明显。所以不管利用任何框架开发平台或是工具，和前端交互的时候，考虑使用接口等进行交互。以此确保后端功能和数据的通用性，以及修改的时候影响范围可控性。 

五，  总结

      本文从测试开发的角度来分析一下，在开发测试平台的时候应该如何使用前端资源。由于水平有限，可能存在不少不足，可是介绍不到之处，但用来设计我们的测试平台应该足够了。

      目前社会上对测试开发要求越来越高，仅仅会编写测试脚本，自动化测试是不够的，而开发测试工具或是平台的时候，又没有专业的前端人员与我们配合，所以需要自己来学习。当然如果你能把涉及到的各方面知识都学的很精通固然比较好，可是这个很难达到，能灵活运用已经不错了。

      在掌握测试开发必须掌握的测试技术的同时，也要关注一下周边相关的知识。灵活使用各种开源的框架，第三方支持包来省时省力地解决我们遇到的问题也是一项非常重要的技能。