专栏首页2014前端笔记探索----面向单元测试编写React组件

探索----面向单元测试编写React组件

继上一篇探索----面向单元测试编写React组件之后,笔者开始探索如何能保证我们播放中的落地页进行高质量的产品迭代。 先来体验一下我们的业务,目前我们的平台每天会服务于广告主制作各种各样的落地页,那么我们希望在发布新功能的同时,同时能够快速验证老的特性能够不受影响。 那么为了完成这个目标,我们可以让测试同学回归下本次修改可能涉及到的特性,来确保功能的正常,

  • 解决方案一: 如果每一次代码合并master之后就要验证一次,这样的工作可能会让测试同学感到厌烦,因为会有大量重复性的工作
  • 解决方案二: 但是如果只验证最后将要发布的master代码时,一旦出现了问题,不能马上定位到具体是哪一次merge所带来的影响,因此不能快速修复该问题。

看来上述两种方案都不是最好的,我们希望能够通过机器自动化的帮我们回归已有功能,因此,我们的自动化测试也因此而诞生。

首先,我们先来思考下我们业务中哪些功能需要回归

  1. 样式ui 我们给广告主提供了强大的自定义ui样式功能,能够快速的帮助广告主创建出精美的落地页,那么我们一定希望以往的ui不会受到影响
  2. 样式按钮交互,在点击之后,能够符合预期

解决问题一:样式ui问题

我们如何能够让机器知道这个组件的样式是渲染正常的呢? 之前分享jest的snapshot给了启发,那就是快照的概念,如果我们能够保存一份正确渲染的组件图片,那么我们只需要在每次merge进master之后,对比上一次的快照图片,如果图片一致,就说明功能是正常的。

那么基于此,我们引入了puppeteer的截图功能,在我们每一次代码merge进入master之后,触发了我们的ci流程后,就调用puppeteer,对我们已经创建好的一份最全的组件功能页面进行截图,与上一次保存的图片进行比较,看似实现到这里,已经没有了什么问题,那有serverless什么事呢,难道又是标题党蹭热度?

但是我们会发现,我们调用ci执行的docker环境中需要拉取我们自己创建的docker镜像,这个镜像里面需要包含puppeteer和一些基础库,那么拉取镜像这个过程本身比执行我们的测试用例耗时的多,那么有没有方法去缩短这段时间呢?

这个时候,serverless就横空出世了!

serverless可以理解成运行在云上的一个函数,它由事件所触发,然后创建这个函数的实例,最后销毁,我们只需要去编写这个函数本身的代码即可。

当我们持续优化我们的测试流程时,我们播放端的ci构建就简化成了这样的一段代码

curl http://serverless.example.com

我们只需要触发serverless云函数,之后的puppeteer爬取测试用例页面,截图之后,我们将生成的图片保存在腾讯的cos上,然后在邮件发送测试报告即可,整个自动化测试,只需要3s就可以完成,大大缩小了之前的执行时间。 写到这里,我们已经完成了第一步的ui截图快照功能。 但是整个自动化流程中,还有可以持续优化的地方

  • 如何能够让机器自己识别两次图片是否一致呢?
  • 未完成的点击交互测试

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Serverless+puppeteer打造云端自动化测试

    继上一篇探索----面向单元测试编写React组件之后,笔者开始探索如何能保证我们播放中的落地页进行高质量的产品迭代。 先来体验一下我们的业务,目前我们的平台...

    2014v
  • 用commander做一个自己的eslint脚手架

    如今前端工程化,自动化已经成为了新趋势,如果我们要重新开始做一个项目,你会花费多久的时间在前期环境的搭建上呢?在我们前端的的积累中,我们需要将这些技术沉淀下来,...

    2014v
  • 利用Decorator(装饰器)做数据层处理

    再介绍如何用Decorator做数据处理前,让我们先来看一下Decorator是什么?

    2014v
  • Serverless+puppeteer打造云端自动化测试

    继上一篇探索----面向单元测试编写React组件之后,笔者开始探索如何能保证我们播放中的落地页进行高质量的产品迭代。 先来体验一下我们的业务,目前我们的平台...

    2014v
  • 【温习统计学】LSD(最小显著差异法)

    LSD是由费希尔提出,用t检验完成各组均值间的配对比较的方法,在许多数学软件(例如SPSS、Matlab等)中都包含这一种方法。

    统计学家
  • IDC | 2016 数字化转型十大预测

    作者:David H.Deans是GeoActive小组的创立者,技术、媒体、电信分析师,顾问,专栏作家,数字化多平台的实践家。 你的老板有对于2016年有伟...

    新智元
  • 强化学习简介(第一部分)

    强化学习是机器学习的一个方向,智能体通过执行某些操作并观察从这些操作中获得的奖励或者结果来学习在环境中行为。

    AiTechYun
  • 破解X眼电影字体动态加密|凹凸玩数据

    我们在上一篇文章 《破解大众点评的字体加密》中提到了,大众点评只是静态字体加密,这次我们抱着学习的态度以猫眼电影为例讲讲如何破解字体动态加密。

    朱小五
  • 开发者也是用户 - 第二部分:改善 UI 和 API 可用性的五条指导原则

    Android 开发者
  • 聊聊小程序打赏的事

    花叔在个人技术公众号里写了一篇关于小程序打赏的文章,也许内部同学也有做小程序打赏功能的需求,于是特意转过来一下,希望对大家有用。

    花叔

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动