前端项目如何做测试？

前端项目也叫web端项目（通俗讲就是网页上的功能）是我们能够在屏幕上看到并产生交互的体验。

前端项目如何做测试？

要讲清楚这个问题，先需要你对测试流程现有一个全局的了解，先上一张测试流程图：

接下来下面我们从需求阶段-开发阶段-测试阶段-发布阶段 共四个环节来还原一次完整的测试过程。

备注：
前端项目如何测试，在以上四个环节中的"测试阶段"
有详细阐述

一、需求阶段

在项目开始后，产品同学提出了若干需求，经过需求评审之后，最终给出了产品需求计划和迭代文档。

在这个阶段，测试跟开发同学要参与需求评审，在需求评审的过程中，开发同学会开始思考怎么做。

作为测试，有哪些不理解的，要及时提出来，让产品经理给出更清晰的解答。

最终，经过需求评审和澄清，我们了解了需求的细节，有哪些功能，要测哪几个点，要做到大概心里有数。

二、开发阶段

需求已经清楚了，开发同学就要进入开发了。同时呢，我们开始确定测试方案（工期评估、人力安排），根据需求编写测试用例（一般使用xmind或excel，根据自己习惯和团队规范来选择）。

为了防止测试用例遗漏，我们要做一次用例评审，邀请开发和产品经理参加，拉齐各方对需求的理解，最终产出一份完整的测试用例。

三、测试阶段

在测试阶段，分为后端测试和前端测试，划分如下：

1. 前端测试部分（用户在前端的操作，包含前端样式，交互效果等）
2. 后端测试部分（前端对后端的接口请求，包含增删改查、数据处理的逻辑等）

说明：有些公司前后端测试分别由不同的团队或测试同学跟进，有些公司前后端测试都由同一个团队或同一个人跟进。

后端测试一般会先于前端测试介入，为啥要后端测试先开始呢？

来看一个小片段（下例中，前后端测试不是同一个人）：

开始测试了，前端测试同学一看，页面没有展示预期的数据。好家伙，顺手给前端小哥提了一个bug。

前端开发经过排查发现直喊冤：后端没返回数据，臣妾也做不到呐。回头便将bug指给后端研发小哥了。

后端小哥一看：这个bug刚刚已经有后端测试同学提了 ，别着急哈，正在解决。

前端测试同学心想：敢情我这是白忙活了呀，怎么避免这个问题呢？

后来，经过大家的讨论决定：后端测试先开始，保证接口基本功能正常后前端测试再介入，避免重复劳动，提高工作效率。

首先开始的是后端测试，后端的测试范围如下：

1、功能测试

输入（入参）的测试：必传和非必传、参数长度、数值类型、正常和异常、有、无和为空，以及参数组合。

输出（返回）的测试：主要看正常返回的响应内容，和异常返回的响应码和提示语。

2、异常测试

重复提交：多次重复提交，连续重复提交，特别是涉及到支付、交易金额相关。

并发：两个以上用户操作同一场景，争夺资源、死锁等情况。

事务测试：多个连续步骤才能完成的业务流程。

3、性能测试（一般来说新接口需要做，老接口根据实际需求来定）

主要看响应时间、吞吐量、并发数、服务器资源使用率、cpu、内存、io、network等

这些测试内容基本都可以通过接口测试来完成，接口测试的工具推荐Postman。

接口稳定之后，可以写成自动化测试，方便后续的回归测试。

这里用到的自动化测试框架，小编使用的是java中的Testng（常用的还有JUnit4），不同的语言有各自的测试框架（比如python中的Unittest和Pytest）【本文最后会分享他们的区别】。

后端测试完成一遍冒烟测试之后，前端测试就可以开始了（重点来了，重点来了）

前端的测试范围如下：

1、UI测试

验证所有页面字体的风格是否一致

背景颜色应该与字体颜色和前景颜色相搭配

图片的大小和质量是否正常

2、功能测试（也称为e2e测试）

基本的功能是否符合预期

模拟用户操作，交互流程是否正确

3、兼容性测试

平台兼容性，使用用不同的 操作系统平台对网站进行测试。最常见的有 Windows、macOS、 Linux 等。

浏览器兼容性， 查看不同浏览器中的兼容性问题。

分辨率测试，在不同分辨率下的显示效果，避免分辨率低时界面文字显示太大，而分辨率高时又有些文字显示时太小。

