超越Selenium：自动化测试框架Cypress在现代前端测试中的卓越实践（windows版本）环境搭建

xuyuan19982026-01-14 8:04

为什么要学习cypress?

无需安装或配置服务，驱动程序或任何其他依赖项，快速开发测试用例，无需高成本。
高性能、运行速度很快
学习成本低、只要掌握简单的js语法
提供可视化调试页面
无成本截图和录屏测试过程

环境搭建

环境要求：

cypresss 是基于node.js，因此需要安装node，支持的版本12、14、16

在官网下载版本，下载msi安装包后，点击开始安装，直接点击下一步即可，从安装引导中可以看到提示信息，安装包会同时安装node.js和npm，

如我本地安装版本是

npm创建项目和cypress安装

1、npm init 创建项目

复制代码

C:\Users\L>mkdir EasyDemo（创建一个项目）
C:\Users\L>cd EasyDemo（进入项目）
C:\Users\L\EasyDemo>npm init（通过npm 初始化这个项目）
回车后，会
....
package name: (easydemo)
一直按 enter  键

一直到的这个内容

此时在EasyDemo目录下能看到 package.json文件

2、在该目录下继续安装

bash 复制代码

C:\Users\L\EasyDemo>npm install cypress

安装完成后，在项目的目录下，则新增了node_modules和json文件

3、启动

启动命令（注意：这是在windows里面的启动命令，和linux是不同的，这个命令不能用在linux中，在linux中直接：node_modules.bin\cypress open 即可）

bash 复制代码

node_modules\.bin\cypress.cmd open

随后会弹出

选择端到端 testing ，点击继续

选择浏览器

接下来，直接选择例子来展示
此时环境是准备好了，接下来，就是写用例了。

先安装一个Visual Studio Code 用来写用例代码，安装过程非常简单（直接下载安装包，下一步的直到完成即可）

安装完成后，先下载一个code.runner的插件

在vs中打开EasyDemo的文件项目

新增一个的用例

在cy中

如果一次性启动所有用例

在vs中的终端中

bash 复制代码

npx cypress run

运行中：

最后我们看个效果：

01-打开百度首页.spec.cy.js