细聊测试工具Cypress

lsekfe

最近准备给公司项目做重构，原本是打算使用Jest来作为测试工具的，刚好无意之中接触到了Cypress这款测试工具，虽然用上它非常的不容易（简直是一波三折），但是用上了之后觉得真香啊。我们本篇文章就是讲Cypress如何安装和使用，以及解决安装和使用过程的坑。
　　提前预先告知一下遇到的问题：
　　cypress 包下载不下来
　　Cypress 应用程序下载太漫长，经常性失败（挂梯子也没用）
　　TypeScript 类型错误
　　为什么选择 Cypress？
　　Cypress是新一代的前端测试工具。可以测试在浏览器中运行的一切。并且它的所有动作都是在浏览器环境运行的，这意味着你通过Cypress跑测试用例跟在生产环境使用一模一样。这会比Jest这种在虚拟浏览器中进行测试更加可靠。
　　安装 Cypress
　　安装Cypress可是非常的不容易，使用Cypress最大的障碍就是安装Cypress——这太折磨了吧。
　　初始化项目
　　我们这里使用vite快速创建一个项目：

1. pnpm create vite
   

复制代码

根据指引选择你想要的框架与配置（不同框架之间配置基本一致），我的如下：

1. ✔ Project name: cypress-vite
   
2. ✔ Select a framework: › React
   
3. ✔ Select a variant: › TypeScript

复制代码

进入文件目录并安装基本的依赖：

1. cd cypress-vite && pnpm install
   

复制代码

不知道为什么，最近npm的依赖基本安装不下来（我看群里有好几个人都说最近安什么包都安不下来）。没办法，换淘宝源吧：

1. npm config set registry https://registry.npm.taobao.org
   

复制代码

重新pnpm install算是安装上了。
　　安装 cypress 依赖

1. pnpm install cypress --save-dev
   

复制代码

尝试启用cypress：

1. npx cypress open
   

复制代码

第二个折磨来了，报错内容如下：

1. No version of Cypress is installed in: /Users/UserName/Library/Caches/Cypress/11.1.0/Cypress.app
   
2. 
   
3. Please reinstall Cypress by running: cypress install
   
4. 
   
5. -----------
   
6. 
   
7. Cypress executable not found at: /Users/UserName/LibraryCaches/Cypress/11.1.0/Cypress.app/Contents/MacOS/Cypress
   
8. 
   
9. -----------
   
10. 
    
11. Platform: darwin-x64 (20.6.0)
    
12. Cypress Version: 11.1.0

复制代码

这是因为安装的cypress包只是跑测试用例的代码, 而控制浏览器完成自动化测试的是通过Cypress应用程序进行的。
　　既然如此，我们就按照提示安装Cypress应用程序：

1. npx cypress install
   

复制代码

结果发现根本装不下来，每次都是到1%的进度就断掉或者没有进展（有些人等了几个小时仍然没有安装下来，是谁我不说……
　　[url=]百度[/url]、谷歌、stackoverflow、github 上查了半天，最终是无意之间在 Github 上的 issue 上找到了解决办法。需要在安装命令后面加上--force：

1. npx cypress install --force
   

复制代码

几秒钟就安装了下来（这个凭什么就能安装下来呢？！？！？！
　　启用 Cypress
　　重新执行：

1. npx cypress open
   

复制代码

就会打开Cypress应用程序，界面如下：

E2E Testing
　　我们这里先选择E2E Testing。Component Testing 我后面会讲怎么配置（毕竟还有TypeScript的坑要填呢～）
　　关于这两者之间有什么区别，可以点击Welcome to Cypress!下方的Review the differences between each testing type →前往查看，这里就不多做解释了。
　　告知在我们的项目添加了以下文件：

选择你将要运行的环境以后就会打开一个浏览器窗口：


这里检测到我们没有可以执行的例子，所以提供了两个选择：
　　生成一些例子，来帮助我们了解如何通过Cypress写测试
　　生成一个空的测试文件，以便于我们开始测试应用
　　选择哪一个都可以，建议选择生成一些例子，这样就可以了解测试用例如何去写了。
　　生成好测试用例以后点击一个文件就可以开始测试了：


