测试人的web之旅
纳尼？？学习Web编程?这是要闹啥呀！！可能大家都在想，你一个测试学什么前端呀！与工作牛马不相及。其实一开...
纳尼？？测试工程师学习Web编程? 这是要闹啥？！
其实一开始我也怀疑这个决定，并且与我业余上课有冲突，时间和精力都是极大的考验，但开弓没有回头箭，再多付出也要坚持。
而且，无论如何，我能加入测试团队转型的先锋军，亲身体验一场变更的开展和深入，确实是件机会难得的事儿。
男人嘛，要对自己狠一点。
1. 缘起
那web学习和测试有什么关系？它能给我们带来什么呢？
主要有两方面：
首先，前端测试需要了解实现技术，有助于更好设计测试过程。
其次，我们的自动化测试平台缺少前端服务支持，构建测试数据、设计测试用例都在数据库中直接操作，略显不便。
虽然我曾经有几个项目的一点点开发经验，但学习前端开发还是茫然失措没方向、没思路。对着1004页的《JavaScript权威指南》，一穷二白，这个捉急。
就在我要放弃的时候，上帝来了，咱的名师训练营开班了，我毅然决然报了名，就像被金子砸到了一样，这个美！
我的web学习之旅！！走你！！
2. 锚定方向，简化方法
“怎么学”，是摆在我面前的首要困难，抱着教材一页页看、一页页讲，学习效率低、效果也差。
我们需要的是干货！！
导师也出于这个目的，从最贴近我们应用即最实用的体系开始，根据HTML+CSS+JavaScript(JQuery)体系逐一展开。
这个体系在FastMap现有的web平台，如项目管理、行编、精编等都在应用。
通过认识技术框架-分析现有项目-模拟实践不断往复循环，在参照和模拟中学习，一步步深入学习前端知识，并将成果逐步融入我们的测试过程中。
在此要特别感谢我的导师，让我拨云见日！！此处省略2万字！！
3. 用途一：为众多web项目的自动化测试蓄力掌握web的几个测试用途
（1）firefox的firebug可以帮助测试分析api接口的交互情况，用于测试过程。
曾经，我们并没有手段获取页面的点击操作所执行的处理逻辑或执行顺序，导致接口报错问题无从下手、一些测试要点被忽略。
现在，我通过firebug去处理问题或剖析功能逻辑辅助测试，快速协助开发定位问题。如下图例某平台的条件查询操作：
（2）浏览器web控制台的查看器可以帮助测试定位界面控件的基本信息，查找相应的js处理逻辑，测试借助这些信息丰富测试思路。
曾经，页面处理逻辑之前我们并没有过多关注过，导致测试用例的冗余和遗漏，从而让测试工作十分被动。
现在，对于前端测试，一部分简单的变更完全通过此种代码走查方式进行，也帮助用例编写能够更加有的放矢。
如下图，点击控件，查看器自动跳转内容。
（3）javaScript编写知识，有利于测试通过javaScript脚本植入测试逻辑。
曾经，我们只知道在界面手工点击测试，复用性差，回归的人工成本高。
现在，可以通过编写js脚本，调用页面方法或页面元素，向页面植入测试过程，实现前端自动化测试。
例如下图为删除用户按钮的处理函数，通常我们要实现该操作，通过界面查找用户，点击删除，而通过植入测试脚本，设置userData的全局变量，并在测试脚本中调用userDelete函数便可实现该操作，多测试场景时，减少了手工执行工作量。
4. 用途二：为自动化测试平台的UI搭建做准备
掌握web的另外一个用途，是提升我们的自动化测试平台的界面。不再依赖开发同学的贡献，自行设计和实施。
“高颜值”是必要的，这样才可以高效支持用例和数据维护、测试任务在线执行以及测试结果统计分析。
目前，由于自动化测试平台还在框架完善阶段，界面不是当前重点，所以还在技术储备阶段。
为此，当前，我会重点关注一些展示页面的标签和操作js脚本的使用，如iframe、tree、table 等等，这些分别可以支持功能界面快速切换、测试套件、测试用例分级显示与编辑。
来展示一下我的尝试成果吧：
（1）iframe来实现多窗口的合成
以后，可以把测试用例管理、关键字配置、测试任务管理等子界面集成在主页显示、通过导航栏切换，快捷有效。如下图效果。
以后，可以用在测试套件、数据编辑是快速定位，方便展示设计思路和整体结构。
如下图效果。
以后，可以将测试用例分级展示和编辑，如下图效果：
还有很多学习成果想在这里展示，可是罄竹难书，就不码字码图了，大家就坐等日后自动化测试平台界面的横空出世吧！
“以后”，不会太远！
我呢，争取早些将Web方面学习到的知识和经验，加入到FastMapSTAF（我们测试大牛的作品啊）。
我的小伙伴们更是棒棒哒，FastMapSTAF可是咱们测试团队转型推出的利器，支撑FM测试没问题（老大可说了一个人都不给加，还要减哦），扩展到二代的数据流测试也有谱（比如出品测试）。
甚至，说不定还能走出“国门”，为其他技术团队的测试工作提供技术支撑。
不论测试还是开发，身份并不阻碍你学习什么，只要有帮助的技术，我们都应该敢于学习，不断向着未知技术领域去探索，丰富技能，提高工效。
希望有朝一日我们能够背靠背开发、测试，成为一个深度融合的整体，一起向前。
趁年轻，为一颗不安分的心，加油！！
关注 四维研发Family
微信扫一扫关注公众号
