你们公司的【前端项目】是如何做测试的?字节10年测试经验的我这样做的...

news2024/9/24 15:29:22

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

前端项目如何做测试?

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

测试流程图

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

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

一、需求阶段

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

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

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

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

二、开发阶段

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

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

现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:110685036

三、测试阶段

在测试阶段,分为后端测试和前端测试,划分如下:

  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它们的区别如下,各有特色,可以根据自己的业务需求来选择。

至于java和python哪个更适合做测试?

建议结合自己的基础能力和公司的语言习惯来选择.

最后: 可以在我的VX公众号:【自动化测试老司机】免费领取一份216页软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享!,其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/798388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

QT--day3(定时器事件、对话框)

头文件代码&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> //定时器事件处理时间头文件 #include <QTime> //时间类 #include <QtTextToSpeech> #include <QPushButton> #include <QLabel&g…

AXI协议之AXILite开发设计(二)

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 二、AXI-Lite关键代码分析 1、时钟与…

Bootstrap框架(组件)

目录 前言一&#xff0c;组件1.1&#xff0c;字体图标1.2&#xff0c;下拉菜单组件1.2.1&#xff0c;基本下拉菜单1.2.2&#xff0c;按钮式下拉菜单 1.3&#xff0c;导航组件1.3.1&#xff0c;选项卡导航1.3.2&#xff0c;胶囊式导航1.3.3&#xff0c;自适应导航1.3.4&#xff…

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…

【黑马头条之图片识别文字审核敏感词】

本笔记内容为黑马头条项目的图片识别文字审核敏感词部分 目录 一、需求分析 二、图片文字识别 三、Tess4j案例 四、管理敏感词和图片文字识别集成到文章审核 一、需求分析 产品经理召集开会&#xff0c;文章审核功能已经交付了&#xff0c;文章也能正常发布审核。对于上次…

【已解决】React Antd Form.List 表单校验无飘红提示的问题

背景 我想对 Form.List 构建的表单进行校验&#xff0c;比如下拉框中的内容应当至少有一个 XX&#xff0c;表单的长度不能少于多少等等对 List 内容进行校验&#xff0c;并给出飘红提示 问题 比如我有这样一段代码来实现对 list 具体内容的校验&#xff0c;但是写完后发现没有…

专科程序员,想要面试获胜必须要做的两个点

这两天看到一篇关于专科程序员找工作的文章&#xff0c;感受到了其中的坎坷 那么作为专科程序员&#xff0c;我们应该如何获胜&#xff0c;获得工作机会呢&#xff1f; 根据我的经验&#xff0c;以下两点一定会给你带来更多的机会。 一个是学好英语 另外一个是构建自己的…

高层金属做power mesh如何避免via stack

随着工艺精进&#xff0c;pr要处理的层次也越来越多&#xff0c;如何选择power plan的层次尤为关键&#xff0c;一方面决定ir drop的大小&#xff0c;影响着芯片的功能&#xff0c;一方面决定绕线资源&#xff0c;影响面积。 选择高层metal做power mesh的关键在于厚金属&#…

微信小程序开发之配置菜单跳转到自定义页面

需求: 用户点击公众号菜单跳转到自定义带引流码的链接 公众号相关文档: 网页授权 | 微信开放文档 大致流程: 1.在公众号菜单配置链接: https://open.weixin.qq.com/connect/oauth2/authorize?appidXXXXXXXXXXXX&redirect_urihttps%3A%2F%2F测试域名%2Fws_dabai%2Fwe…

i.MX6ULL(二十) linux platform 设备驱动

Linux 系统要考虑到驱动的可重用性&#xff0c;因 此提出了驱动的分离与分层这样的软件思路&#xff0c;在这个思路下诞生了我们将来最常打交道的 platform 设备驱动&#xff0c;也叫做平台设备驱动。 1 Linux 驱动的分离与分层 1.1 驱动的分隔与分离 对于 Linux 这样一…

查看电脑上NET Framework最高版本

1、使用CMD工具 1、进入路径&#xff1a; cd %WINDIR%\Microsoft.NET\Framework\v4.0.303192、查看版本 MSBuild /version2、效果

【Github】自动监测 SSL 证书过期的轻量级监控方案 - Domain Admin

在现代的企业网络中&#xff0c;网站安全和可靠性是至关重要的。一个不注意的SSL证书过期可能导致网站出现问题&#xff0c;给公司业务带来严重的影响。针对这个问题&#xff0c;手动检测每个域名和机器的证书状态需要花费大量的时间和精力。为了解决这个问题&#xff0c;我想向…

NAT详解(网络地址转换)

一句话说清楚它是干什么的&#xff1a; 网络地址转换&#xff1a;是指通过专用网络地址转换为公用地址&#xff0c;从而对外隐藏内部管理的IP地址&#xff0c;它使得整个专用网只需要一个全球IP就可以访问互联网&#xff0c;由于专用网IP地址是可以重用的&#xff0c;所以NAT大…

基于机器学习的供水管网水力模型

大数据、人工智能、物联网等前沿技术正推动人类社会发展发生深刻变革。2021年12月12日&#xff0c;国务院印发了《“十四五”数字经济发展规划》&#xff0c;进一步指明了各行业数字化转型发展的方向。作为传统的民生保障行业&#xff0c;供水行业也面临着向数字化智慧化转型的…

2023年的前端开发还好找工作么

首先可以明确写在前面的是&#xff0c;前端的确是不像之前一样&#xff0c;只会简单的基础就能轻轻松松的找到工作的&#xff0c;随着学习的人不断增多&#xff0c;市场自然会逐步提高对就业人员的要求&#xff0c;那么再以之前的要求来看待前端的话的确是不可取的 互联网在&a…

机器学习深度学习——多层感知机的从零开始实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——多层感知机 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 为…

计算机二级Python基本操作题-序号41

1. 输入字符串s&#xff0c;按要求把s输出到屏幕&#xff0c;格式要求&#xff1a;宽度为30个字符&#xff0c;星号字符*填充&#xff0c;居中对齐。如果输入字符串超过30位&#xff0c;则全部输出。 例如&#xff1a;键盘输入字符串s为"Congratulations”&#xff0c;屏幕…

基于Kaggle训练集预测的多层人工神经网络的能源消耗的时间序列预测(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f308;3 Matlab代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 本文为能源消耗的时间序列预测&#xff0c;在Matlab中实现。该预测采用多层人工神经网络&#xff0c;基于Kaggle训练集预测未来能源消耗。 &am…

自动化测试如何做?分层自动化测试如何实施?一篇概全...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 分层的自动化测试…

qt简易闹钟

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->stopBtn->setDisabled(true);this->setFixedSize(this->size()); //设置固定大小this->s…