转载文章:来源(靠谱崔小拽) 前端自动化测试主要在于:变化快,不稳定,兼容性复杂:故而,想通过较低的成本维护较为通用的自动化case比较困难.本文旨在通过page-monitor获取和分析dom结构,调研能否通过监控和分析核心dom,来进行前端自动化测试. 一:page-monitor 介绍 page-monitor:通过xpath获取dom节点结构,之后可视化的渲染出页面的差异.github地址:https://github.com/fouber/pag...基本原理:利用xpath获取页面的…

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天我继续介绍前端开发的另一工具——grunt.关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并. 一.准备工作 再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt node.js下载地址…

1.首先需要安装node+npm(这里不再叙述,网上教程一大堆) 2.gulp全局安装:npm install -g gulp 3.cd进入到你的项目目录,这里使用demo文件夹为我的示例项目 4.在demo项目中新建dist和src两个文件夹,再在src文件夹下新建images,sass,js三个文件夹和index.html文件 5.命令行cd进入到项目根目录,在项目中安装gulp模块,npm install gulp 6.安装gulp相关需要模块 npm install gulp-util…

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <…

什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,css,甚至img加hash值,以避免浏览器缓存,自动合并压缩代码,自动刷新实时预览效果(甚至免刷新),可以按照自己喜欢的目录结构存放原始资源文件,为了方便手机等访问,不需要搭建apache.nginx等服务器实现http访问...... 如何快速开始 首先 git clone https://gith…

转载文章:来源(靠谱崔小拽) 通过page-diff的初步调研和源码分析,确定page-diff在前端自动化测试和监控方面做一些事情.本篇主要介绍下,page-diff在具体的实践中的一些应用 核心dom校验 前端的快速发展,造成前端dom无论结构还是命名经常变化,每次都尽可能关注每个dom的变化,不可能也没有必要.但是核心dom是相对变化较小,但是比较重要,因此可以利用page-monitor 修改关注结构中的核心代码,核心架构的变化. 上图是未修改的代码,下图是忽略footer内部变化实践中…

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is…

前言 之前学完html的基础后就去学js框架了,每次都是用脚手架搭好的文件,在无形中体验了一波前端自动化带来的方便.然后前一段时间才开始学习前端自动化. 基本介绍 gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一个管理工具 装载 首先全局安装gulp npm install --global gulp 然后你需要在根目录下创建一个名为gulpfile.js的文件 这个文件是gulp命令需要加载的文件,通过这个文件来处理预设的构建 使用 首先你可以在你的…

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常…

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…