4、性能测试

页面首次打开的耗时

页面加载时间

频繁操作是否奔溃

5、稳定性测试

页面是否白屏

掉电重启,断网重连后是否正常

长时间运行是否会奔溃

6、易用性测试

常用快捷键 （刷新，关闭等）

常用习惯性操作（回车搜索）

便捷性功能（记住密码等）

在测试的过程中，要对照测试用例来执行，避免遗漏。

每执行完一个测试用例，要记录实际的效果，不符合预期的要在禅道（或其它项目管理平台）记录bug，并指给对应的开发同学。

等所有的bug都解完了，需要完整的流程走一遍（回归测试）。

四、发布阶段

前后端的测试case都执行完了，bug也修改好了，就可以发送测试报告了。

一切妥当之后，就等一个良辰吉日将项目发布上线。

所谓吉日，一般要避免周五或节假日的前几天，因为万一上线后有问题，研发小哥们都在休息，找不到人修复，影响到用户体验可就要挨老板批了。

所谓良辰，一般是在夜黑风高的晚上，因为这个时候用户基本休息了，万一上线后有问题及时回滚就行了，不会影响到用户体验。煞费苦心，一切都是为了用户着想！

上线后，一般会通过灰度放量，观察线上效果，没有问题再逐步放量，最终完成项目的全量发布。

现在，『前端项目』是如何做测试的?”已经有了答案。

接下来补充问题

1、前端测试覆盖率基本上很少有100%的,那么哪些代码需要测试?

没错，前端测试覆盖率几乎不可能到100%。

正因为如此，为了保证项目质量，不仅需要测试前端代码的展示效果，也要测试后端代码的处理逻辑。

2、有没有e2e测试?

e2e全称 end-to-end，其实就是模拟用户行为，属于是前端测试的内容。可以通过编写脚本或手动来完成，几乎所有的项目，业务都在不断更新的。业务变了，模拟用户行为也会随之改变。因此编写脚本性价比不高，所以通常是由人工来完成这项测试工作。

3、前端项目有专业的测试人员吗？

大厂有细分，会分为前端测试和后端测试（也叫服务端测试），分别保障前端和后端的质量。

前端测试人员主要负责页面展示和交互的正确性。

后端测试人员主要负责接口请求的正确性。

4、测试框架是什么？

小编自己在公司用的是java中的TestNG。

如果是使用python语言，也有对应的测试框架，下面分别说一下Java和Python的测试框架。

Java常用的测试框架

有JUnit和TestNG，二者的对比如下图：

相对于JUnit4来说，TestNG功能更加丰富。

从实际使用的角度来说，参数化的设置及功能，以及处理有上下依赖关系的测试时，JUnit测试框架有着明显的不足。因此，一般都会使用TestNG（推荐）。

python常用的测试框架

常用的有Unittest、Pytest它们的区别如下，各有特色，可以根据自己的业务需求来选择。

python测试框架学习视频推荐：

UI自动化学习视频
https://www.bilibili.com/video/BV1BT4y177TA

接口自动化学习视频
https://www.bilibili.com/video/BV11g411V7Kf​​​​​​​​​​​

 软件测试小扎的一点收藏干货：喜欢可以关注我，持续分享测试干货

功能测试
软件测试基础入门

最新软件测试视频教程，软件测试基础入门到项目实战（涵盖软件测试基础+黑马头条项目实战）
Linux系统2天快速入门Linux系统操作教程2天快速入门linux项目搭建
MySQL数据库软件测试工程师必备MySQL数据库，mysql系统精讲+课后练习
Python自动测试教程 Python自动测试教程，python从基础到UnitTest框架管理测试用例

自动化测试
Web自动化软件测试web自动化测试，Web自动化流程精讲和移动自动化测试环境
Appium框架视频 零基础入门移动自动化测试——Appium框架
Appium进行IOS真机自动化测试 轻松教你使用Appium进行IOS真机自动化测试【黑马程序员】
接口测试4天玩转接口测试，接口重点全解析+传智健康项目实战（包含requests库，集成UnitTes，Dubbo等诸多工具）
性能测试性能测试全套教程，4天快速入门性能测试+项目商城实战（含JMeter工具等）

综合项目强化
微信小程序自动化测试软件测试微信小程序自动化测试实战
金融项目功能测试软件测试4天快速搞定金融项目功能测试实战教程