我用Cypress做了前端自动化测试

前言

作为一名前端，对于自动化测试我一直是抗拒的。通常我会使用下面两个理由来拒绝试图想让我做自动化测试的人

• 前端页面变化多端，更新迭代速度快，测试用例需频繁修改
• 曾亲身参加过在上海举行的VueConf2019，会上有个环节，嘉宾问在场大家公司都用了自动化测试没有，举手者寥寥

第一条原因是本人内心的设定，第二条则坚定了这个观念

因未知而却步其实才是本人最真实的写照

在某个时刻，决定稍微认真的审视下自己的这个想法，于是开启了一段新的旅程

它山寻访

首先想到的是在开源项目中看下大家用的是什么，

Ant Design Vue使用的是jest

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKSPfLaL-1659600286487)(/Users/pobu/Documents/笔记/cypress/素材/antd-jest.png)]

element-plus使用的是vitest，也是基于jest的实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgW3b7eY-1659600286488)(/Users/pobu/Documents/笔记/cypress/素材/element-plus-vitest.png)]

官方文档中推荐了Vue Test Utils

那果断要从官方的这个先开始测试下，一番操作，一个测试还没写完，发现了一个问题，这些都不是我想要的，这些都是做组件的单元测试方案，而要找的是端到端的测试，理论上说应该更上一层。

寻得真龙

已经不记得Cypress是怎么进入视线的了，但在39.7K Star 加持下，果断放弃了抵抗。推荐大佬的博客

还有同事推荐了Puppeteer，Star更多，但……

对比维度	Cypress	Puppeteer
完备的框架	Yes	Yes
是有有IDE	Yes	No
适用范围	e2e的完美解决方案	主要用于爬虫和开展快速测试
自带断言库	Yes	No
回访测试执行情况	Yes	No
多浏览器支持	Yes	Yes

最终，还是选择了Cypress

效果演示

对简单的管理系统CRUD功能进行了测试，下面看效果:

2-user-mgmt.cy.js