Component Testing
　　退回到Cypress应用程序中，选择Component Testing：

Cypress将会自动检测并选择上当前使用的框架及构建工具：

基于上一步的选择来检查必要的依赖是否已安装：

最后安装下去，Cypress会帮助我们在项目中生成cypress/component目录和cypress/support/component-index.html、cypress/support/component.ts文件。
　　cypress/support/component-index.html 是用于测试的html模版，当然你也可以在cypress.config.ts中指定测试模版，将component.indexHtmlFile设置为指定的模版路径即可。
　　浏览器页面上提示我们并没有可执行的测试用例，页面上展示着生成一个空的测试页面，我们选择它，它生成在测试文件在根目录的cypress/component文件下，由于我们做的是组件测试，比较好的做法是测试文件与被测试的组件在一起（官方给的例子也是如此QAQ）。
　　在src目录下创建文件如下：

1. // /src/components/Button.tsx
   
2. export detault function Button() {
   
3.     return (
   
4.         <button data-cy="btn">0</button>
   
5.     )
   
6. }
   

复制代码

1. // /src/components/Button.cy.tsx/
   
2. import Button from "./Button"
   
3. 
   
4. describe('Button', () => {
   
5.     it('mount Button', () => {
   
6.         cy.mount(<Button />)
   
7.         cy.get('[data-cy=btn]').should('have.text', '0')
   
8.     })
   
9. })

复制代码

点击Cypress打开的浏览器中的Button.cy.tsx文件，测试通过了。

解决VSCode TypeScript类型错误
　　尽管测试通过了，但是VSCode中的Button.cy.tsx文件报类型错误，标红也就算了，还乱给智能提示，实在难受。

这是TypeScript的类型错误，我们需要在tsconfig.json中添加types: ["cypress"]配置：

1. {
   
2.   "compilerOptions": {
   
3.     "types": ["cypress"],
   
4.     // ......
   
5. }

复制代码

加上以后虽然describe等关键字没有报错，但是cy.mount仍是报错的，这是因为我们的mount方法是在cypress/support/component.ts文件中添加上的，虽然定义了全局类型，但并没有在src目录下生效，为了让两边都生效，我们将这个全局定义单独放到根目录下作为一个类型文件。

1. // cypress.d.ts
   
2. import { mount } from 'cypress/react18'
   
3. 
   
4. declare global {
   
5.   namespace Cypress {
   
6.     interface Chainable<Subject> {
   
7.       mount: typeof mount;
   
8.     }
   
9.   }
   
10. }

复制代码

同时在根目录的tsconfig.json中使用：

1. {
   
2.   "compilerOptions": {
   
3.   // ......
   
4.   "include": [
   
5.     "src",
   
6.     "cypress.d.ts" // 添加 cypress.d.ts 让类型生效
   
7.   ],
   
8.   // ......
   
9. }

复制代码

接着就可以将cypress/support/component中的类型删除掉，并在cypress目录下创建一个tsconfig.json文件：

1. {
   
2.   "compilerOptions": {
   
3.     "target": "es5",
   
4.     "lib": ["es5", "dom"],
   
5.     "types": ["cypress"]
   
6.   },
   
7.   "include": ["**/*.ts", "../cypress.d.ts"]
   
8. }

复制代码

这样，cypress.d.ts在src及cypress目录下定义的类型都可以生效了。
　　当然，也有可能会出现定义了以后cy.mount或者Cypress.Commands.add('mount', mount)仍在报错。可以在VSCode中输入组合键command + shift + p打开快捷指令栏，输入TypeScript: Restart TS server回车来重启TypeScript服务，如若仍不生效，建议重启试试～
　　结尾
　　Cypress使用起来还是很香的，支持实时测试，这样也就不用我们写什么功能完了以后再在浏览器里面点点来测试了，由于其测试是在浏览器中完成的，在浏览器中能看到每一步的快照，所以相较于Jest而言有更大的可信度，毕竟能看到的，更加真实，可以说Cypress简直是减少bug的神器啊。

付玉春

最最主要是，通过官网，基本可以解决你一切的疑问，非常nice