从 0 构建自动化测试平台 (三) 前端页面拉取

关于开源

    首先非常感谢大家的支持和鼓励，2017年05月02日18时33分收到一笔打赏，心里面小激动了一把，感谢感谢！在文章发布的第一时间就有人问我是否开源，这里我统一进行解释，在我的内心里面，这个项目一定会开源，应该会拉出来一个分支进行开源，可能是之前深受开源项目的影响；只是目前还有很多细节的内容需要完善，一方面是功能方面还有缺陷，还有很多细节需要处理；另外一方面是里面涉及到一些公司层面的内容，需要进行剥离和加工，请各位敬请期待。

前端"设计"的内心挣扎

     在第一篇中，我有聊到我的前端是模仿阿里MQC的页面，与其说模仿还不如是拿来直接用，这里就和大家介绍下我的具(te)体(bie)操(gao)作(xiao)，接下来的内容有很多人可能会认为是投机取巧，anyway作为一个测试，我认为是最高效的；前端是一个艺术活，还记得腾讯的白老师说过前端非常厉害的同学那都是活宝，几行css就可以让页面神清气爽，令人耳目一新。其实一开始我也想自己设计前端的，还特意下载了Axure RP，经过内心的几番挣扎之后，还是选择了捷径。

获取前端内容

    前端主要有3个内容构成：html源文件、css、图片(js获取了也没用，因为被压缩过)，在第二篇文章的WEB服务器搭建中：

通过

app.set('views', path.join(__dirname, '/res/app/views'));

设置了html文件的存放路径在项目目录下的res/app/views，需要将html文件存放在这个目录下；通过

 app.use(express.static(path.join(__dirname, 'static'))); //设置静态文件目录

设置了静态文件的存放路径在项目目录下的static，也就是css+js+图片的存放路径；

1、获取html文件内容（这里需要说明下，由于我使用的pug模板引擎，因此你在项目里面会看不到任何一个html文件，在项目目录下的res/app/views看到的都是以pug结尾的文件，这也是在第一次看STF源码比较惊讶的地方，当时是以jade结尾的文件）
①首先使用chrome访问mqc首页，右键鼠标选择检查按钮：

②在弹出来的页面里面选择element标签，右键html头节点，选择copy，copy element：

③将内容拷贝到html文件中，将冗余的js文件内容，记住是内容对应删除，这样一个高端大气上档次的首页html文件就做完了；
④还有最后一步，因为我们需要的不是html文件，而是pug文件，一种方式为了shu'x熟悉pug的语法，可以照着html文件逐行对应转成pug文件，我采取的方式是在线转换，网址是：http://html2jade.org，虽然有时候访问有点慢，但是比命令行的转换好使很多，转换过来直接可以使用。
到这里前端首页的内容只完成了1/3，但是已经可以使用，这个时候访问首页，已经是非常完整的页面了。
2、获取CSS内容 获取CSS的内容到本地有2个原因，我们可以先来看一个css文件内容

link(href='https://g.alicdn.com/platform/mtl/css/select2.css?_=0.0.83', rel='stylesheet')

是从阿里云的CDN上获取的，原因1是这个内容可能会官方修改，原因2是这个URL可能会无法访问，导致你的页面一直加载异常，获取方法如下：
①选择Sources标签，找到下面对应的css文件选择另存为，目录可以参考原来的，也可以自定义，操作如下：

②在pug文件中将css的URL地址对应修改成你本地的路径，例如：

link(href='/platform/mtl/css/mtl.css', rel='stylesheet')

图片资源，我这里就不重复了，方法和获取CSS文件是一样一样的，我个人还是比较推荐路径和原始的一致，这样可以避免你不断的去修改你CSS文件中的图片路径，当然一键替换CSS文件中的图片路径也是不复杂的。

方法比较简单，但是很高效，走到这一步，不需要很多的工作量，就可以完成页面前端的设计，这个时候如果你觉得哪个平台的长得比较好看，就选择哪个了。

还有一个内容就是JS没有拉取，原因是JS被压缩过了，拉取了也是无效的，这个就是需要你自己去实现的，例如文件上传功能，这个在后面的系列文章中会做详细的介绍。

还是想强调一下，这个方法比较适合一开始对前端不熟悉的同学，比较关注后端的内容的具体实现，例如JS，这里是先给自己树立一个信心而已，万事开头难，这里我们先给自己开了一个好头，其实做到现在，我认为很高效的方式，后面全都是坑，在后面你都需要或多或少的了解这些内容，会根据需要有针对性的修改这些内容，虽然比较少，但是如果完全不懂也是无法下手的。

说到这里，这些都还只是个空框架，我自己的理解是先有一个好的框架，接下来就是往框架里面填充具体的实现，例如实现文件上传、后端数据向前端传递、数据库查询、python脚本实现、表结构设计、兼容性测试具体实现等等，这些就是给这个框架舔砖加瓦了。

这也算是站在巨人的肩膀上了，我们获取了html、css文件，如果你还有一些自己的想法，就可以对html文件和css进行自定义了，设计出你认为体验更好的前端页面，不管你认不认可，不管你有多不屑，anyway，我就是这样做的。

有任何问题可以通过微信找到我，欢迎大家一起交流关于测试方面的问题。