前端自测.

2023-11-19

交互

宽度1200px

表单校验(长度、敏感词汇)

初始化、loading、结果(空)

表单重复提交(loading),请求拦截(限流)

数字(大数据)千分位

文本长度(省略号)

数据查询结果校验(按条件查询结果是否正确)

空数据传参 ?xx=‘’

参数头尾有空格

表单最后一项是输入框 应该支持enter提交

分页切换后滚动条移动到内容区顶部

删除等操作是否有二次确认

列表翻页是否正常

批量操作是否正常

文件上传时是否做了类型、大小、数量限制

表单编辑时,数据回显是否正确。

表单编辑时,无改动提交,改动后提交时候正确

表单提交后成功后,是否有刷新列表

#用户视角
正常的使用和点击操作,按照一个普通用户的角度去点击,忘掉那些交互细节。有没有觉得哪里不太舒服,记得赶紧向产品提出,不然可能又是后期的紧急需求变更。

需求阶段和设计阶段,很多交互和界面基本都是产品凭空想象,即使UI搞很逼真但依然动不起来,

组合测试:防止不同模块的功能相互冲突

#功能测试
单元功能,是我根据开发中某个单小功能分解出来的,比如

似乎所有需要输入的地方大概都有以下注意点,但几乎没有产品在需求稿中如此细致,往往测试阶段再考虑。或者出了问题再考虑。

你需要做的是

限制最短和最长字数,超出或未达到给出相应提示
限制特殊字符评论,是否支持某些表情包(输入法自带)
点击评论设置防抖(防止用户短时间多次点击评论,导致至少发出至少两条请求)
是否只支持而特定格式纯数字?纯字母
是否需要添加风控词过滤接口
#视觉视角
UI设计师可能给你埋下的坑
需求稿中的的字段,视觉稿无体现,和需求稿不一致(到底以谁为准)
部分视觉设计未考虑极限情况,比如给某副标题预留5个字位置,然而线上老版本该字段有一些5+的情况,
自己可能埋下的坑
不同块之间的外边距和内边距,可能由于边框等存在微小差异
多次调整导致色值出现差错
开发中需求加了一行数据,或者加了一块内容,导致整体布局重新做
#极限检查
极限检查主要指极限值出现时的样式检查。例如:名称,预留位置为50px,假如有些用户名超出50px,此时需要超出行不显示或者显示省略号,设置title,保证隐藏部分用户鼠标放置可见

如以下实例

#后端视角(数据)
后端最容易出问题的首先就是和前端交接时使用的 :接口文档

#接口数据对照
开发中极易容易出现数据接错的情况,比如大量number类型的数据,且大小类似,后端测试不特意关注这一块的话,很容易出现,上生产,数据接错问题。

#单项数据异常为空的情况
有些数据的为空时,页面极易容易出现以下问题

页面数据项显示 undefind、NaN。
控制台报Cannot read property ‘length’ of null之类的错误
数据为空,布局错位
#你需要做的是
接口数据变量对照,确认哪些变量没用到,和后端及时沟通。
接口code或接口异常处理和容错处理
确认某一项数据为空或异常的情况
在接口异常时,保证提示给用户“网络异常,稍后重试”,“活动火爆,请稍后重试”之类的提示语,杜绝让用户看到出现一些程序开发专业数据,例如“当前token值失效,请重新登录”“请求参数有误”之类的专业名词

#兼容性考虑
#浏览器
根据需求对不同手机系统或浏览器的兼容版本,进行分别检查

#窗口、显示器
动态调整窗口大小,检测是否错位,为页面数据添加极限值,检测适应性

#性能和优化问题
如果你顺利通过以上自测,距离正式提交测试还有时间的话,那是时候优化了

