最强前端测试教程 - 通过测试来做性能分析

近期引发出了一个问题就是如果测试数量庞大几千几万个case每次mr跑一遍是很耗时的这时候就需要有人来研究测试慢的原因了进行debugprofile等。找出慢的测试同时也能帮我们定位有问题的代码下面我来教你们怎么通过测试代码进行性能分析。step1新建profile.ts代码如下import fs from fs import { Session } from inspector import path from path let session: Session export async function startProfiling() { session new Session() session.connect() await new Promise((f) { session.post(Profiler.enable, () { session.post(Profiler.start, f) }) }) } export async function stopProfiling(profileName integration-test) { await new Promise((f) session.post(Profiler.stop, (err, res) { if (!err) { const targetPath path.join(__dirname, profileName .json) fs.writeFileSync(targetPath, JSON.stringify(res.profile)) } f(1) }) ) }我们使用的nodejs的inspector 这是一个强大的内置调试工具它可以连接到chromedevtool对nodejs进行调试。那么就说明他一定有方法导出profile。于是看了一下类型定义果然发现了一个接口。那么我们就直接在测试的开始和结束的时候调用一下就行了然后把记录的内容新建一个文件导出来。step2模拟一个慢操作我们找到一个地方加点 hack 的代码比如在点击收藏按钮的时候创建 3000 个 div。step3在测试中开启记录profile在测试代码中添加如下命令// ... beforeAll(async () { await startProfiling() }) afterAll(async () { await stopProfiling() }) // ...然后运行测试npm run test后可以看到新增了一个文件。step4把生成的 profile 给拖到 chrome 性能面板中进行查看点击自上而下可以看到最耗时的操作 appendChil 暴露出来了 继续展开看一下定位到前面写的 mockSlow 了。结尾可能有人会问我明明自己录制调试一下也可以发现为什么要折腾这么一圈这其实就是测试的好处了因为大部分情况人们不知道自己的代码有问题比如 100ms 200ms 的延迟察觉不到比如本应该是全局单例结果实例数量会随着页面跳转而增加。这些问题通常会被“我这跑起来没问题啊”这种话给忽略掉。但是未来你可能就要被页面卡死或者内存泄露的 bug 折磨一整天。通过观察测试运行的时间变化内存变化可以及时定位这些问题除掉隐患。最后下方这份完整的软件测试 视频教程已经整理上传完成需要的朋友们可以自行领取【保证100%免费】​​​软件测试面试文档我们学习必然是为了找到高薪的工作下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料并且有字节大佬给出了权威的解答刷完这一套面试资料相信大家都能找到满意的工作。