操作系统

Cypress 是桌面端应用，所以需要以下操作系统支持：

Windows 7 及以上版本
macOS 10.9 及以上版本
Linux Ubuntu 12.04 及以上版本，Fedora 21 和 Debian 8

Node.js

因为后面会使用 npm，所以需要安装 Node.js

Node.js 12 或 14 及以上版本

推荐安装 Node.js 16.17.0 版本或者查看所有版本Node.js

安装 Cypress

通过 CDN 下载 Cypress 10.11.0 zip 包

点击链接，直接下载 Cypress 10.11.0, 或者下载最新版本

Windows 下安装 Cypress

# Step1: 导航到如下路径, 没有的文件夹需要创建 其中 10.11.0 对应下载的版本号
C:\Users\用户名xx\AppData\Local\Cypress\Cache\10.11.0\Cypress

# Step2: 将 cypress.zip 解压到该路径下，保证 Cypress 下面就是文件，不要产生 Cypress/Cypress/ 目录结构

MacOS 下安装 Cypress

# Step1: 导航到如下路径, 没有的文件夹需要创建 其中 10.11.0 对应下载的版本号
~/Library/Caches/Cypress/Cache/10.11.0/Cypress
# Step2: 将 cypress.zip 解压到该路径下，保证 Cypress 下面就是文件，不要产生 Cypress/Cypress/ 目录结构

Linux 下安装 Cypress

# Step1: 导航到如下路径, 没有的文件夹需要创建 其中 10.11.0 对应下载的版本号
~/.cache/Cypress/Cache/10.11.0/Cypress
# Step2: 将 cypress.zip 解压到该路径下，保证 Cypress 下面就是文件，不要产生 Cypress/Cypress/ 目录结构

验证

导航到你喜欢的地方，创建文件夹 cypress-test，用来使用和验证 cypress

编写 package.json

该文件路径为 /path/cypress-test/package.json

{
  "name": "cypress-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx cypress open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "10.11.0"
  }
}

使用 npm install 下载包

# 使用 npm install 安装依赖包，因为我们之前安装过了 cypress，所以本次安装会很快
❯ npm install

> cypress@10.11.0 postinstall /Users/xxx/Desktop/cypress-test/node_modules/cypress
> node index.js --exec install

Cypress 10.11.0 is installed in /Users/xxx/Library/Caches/Cypress/10.11.0

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN cypress-test@1.0.0 No description

added 166 packages from 176 contributors and audited 1 package in 8.213s

28 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

至此文件树如下：

|-- node_modules
|-- package.json
|-- package-lock.json

使用 npm run dev 运行

# 上面顺利通过之后，就可以在当前目录下执行 npm run dev, 运行 cypress
❯ npm run dev

> cypress-test@1.0.0 dev /Users/xxx/Desktop/cypress-test
> npx cypress open

等待一会之后，会弹出如下截图，即代表安装成功:

代码地址

git clone https://gitee.com/yuestone-info/cypress-test.git -b juejin.cn/post/7173831711896109069

尾声

本文要入门的话，还是需要部分前端知识，比如 npm 等。

Cypress 安装