写点什么

以不变应万变,聊聊前端测试与安全那些事

  • 2019-04-16
  • 本文字数:1660 字

    阅读完需:约 5 分钟

以不变应万变,聊聊前端测试与安全那些事

前言

从 1994 年网景公司推出第一款 Navigator 浏览器和 W3C 组织诞生开始,前端领域一直是处于不断更新迭代的过程中。不论是最早出现的 PHP,还是后起之秀 JavaScript 抑或是已经迭代到第五世代的 HTML 标准。随着 NodeJS 出现,前端也已经打破了浏览器的藩篱,开始迈向全方位发展。各种先进的技术给用户带来日新月异的体验提升,同时也给前端领域的质量保障带来了重大的挑战。我们是否可以找一些不变的策略,来以不变应万变呢?

万变不离其宗

前端开发中我们的可以使用多种语言进行开发,也可以使用各种不同的研发框架,但是对于质量方面的要求并没有发生明显的变化。我们保障质量的策略也还是集中在两个方向。


  • 保障产品可以满足用户的使用场景

  • 保障产品给用带来良好的使用体验


第一种方向我们可以称之为保障前端质量的正确性,第二种方向我们可以称之为保障前端质量的高性能。基于这样的两个策略,我们开展质量保障工作的思路也就一目了然了,就是要在正确性和性能两方面做文章。


讨论清楚保障质量策略,我们下面看一下应该采用什么样的手段来达到质量保障的目标。

保障正确性的手段

代码质量的正确性

这里的代码质量主要指的是代码自身的质量,根据大量的前端实践证明代码质量对于产品质量可以起到举足轻重的作用。代码质量本身会存在哪些问题呢?


  • 缺少编码规范导致编码风格混乱

  • 编码水平不高造成了一些低级错误(例如无用的代码,死循环,明显的 Error 等等)

  • 代码逻辑耦合度高(功能不分离,逻辑糅合,巨大的方法)


针对上面这些问题,我们可以采用静态扫描的方式有效检出上述问题并且及时将问题消灭在研发初期阶段。


静态扫描可以采用人工方式,例如 CodeReview。也有很多的工具可以帮我们有效的解决此类问题,例如各种 lint 工具,在 IDE 编码阶段就可以挡住很多编码方面的低级错误。也可以在 CI 过程中集成 SONAR,COVERITY 等工具来做整体的代码静态扫描。

使用场景的正确性

使用场景的正确性,我们可以考虑引入 API 自动化测试以及 UI 自动化测试的方案来确保我们的实现和需求之间的一致性。目前各种 Headless 浏览器的出现,从老牌的 PhantomJS 到目前的 Chrome headless 模式也让我们的前端 UI 自动化测试效率得到了大幅的提升。关于 API 自动化测试工具就更加的成熟了,从工具类型的 PostMan 到各种各样的 HttpClient 再到各个大厂自主研发的各种接口测试框架,只要你想做总能够找到一款适合你的测试方案。

保障性能的手段

网页方面的性能其实整体的方案已经十分的清晰了,例如很多公司都在使用 PerformanceTiming 来精确的衡量整体的页面性能。不论是网络状况,资源的加载,页面的解析和绘制都可以提供精确到毫秒级别的统计。我们需要做的更多是根据目前如此丰富的数据来制定合适自己公司产品的指标和改进方案。通过向性能目标的不断靠拢来达到更好的用户性能体验。

写在最后

上面内容只是对于保障前端的质量的基本思路的起到一个抛砖引玉的作用。很多优秀的团队还会更进一步,例如使用持续集成将每个分离的流程串联起来达到时刻保障产品质量的目标,使用容器技术抹平我们生产环境和开发环境之间的环境差异,减少环境因素带来的质量风险。希望上面的内容可以给大家在不断变化的前端领域带来一些解决问题的思路,让我们有机会可以做到"以不变应万变"。


作者介绍


张杰,美团测试专家,负责美团 App 客户端测试团队。互联网测试方向从业 10 年,专注测试自动化和测试改进相关工作。曾就职于搜狐、百度、搜狗等知名互联网企业。在搜索引擎、移动端、Web 端等方向积累了丰富的测试经验。


活动推荐


