前端项目也叫web端项目（通俗讲就是网页上的功能）是我们能够在屏幕上看到并产生交互的体验。
前端项目如何做测试？
要讲清楚这个问题，先需要你对测试流程现有一个全局的了解，先上一张测试流程图：
接下来下面我们从需求阶段-开发阶段-测试阶段-发布阶段 共四个环节来还原一次完整的测试过程。
备注： 前端项目如何测试，在以上四个环节中的"测试阶段" 有详细阐述
一、需求阶段
在项目开始后，产品同学提出了若干需求，经过需求评审之后，最终给出了产品需求计划和迭代文档。
在这个阶段，测试跟开发同学要参与需求评审，在需求评审的过程中，开发同学会开始思考怎么做。
作为测试，有哪些不理解的，要及时提出来，让产品经理给出更清晰的解答。
最终，经过需求评审和澄清，我们了解了需求的细节，有哪些功能，要测哪几个点，要做到大概心里有数。
二、开发阶段
需求已经清楚了，开发同学就要进入开发了。同时呢，我们开始确定测试方案（工期评估、人力安排），根据需求编写测试用例（一般使用xmind或excel，根据自己习惯和团队规范来选择）。
为了防止测试用例遗漏，我们要做一次用例评审，邀请开发和产品经理参加，拉齐各方对需求的理解，最终产出一份完整的测试用例。
三、测试阶段
在测试阶段，分为后端测试和前端测试，划分如下：
- 前端测试部分（用户在前端的操作，包含前端样式，交互效果等）
- 后端测试部分（前端对后端的接口请求，包含增删改查、数据处理的逻辑等）
说明：有些公司前后端测试分别由不同的团队或测试同学跟进，有些公司前后端测试都由同一个团队或同一个人跟进。
后端测试一般会先于前端测试介入，为啥要后端测试先开始呢？
来看一个小片段（下例中，前后端测试不是同一个人）：
开始测试了，前端测试同学一看，页面没有展示预期的数据。好家伙，顺手给前端小哥提了一个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天快速搞定金融项目功能测试实战教程