随着开发的深入,最初设计的dom布局结构可能过于错乱,在项目接近尾声时可以对其进行重构
对容易出错的地方进行重构
对无用代码删减
#常规测试用例
#UI自检
测试步骤 测试数据 预期结果 备注
文本过长是否溢出隐藏
容器内容是否贴边
屏幕较小时布局是否会乱
数据为空是否有提示
页面刷新后导航焦点是否保持
页面渲染时是否会明显跳动 预防重排
数据加载时间较长是否有loading
移动端唤起键盘时输入框是否可见
数据请求异常时是否有提示
多个相同数据异常信息是否有去重
#搜索或查询
测试步骤 测试数据 预期结果 备注
单独遍历各查询条件,测试按各查询条件是否都能够查询出相应的值 查询出符合条件的记录
随机对各查询条件进行组合查询,测试是否能够实现组合查询 各查询条件下存在相应的值 查询出符合条件的记录
测试是否控制了各种非法字符的查询 测试是否控制了各种非法字符的查询 查不到任何记录
输入各查询条件,前中后包含空格 前后包含空格去掉空格查询,中间包含空格查不出记录
如果最后一个搜索条件是输入框,enter是否可以查询 查询出符合条件的记录
输入查询条件后,点重置 重置后,已输入或已选择的值都恢复为默认值,并且请求中的数据也是默认值
#上传文件
测试步骤 测试数据 预期结果 备注
文件类型正确,文件大小合适 上传成功
文件类型正确,文件大小不合适 上传失败
文件类型错误,文件大小合适的校验 上传失败
#文件的导出或下载
测试步骤 测试数据 预期结果 备注
导出文件名是否乱码
导出大量数据时的时间是否在合理的时间范围内
#保存和修改
测试步骤 测试数据 预期结果 备注
进行新增或修改操作,输入相关内容后,多次提交保存,测试是否限制了重复保存 重复点击保存或 快速点击 在提交反馈之前,按钮呈灰色显示不允许点击
选择一条记录进行修改保存,测试信息修改是否正常 修改某几个字段 能够正常进行修改保存且其他字段保持不变
有否做必填以及特殊字段校验

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端自测. 的相关文章

  • vue2项目实现excel文件导入导出和拖拽上传

    文章目录 一 excle文件导出 二 excel文件导入 三 文件拖拽上传 四 完整代码 文件导入导出实现逻辑图 一 excle文件导出 导出员工接口返回的是二进制流 axios配置responseType为blob接收二进制流文件为Blo
  • jquery的contains如何实现精准匹配

    HTML结构
  • vue 点击改变数组中选中的icon颜色(结合拖拽实现)

    1 vue 点击改变数组中选中的icon颜色 在Vue中 可以通过使用v bind指令来动态地修改元素的样式 要根据点击事件来改变数组中选中图标的颜色 首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息 然后 在模板中使用
  • python画彩虹和小熊

    前言 今天 我们来画两个简单的图形 一 彩虹 彩虹 又称天弓 客家话 天虹 绛等 简称为 虹 是气象中的一种光学现象 当太阳光照射到半空中的水滴时 光线被折射及反射 在天空上形成拱形的七彩光谱 雨后常见 形状弯曲 通常为半圆状 色彩艳丽 东
  • HarmonyOS鸿蒙开发指南:容器组建 tabs开发指导

    目录 创建Tabs 设置Tabs方向 设置样式 显示页签索引 场景示例 创建Tabs 在pages index目录下的hml文件中创建一个Tabs组件 div class container div
  • 事件委托Tab栏切换

  • Fiddler工具 — 9.命令行和状态栏

    1 命令行 命令行在Fiddler的左下方的黑色窗口 也叫 QuickExec 可以调用 Fiddler的内置命令 这一系列内置的函数用于筛选和操作会话列表中的session 会话 虽然它不是很显眼 但用好它 会让你的工作效率提高 N 倍
  • Vue + Element-ui组件上传图片报错问题解决方案

    在使用Vue和Element ui组件上传图片时 可能会遇到一些报错问题 以下是一些常见的问题及解决方案 报错 TypeError Cannot read property name of undefined 解决方案 这个错误通常是因为在
  • Firefox浏览器-渗透测试插件推荐

    在日常工作中可能需要一些浏览器插件辅助我们做工作 下面是比较好的 当然不一定对你有用 找到适合自己的即可 FoxyProxy FoxyProxy是一个高级的代理管理工具 它完全替代了Firefox有限的代理功能 它提供比SwitchProx
  • 浏览器缓存相关面试题一网打尽,理论结合实践,用代码学习缓存问题,建议关注+收藏,(含项目源代码)

    前言 浏览器缓存的问题是面试中关于浏览器知识的重要组成部分 也是性能优化题目的一部分 但是不要被吓到 我话放到这里 就那么点东西 我这一篇文章基本上就涵盖了所有相关的知识点 认真看一遍 所有的问题都是纸老虎 一 准备工作 1 1 拉取仓库
  • 拼多多详情API开启运营比价新纪元

    随着互联网的快速发展 电商行业正在迅速崛起 拼多多作为一家新兴的电商平台 凭借其独特的营销策略和创新的商业模式 成为了电商行业的一匹黑马 在拼多多的成功背后 其详情API接口营销起到了至关重要的作用 本文将详细介绍拼多多详情API接口营销的
  • JS特效第74弹:旅游城市图片百叶窗切换React特效

    全屏的旅游城市景点图片滑动百叶窗轮播切换效果 先来看看效果 一部分关键的代码如下 div div
  • ECMAScript简介及特性介绍

    ECMAScript 简称ES 是JavaScript的规范 同时也是被广泛采用和实现的脚本语言标准 从最初的1996年推出第一版至今 ECMAScript已经经历了数十年的发展和改进 成为了互联网开发中的重要基石之一 本文将对ECMASc
  • Android SDK开发艺术探索(五)安全与校验

    一 前言 本篇是Android SDK开发艺术探索系列的第五篇文章 介绍了一些SDK开发中安全方面的知识 包括资源完整性 存储安全 权限校验 传输安全 代码混淆等知识 通过基础的安全配置为SDK保驾护航 探索SDK开发在安全方面的最佳实践
  • 低代码-添加按钮组件设计

    效果图 可拆分为以下细节 按钮列表 删除 两个操作需同步删除 点击外侧删除 点击复选框删除 添加 点击复选框添加 示例代码 技术栈 vue3 arco design ts less tailwindcss
  • vue实现 marquee(走马灯)

    样式 代码 div class marquee prompt div class list prompt span class prompt item span div div data return listPrompt xxx xxxx
  • chrome浏览器无法在地址栏输入内容搜索问题解决--图文

    关于日常遇到的小问题解决记录一下 1 导航栏录入信息后跳转错误 2 解决办法 默认百度搜索引擎地址错误 百度正确的搜索格式是 http www baidu com s wd s chrome浏览器中百度的搜索格式是 http www bai
  • 一文让你了解UI自动化测试

    测试都起什么作用 是项目的保险 但不是项目的救命草 测试无实际产出 但作用远大于实际产出 测试是从项目维度保证质量 而不是测试阶段 UI自动化 下面简称自动化 基于UI进行自动功能测试 以Web端作为例子 一般的UI功能自动化都是基于HTM
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据
  • Vue中下载不同文件常用的方式

    1 使用window open方法下载文件

