当前位置: 首页 > news >正文

前端技术周刊 2018-12-10:前端自动化测试

image.png | left | 827x345

前端快爆

  • 再见 Edge,微软正式宣布 Microsoft Edge 浏览器将从 EdgeHTML 内核迁移到开源的 Chromium(Blink + V8)上,ChakraCore JS 引擎将会继续开源并用在其他项目中,预览版预计 2019 年年初推出。Mozilla CEO 也发表文章痛呼:从商业角度来看,微软的决定可能很有意义,但从用户的角度来看,这可能是场灾难,把浏览器这样的网络基础设施交给一家公司来主导将会非常糟糕。?

    点评:失去竞争便会失去一种选择,Edge 加入 Chromium 后能有多少话语权,实在令人担忧,Opera 可能就是前车之鉴。

image.png | left | 440x330

  • Puppeteer 是 Headless Chrome 的封装,现在也支持 Firefox 了。?

    点评:支持更多的浏览器将会更方便测试。
  • Chrome 73 开发者工具新增了 Logpoints 功能,可以在控制台快速打印消息。VSCode 早些时候就支持了类似的功能。?

    点评:是时候告别 console.log 了。
  • Babel 7.2.0 发布,支持了 Class field 规范中的 Private Instance Methods,Private accessors 也即将支持。至此由于此前 Chrome 也已经实现,该规范正式进入 Stage 3 阶段。?

    点评:这是一个最好的时代,也是一个最坏的时代!上周五特别邀请了 Hax 来阿里巴巴分享,详细讲述了该规范的利弊。

image.png | left | 719x308

  • Safari Technology Preview 71发布,默认启用了 Web Animations、Intersection Observer 等重要特性,同时还去除了 CSS text-decoration 属性的前缀。?

    点评:Safari 正在努力不让自己变成新的 IE6 ?。
  • 第13届 D2 前端技术论坛将于2019年1月6日在杭州盛大开启,目前还可以团购买票。?

优秀 Demo

  • 带动画的密码提示框

shot.gif | center | 520x390

  • 圣诞节进度条

cps.gif | center | 520x320

专题:前端自动化测试

测试是完善的研发体系中不可或缺的一环,前端也不例外,CSS 的变更可能导致页面错位,JavaScript 的变更可能导致功能缺陷。由于前端偏 GUI 软件的性质,尽管测试领域工具层出不穷,前端的自动化测试的落地实施并不广泛,很多项目依旧以手工测试为主。本篇即是对前端测试相关的解决方案的一个梳理。

方案

先来了解一下前端测试可能涉及到的环节:

  • 基本知识、单元测试、端到端测试、集成测试、可视化测试

目前比较常见的前端自动化测试方案主要集中在单元测试和集成测试阶段,实现文件监测和高效快速的执行测试:

  • 前端自动化测试概览

采用像素对比和 DOM 结构对比的方案:

  • 早期自动化测试的一些思考和探索
  • 视觉回归测试

对于 React 则推荐 Jest + Enzyme 搭建测试环境:

  • 使用Jest + Enzyme对React项目进行单元测试
  • React 与 Redux 的测试策略

工具

在 2018 年年初对测试工具的整体回顾:

  • An Overview of JavaScript Testing in 2018

Karma 是目前在 Magix 自动化测试的过程中使用的框架:

  • Karma 测试框架的前生今世

    Karma 的优点是能通过插件和配置的方式集成大部分的主流的测试框架和前端库,能方便的一次在多浏览器环境执行测试用例,并集成了测试覆盖率生成功能,生成页面形式覆盖率报告并能导出不同形式的覆盖率报告数据。它的缺点是,对测试页面环境的搭建和资源文件的加载不是常见的形式,最开始搭建环境时会有很多跟预期不一致的情况,配置不直观。

Cypress 是一个相对完善的前端 E2E 测试框架,它可以运行在多浏览器环境,能拦截 mock 接口请求,模拟用户行为:

  • 前端 E2E 测试之 Cypress

本期编辑:@壹丝,审阅:@承虎,专题供稿:@弈铭

相关文章:

  • puppet连载22:define用法
  • Django2.0——请求与响应(下)
  • 华为敏捷DevOps实践:如何从Excel管理软件的方式中走出来
  • CentOS7配置Kubernetes(K8S)集群
  • Docker在Linux/Windows上运行NetCore文章系列
  • 使用Python将MongoDB数据导到MySQL
  • Rem之自适应js
  • ubuntu16.04下安装postgresql 10.3
  • Groovy与Java集成常见的坑
  • SQLserver视图修改sql
  • Visual Studio Code编写C/C++代码常见问题
  • iOS8 自定义UITabBar (使用popToViewController导致的UITabBarButton重叠的问题)
  • 排序算法(Merge Sort)中的 merge 步
  • BAT集体升级云事业部,这背后都藏着哪些“小心思”?
  • 【福利】BAT架构师分享最全Java架构师学习技能图谱:包含Java编程+网络+设计模式+数据库+分布式等...
  • 【EOS】Cleos基础
  • 03Go 类型总结
  • Consul Config 使用Git做版本控制的实现
  • javascript 总结(常用工具类的封装)
  • Javascript设计模式学习之Observer(观察者)模式
  • mysql常用命令汇总
  • nodejs:开发并发布一个nodejs包
  • python学习笔记 - ThreadLocal
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • Transformer-XL: Unleashing the Potential of Attention Models
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 好的网址,关于.net 4.0 ,vs 2010
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 面试遇到的一些题
  • 深入浏览器事件循环的本质
  • 手写一个CommonJS打包工具(一)
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • 在Mac OS X上安装 Ruby运行环境
  • ​secrets --- 生成管理密码的安全随机数​
  • # 计算机视觉入门
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • ${ }的特别功能
  • (14)Hive调优——合并小文件
  • (9)目标检测_SSD的原理
  • (NSDate) 时间 (time )比较
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (三)Honghu Cloud云架构一定时调度平台
  • (三)终结任务
  • (三十五)大数据实战——Superset可视化平台搭建
  • (一)Linux+Windows下安装ffmpeg
  • (转)甲方乙方——赵民谈找工作
  • .gitignore文件设置了忽略但不生效
  • .net core Swagger 过滤部分Api
  • .net framework profiles /.net framework 配置
  • .NET Micro Framework初体验(二)
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .NET/C# 检测电脑上安装的 .NET Framework 的版本