6 月 20-21,GMTC 2019 全球大前端技术大会上,张杰老师将担任“质量保证”专场出品人,重点关注前端测试与安全两个方向,想要跟张老师进一步交流的可到现场面基。另外,大会还设置有小程序、性能优化、前端架构、工程化、跨平台等 13+ 技术专场,Google、BAT、美团、京东、滴滴等 70+ 一线技术专家将为大家带来前端最佳落地实践,肯定可以给你带来更开阔的视野。


目前大会 8 折售票火热进行中,团购更优惠,详情咨询售票天使 Amy:18514549229(同微信),点击“这里”了解更多大会详情!


2019-04-16 10:305089

评论

发布
暂无评论
发现更多内容

软件测试/测试开发 | 静态扫描体系集成

测试人

软件测试 持续集成 jenkins 自动化测试 测试开发

火山引擎DataTester:一次A/B测试,帮助产品分享率提升超20%

字节跳动数据平台

大数据 AB testing实战

Inspur KOS 龙蜥衍生版面向智慧新媒体转型的探索与实践 | 龙蜥案例

OpenAnolis小助手

龙蜥社区 CentOS迁移 浪潮信息 KOS 服务器操作系统

如何理解鲁棒性?为什么robustness会翻译为鲁棒性?

九章云极DataCanvas

【1.6-1.13】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动

【Unity渲染】一文看懂!Unity通用渲染管线URP介绍

3DCAT实时渲染

Unity 渲染 实时云渲染 渲染服务 Unity3D

TiDB Operator高可用配置

TiDB 社区干货传送门

集群管理 管理与运维 安装 & 部署

通过TiDB Operator升级TiDB集群

TiDB 社区干货传送门

集群管理 管理与运维 故障排查/诊断 安装 & 部署 扩/缩容

岁末年初再添佳誉丨Kyligence 荣获多个奖项及榜单认可

Kyligence

数据分析 多维数据库

Vue实现登录功能

Geek_7ubdnf

Vue

代码质量与安全 | 展望:2023年商业软件开发的五大关键目标

龙智—DevSecOps解决方案

静态代码分析

【社区智慧合集】TiDB 相关 SQL 脚本大全

TiDB 社区干货传送门

PyFlink 最新进展解读及典型应用场景介绍

Apache Flink

大数据 flink 实时计算

版本控制 | 设计师和美术人员的理想版本控制软件是?

龙智—DevSecOps解决方案

版本控制 版本控制软件

Getaverse入选KuCoin Labs首批孵化项目

Geek_Web3

#区块链# 元宇宙 web3

Hackathon特别策划 | 72小时灵感冲刺,创意就该这么玩

LigaAI

敏捷开发 研发管理 hackathon 黑客马拉松 企业号 1 月 PK 榜

TiDB Operator升级

TiDB 社区干货传送门

实践案例 集群管理 管理与运维 安装 & 部署

TiDB 生产集群与加密通讯TLS的辛酸苦辣 - 工具篇

TiDB 社区干货传送门

集群管理 管理与运维 备份 & 恢复

收官!OceanBase第五届技术征文大赛获奖名单公布!

OceanBase 数据库

数据库 oceanbase

企业真的需要一个私有化的即时通讯吗?

WorkPlus

企业移动应用APP是否能实现统一整合与管理呢?

WorkPlus

软件测试/测试开发 | 单元测试体系集成

测试人

软件测试 单元测试 自动化测试 JUnit 测试开发

OpenMLDB v0.7.0 发布

第四范式开发者社区

人工智能 机器学习 开源 特征 数据库·

微信小程序实验案例:简易成语小词典

TiAmo

小程序 微信小程序

互联网医疗月度观察:规范化、合法化的网络售药新时代到来

易观分析

互联网医疗

35张图,直观理解Stable Diffusion

OneFlow

人工智能 深度学习 Stable Diffusion

JDBC的基本概念

Geek_7ubdnf

Java

【UE虚幻引擎】手把手教学,UE新手打包全攻略!

3DCAT实时渲染

游戏开发 虚幻引擎 虚幻引擎5 UE5 游戏开发引擎

TiCDC 集群工作过程解析

TiDB 社区干货传送门

【从零开始学爬虫】采集丁香医生新冠问答数据

前嗅大数据

数据采集 爬虫教程 爬虫案例 爬虫工具 爬虫技术

2023年主流知名堡垒机重点推荐

行云管家

网络安全 堡垒机

以不变应万变,聊聊前端测试与安全那些事_软件工程_张杰_InfoQ精选文章