随机推荐

  • vue之input通过formData实现单个文件上传

  • 数学建模--Seaborn库绘图基础的Python实现

    目录 1 绘图数据导入 2 sns scatterplot绘制散点图 3 sns barplot绘制条形图 4 sns lineplot绘制线性图 5 sns heatmap绘制热力图 6 sns distplot绘制直方图 7 sns p
  • More Info for Email AdminsStatus code 554 5.4.14

    Your message to account security noreply accountprotection microsoft com couldn t be delivered account security noreply
  • System.getProperty用法

    转自 http blog darkmi com 2011 03 16 1666 html System getProperty 用于获取当前的系统属性 比如java版本 操作系统名称 区域 用户名等 这些属性一般由jvm自动获取 不能手工设
  • IQ调制的过程

    正交调制 IQ modulation IQ调制器的相移器原理 正交调制数学表达和图形化过程i显示 关键元素都在里面 普通调制的过程 PAM调制的原理 IQ modulators are versatile building blocks f
  • 如何将Visio绘制的图保存为300dpi的tif图片

    采用visio 2013绘图 用ctrl A全选绘制的图 开始 另存为 选择保存类型为tif Tif输出设置 分辨率设为300dpi 300dpi 验证一下图片分辨率 右击生成的tif文件 属性 详细信息
  • 问题记录:js的=>和function

    这个问题搞了一整天 是这么一个功能
  • 认识 maven_我的总结

    认识 maven maven Apache Maven 是一种用于软件项目管理工具 基于 Project Object Model POM 用来管理项目的构建 汇报及文档生成等功能 软件开发 开发 gt 测试 gt 安装与部署 开发阶段 依
  • Apache Flink Checkpoint 应用实践

    Checkpoint 与 state 的关系 Checkpoint 是从 source 触发到下游所有节点完成的一次全局操作 下图可以有一个对 Checkpoint 的直观感受 红框里面可以看到一共触发了 569K 次 Checkpoint
  • STM32_USB之完全双缓存(包括发送和接收) -- 更新中断处理

    STM32的USB双缓存接收代码其实已经可以在ST提供的USB示例代码中找到 只要稍加修改 就可以得到将近1MB的数据接收性能 虽然Datasheet中说明USB发送也同样可以使用双缓存 但并没有示例代码 由于为了测试性能 自己做了一个 测
  • R语言GGPLOT2绘制圆环图雷达图/星形图/极坐标图/径向图Polar Chart可视化分析汽车性能数据

    最近我们被客户要求撰写关于可视化的研究报告 包括一些图形和统计输出 漂亮的圆形图 我不确定对数据分析师本身是否有额外的好处 但如果能吸引决策者的注意 那对我来说就是额外的价值 然而 用coord polar 或偶尔发现的ggplot2中的c
  • Lua的线程和状态 及协程

    luaL loadstring L return coroutine create function end nCallResult lua pcall L 0 1 0 创建一个协程和lua newthread创建一个线程一样 不过这个创建
  • 关于mysql group_concat不得不说的事

    mysql中 group concat函数将group by产生的同一个分组中的值连接起来 返回一个字符串结果 当查询的数据过多时 group concat超出了默认值1024个字符 超过就会截断 导致group concat查询出来的数据
  • ppt怎么压缩文件大小?学会这几种方法

    ppt 用office PowerPoint 制作的幻灯片 用于编辑 播放 各种操作 简单易学 在实际的生活和办公过程中 ppt文件的应用范围非常广泛 同样的 ppt也是非常重要的工具之一 很多时候 我们需要对ppt文件进行压缩 从而满足p
  • 原理图中的电阻旁边有个”NC“,什么意思?

    NC表示此处空贴 即此处不贴任何电子器件 如果安装的话 电路会有另外的功能 或许在性能上会有变化 常用于电路板贴装技术中 电路板贴装是回流焊中的一种工艺流程 回流焊也叫再流焊 是伴随微型化电子产品的出现而发展起来的焊接技术 主要应用于各类表
  • leetcode-无重复元素的最长子串

    给定一个字符串 请你找出其中不含有重复字符的最长子串的长度 例如对于字符串 str adfhdsla 它的无重复字符的最长子串为 sub adfhdsl 很显然 首先要有一个函数用以判断当前的子串中有无重复元素 然后寻找子串的工作就要用这个
  • 闲云:unity中不能识别monobehevior关键字的问题

    有时候一些小问题很恼人 如unity中新建脚本后不能识别monobehevior关键字 在vs2017右侧的解决方案中点击刷新图标 或者把不能识别的脚本添加到vs2017右侧的解决方案中的Assets中即可 还不行就点击 排除 然后再 添加
  • QApplication和QCoreApplication

    一 QCoreApplication用于non GUI的应用程序 不需要依赖QtGui库 QApplication用于包含GUI的应用程序 需要用到QtGui库 Qt是一个开源的C 库 主要用来开发GUI程序 但同时 它也支持控制台程序的开
  • log4j使用说明

    查阅阿里的jva开发手册 我们发现在打印日志的时候有一下几条是强制的 1 应用中不可直接使用日志系统 Log4j Logback 中的API 而应依赖使用日志框架SLF4J中的API 使用门面模式的日志框架 有利于维护和各个类的日志处理方式
  • 前端自测.

    交互 宽度1200px 表单校验 长度 敏感词汇 初始化 loading 结果 空 表单重复提交 loading 请求拦截 限流 数字 大数据 千分位 文本长度 省略号 数据查询结果校验 按条件查询结果是否正确 空数据传参 xx 参数头尾有