123

对于web report，也是本文会侧重讲述的，因为它对于构造展现自动化report来说很是强大，你的想象力有多丰富，它的展示空间就有多大。虽然从技术难度来说你要掌握HTML，CSS和JavaScript相关的知识比起Excel或者DB的API来说会难度高一点，但是它所带来的好处非常之多。况且对于一个优秀的自动化测试工程师来说，这是一个居家旅行必备技能之一哈。

简单介绍下HTML+CSS+JAVASCRIPT概念：

HTML(Hyper Text Markup Language) ：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

CSS(Cascading Style Sheets): 将样式信息与网页内容分离的一种标记语言它主要用于美化HTML页面，用来修改颜色、字体、字号、宽高、位置、背景等

JS(JavaScript): 常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果

打个比方来说明下，如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人。

具体的语法有兴趣的同学笔者推荐去w3cSchool去学习哈～接下来分享下项目中对于自动化测试报告优化的实例和思考

以下是我们最初的在一个测试用例下一个测试步骤中实际结果的内容，大家可以看到一个这个步骤中堆砌了满屏的不同字段值的比较～实际上不只是大家看到的这些，一个步骤里有近百个字段的比较也很正常，拥有那么复杂的业务而存在大量字段的表～

这样的效果，大家都会察觉到

1.测试用例报告页面会显得特别冗长

2.不能直观看到测试用例执行步骤的概要

3.页面美感下降导致用户体验下降

再来看看优惠后的报告效果

1. 测试步骤里实际结果栏放比较结果的链接

2. 点击链接后弹出比较的具体内容，并以表格形式组织字段名和预期值和实际值

3.若有字段比较不一致，以红色边框把字段格子标注出来

4.