前端工程化基础建设1:前端测试系统

2020 年 12 月 06 日

阅读量:0

正文共 662 字,预计阅读时间 3 分钟

前端的测试大体上分为两类。

一类是 API 测试,大约占到 20% 到 30% 左右。另一类是 UI 测试,大约占到 70% 到 80%。

基础代码测试

API 测试是针对一些基础代码,比如框架、基础库以及基础业务代码等等。

测试这类代码通常是引入一个测试框架,编写一些测试用例,然后做覆盖率统计。

实际上我们在开发项目时,引入的框架和基础库大都是一些第三方的开源软件。而一个优秀开源软件自身都会把单元测试做的非常好。所以我们只需要关注极少的基础业务代码的测试即可,这类代码的测试非常简单,也不易出错。

常用的测试框架有:mocha、jasmine、jest 等。

一般的自动化测试都是针对这部分代码做的。

UI 测试

UI 测试比较麻烦,因为这部分的迭代速度非常快,编写和维护测试用例的成本非常高,实现自动化测试难度很大。

一般使用 Selenium 录制操作,之后自动执行,或者使用 phantom 模拟操作脚本。

但是更多的传统方案是进行人肉测试。

页面差异监控

页面差异监控是一种辅助 UI 测试的手段。

其原理是,每次更新代码时,使用 phantom 这类无头浏览器访问页面。对页面进行截图或者保存 DOM 树,之后进行 Diff。

截图法是通过像素为依据进行对比的,误错率较高。

DOM 树对比则更加科学。此类工具有 page-monitor

通过这种工具可以方便人肉测试回归。

参考资料:

What is Front End Testing? Tools & Frameworks 什么是前端测试?工具与框架

A COMPREHENSIVE GUIDE TO FRONT END TESTING 前端测试综合指南

Pragmatic Front-End Testing Strategies (1) 务实的前端测试策略(1)

Pragmatic Front-End Testing Strategies (2) 务实的前端测试策略(2)

Pragmatic Front-End Testing Strategies (3) 务实的前端测试策略(3)

Seriously, browsers are a pain in the butt. 前端测试 严重的是,浏览器是一团糟。

Front End Testing: A Complete Conceptual Overview 前端测试:完整的概念概述

Introduction to Front-End unit testing 前端单元测试简介

知乎 如何进行前端自动化测试?


你好,我是 卢振千,一名软件工程师。欢迎你来到我的网站。