认识前端自动化测试、小程序中如何实现单元测试

一、什么叫自动化测试?

  • 模拟真人用户的操作:点按钮、输内容、跳转页面、提交表单
  • 检查页面有没有正常显示、接口有没有正常返回、流程能不能走通
  • 一旦哪里崩了、报错了、文案不对了、接口挂了,自动化直接告诉你哪一步失败,不用再自己从头到尾点一遍,它帮你全跑了。

1. 简述:「站在用户角度测试功能完整性」精准命中了E2E(端到端)自动化测试的本质,区别于单元测试(站在代码角度)。

2. 自动化测试,对比常使用的单元测试

二、前端有必要学习自动化测试吗?

  1. 大幅减少你自测、回归测试的重复劳动

    改完一个页面、一个组件,要反复点:登录、表单提交、按钮跳转、弹窗、列表加载, 这些重复点,自动化脚本跑一次只要 10 秒,你自己点要 几分钟。

  2. 避免 "改一处、崩一片" 的线上事故

    改了登录 → 影响个人中心改了个人中心 → 影响列表改了列表 → 影响支付,自动化能自动跑一遍所有关键流程,哪里有报错你就知道了,为什么?他是站在用户使用角度去测试的,页面功能不正常了,你就很便捷去修改具体代码,其次就是你修改代码之前,已经跑通过整个业务链路并且已经写过自动化脚本,所以他知道执行步骤,如果出现问题就会及时反馈出来,不必人工方式去走一遍流程...

  3. 让你从 "切图仔" 升级成 "工程化前端"

    这是高级前端和初级前端的分水岭,从代码层写测试脚本,节约直接使用页面手动测试效率(轻量级框架还好,特别是angular项目,用过的都知道随便修改一点东西自动刷新半天才看得到页面,特别是接口或网络不给力情况下,你就看着白屏页面等吧...),还有写测试脚本写的多了,自然封装组件的能力也会得到提升,因为考虑的广自然控件封装也知道兼容性好,

三、前端如何渐近学习自动化(从简单-难-学习过程)

  1. 单元测试(Jest / Vitest)------ 最实用、最刚需

    测工具函数、公共组件、表单校验、工具类。→ 90% 前端都应该学会,对日常开发帮助最大。

  2. 组件测试(Testing Library)------ 进大厂必备

    测按钮、表单、弹窗、下拉框等组件。

  3. E2E 自动化(Cypress / Playwright)------ 最接近测试岗

    模拟用户真实操作:点击、输入、跳转、登录流程。→ 你转测试也靠这个,前端自己也能用。

  4. 接口自动化(Supertest / Playwright 请求)

    测接口、登录、token、表单提交。

四、微信小程序中实现单元测试

(目前做小程序中,所以先说下这个)

1.渐近学习方向(简单-难)

A:工具函数测试 jest (先实践这个)

B:表单校验测试(登录注册必用)

C:公共组件测试(按钮 / 输入框 / 弹窗)

D:E2E 自动化(Cypress 模拟点页面)

E:写测试脚本一键跑所有用例

2.在小程序使用中,将工具函数进行脚本测试(纯逻辑单元测试),

2.1 搭建单元测试环境,安装jest

bash 复制代码
npm init -y
npm install jest --save-dev

2.2 创建后,写一点通用的手机号校验方法,然后在单元测试js中去配置脚本校验【是不是又想到了,专业测试写测试用例中的两个方法:等价类分法、边界值分析法 测试人员角度:等价类分法、边界值分析法的完整认识

3.终端执行命令

bash 复制代码
npx jest

4.单元测试Jest, 测试用例 describe + test + expect 详解

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
MoonMoonLee1 天前
小程序配置
小程序
汉堡大王95271 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大1 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师1 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端