1. 前端自动化部署解决方案
对象存储服务都有提供对应的控制台管理桶，同时也提供响应的API供后端业务调用。
aws-s3官方提供了命令行终端操作库可以方便在命令行发布我们的静态资源： https://aws.amazon.com/cn/cli/
我们可以这样发布：
腾讯的cos可以使用很轻量第三方库 cos-manager 发布资源: https://github.com/yansenlei/cos-manager
npm script 类似shell 的 exec，可以帮助你执行多个并行或顺序执行的命令，我们可以一次性执行 删除本地dist资源->打包->发布
参考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上发布我们可以这样写：
一个命令，提包走人。（虽然走了有点慌...）
持续集成是一种软件开发实践，每一次发布源码都会集成一次，每一次都会自动化的构建，这意味着也可以把上面的发布脚本在服务端跑起来，打包 测试 发布全部交给CI处理，目前主流的工具是 Travis CI ，具体可以参照： http://efe..com/blog/front-end-continuous-integration-tools/
2. 如何进行前端自动化测试
一般前端自动化测试大致包括
类库单元测试自动化
UI组件测试自动化
类库单元测试自动化
较好实现
基本思路是让不同的浏览器可以自动根据指令跑一些JS函数
结果与预期比对后返回是否通过case测试标志
其中一般有两种实现方式：
其一：
1.打开目标浏览器，运行测试框架站点
2.测试框架站点通过ajax 轮询、websocket 等方式，将待测 js 的 case 在浏览器内运行（通过eval 、createElement("script") 等方式）
3.比对测试结果，将结果 post 到远端
4.远端接受测试结果
5.远端等待所有浏览器返回结果完成
6.marge 所有浏览器数据显示最终通过与否结果。
这种方式弊端：
人工开启一次所有浏览器
需要排队测试，浏览器只能一次运行完一组测试后才能再运行下一组
如果中间某testcase导致浏览器异常，返回结果将缺失，需要人工去服务器上检查下浏览器状态
好处：
可以覆盖所有想覆盖到的浏览器
另一种方式：
1.将常用浏览器内核放进一个或多个相互有关联的进程内
2.用例通过系统消息发送到各个包装的内核中
3.每次开启一个新内核进程运行JS用例
4.用例结果发送给包装进程
5.包装进程汇集所有用例结果后post到远端保存
6.包装进程连带内核进程一起退出
优点：
无序人工开启一次浏览器
独立进程运行，无需排队
不怕内核异常，异常后包装进程可以直接恢复内核或者通知测试失败
缺点：
前端实现太困难，需要C++开发
无法覆盖到所有浏览器
常用内核覆盖更新劳心劳力
3. 这些自动化的工具，让Web前端开发工作更轻松
Web前端自动化工具之一：LiveReload
LiveReload技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作。目前实现LiveReload的方式很多，如果你倾向于图形化的桌面应用，可以尝试一下。这款应用同时有Mac版和Windows版，使用起来也很简单，设置好需要监听文件所在的文件夹，然后将一段脚本插入到HTML页面即可。
Web前端自动化工具之二：Webpack
现在做前端开发，通常还会涉及到预处理器，虽然技术的多样化给我们带来了更多选择，但要这些技术产生的代码在浏览器中获得一致的表现，还得将其转化为浏览器支持的类型。Webpack是一款模块加载兼打包工具，丰富的插件让这款工具非常实用。虽然现在Grunt 和Gulp作为两款前端自动化工具非常流行，但其实Webpack结合Npm脚本在大多数场合就已经足够了。
Web前端自动化工具之三：WeFlow
WeFlow 是最近腾讯团队推出的一款前端开发工作流工具。WeFlow一个高效、强大、跨平台的前端开发工作流工具，具体的说就是一个GUI的前端工具，可以为用户提供一套标准化、规范化的工作流程，从而让大家在交接协作的时候更为高效有序。
Web前端自动化工具之四：CodeKit
除了免费的工具，还有一款付费工具值得一提。CodeKit是Mac下老牌的前端开发辅助工具，目前价格32美刀。虽然不便宜，但功能强大，号称可以编译目前所有的前端脚本，支持浏览器自动刷新，内置Bower，第三方包的安装只需要一次点击即可完成。图形化的界面操作起来也很方便，不差钱的同学可以考虑。
以上就是小编为大家介绍的目前常用的Web前端自动化工具。前端作为互联网产品研发的重要环节，工作量势必会越来越繁重，所以能合理的运营一些自动化的工具，不仅仅可以提高自己的工作效率。同时也可以让前端开发工作变得更加简单。
4. 前端该怎样实现自动化测试
首先，还是要强调一点：
前端是一种特殊的GUI软件
看过我最近一年内做前端工程方面相关分享的人可能有印象，我总是在强调这一点。前端测试也跟这个理论基础有所关联。
在这里，我还想吐槽一下：
API测试方法论在测试GUI时并不能解决所有问题。
与很多前端工程师讨论过前端测试，大家更多的还是盯着API测试方法论。诚然，前端有那么一小部分代码是可以用API测试保证质量的，但前端项目中的绝大多数代码是GUI界面，前端测试应该向传统GUI测试方法论需求解决方案：GUI软件测试_网络 ，这个网络词条介绍的很不错，大家可以感受一下GUI测试相关概念和方法。它的测试用例、覆盖率统计、测试方法等等都与API测试有着很大的不同。
5. 前端自动化部署服务器, 告别繁琐部署过程
简单实用的前端部署, 一条命令搞定, 省去繁琐的步骤!
主要是** nodejs shelljs(命令行命令) node-ssh(连接服务器)**
项目git 地址
(这个git项目是我自己搭的一个比较low的vue脚手架,集成ts)
(第一次写文章, 文笔不行, 多多包涵,有不对的地方尽管指出)
(主要看 自动部署 在 upload 目录 )
npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D
大功告成~~
咳咳, 放心, 不会有公众号啥广告, 也不会求打赏, 如果您觉得对您有一点点帮助 点个赞或者去GitHub点个star 那就非常感谢了
项目git 地址
6. Canvas开发的前端页面自动化实现求助
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。
我们首先来回想一下之前我们是如何来开始做一个项目的。
① 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，比如：
拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
② 然后，进行编码
编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………
③ 编码完成，进行语法检查，文件合并和压缩
HTML去掉注析、换行符 - HtmlMin
CSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
整个过程都在重复无用繁琐的工具...
渐渐的，一些自动化构建工具出现了，人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。
7. 前端如何提升开发效率
来具体聊一聊提高前端工程师开发效率的那些方法！
当然除了以上5点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。
8. 前端UI自动化puppeteer实践
背景
在表单（web页面）测试过程中，要经常对表单基本功能进行回归，曾经考虑过使用webUI自动化工具，减少重复性的操作，但是因为之前用过appium，对UI自动化的体验不是很好，所以有些纠结，但是，再仔细想一下，有可能存在比较好用又确实能提升效率的工具，也不妨去尝试一下。
上网查询了一下，puppeteer具有可以使用录制脚本的工具puppeteer-recorder、截图等功能，找了个demo开始试了一下，发现坑较少，安装方便，使用比较流畅。
puppeteer介绍
Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless。详见文末参考链接。
效果展示
目录结构
cases：用例脚本
config：配置文件，可区分测试、线上环境
screenshot_outputs：输出的截图文件
utils：用到的通用方法
测试思路
1、在脚本中写入测试执行步骤
2、运行脚本
3、查看执行结果（截图），查看是否符合预期。
这样操作会使简单很测试很多。就拿表单人工审核为例，全部人工操作的话，需要填写并提交表单，登录表单运营后台，找到对应的目录及表单，对表单进行审核，再重新打开表单并进行查看，而自动化的话，在写好脚本（在脚本中可进行接口请求）之后，就可以直接运行脚本，查看结果。
环境搭建
1、安装puppeteer：npm install puppeteer（前提是安装了node、npm）
2、安装chrome插件puppeteer-recorder（可自行网络，比较简单）
3、npm init，初始化一个项目
脚本编写
遇到问题
1、puppeteer-recorder只能录制获取元素、点击元素操作，没有获取到填写文本的操作，需要修改或添加已录制好的脚本
2、有些地方例如截图前，接口请求结束后，需要使用等待方法。await page.waitFor(3000)
3、使用await进行接口请求，不然会出现同步异步问题，后面的语句开始执行（但是要用到的参数还没有获取到）
参考：
https://zhuanlan.hu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b