cypress web自动化测试-安装cypress

安装Cypress

你将学到什么？

· 如何通过npm安装cypress

· 如何直接下载安装cypress

· 如何通过package.json对Cypress进行版本控制和运行

系统要求

• Mac OS 10.9+，只提供 64 位的二进制文件。

• Linux Ubuntu 12.04+，Fedora21，Debian8

• Windows 7，只提供 32 位的二进制文件。

安装

npm安装

前提是保证本地环境已经安装了node（cypress支持node10以及12以上）

直接通过npm安装cypress：

> mkdir your_project(例如：cypress_demo)
> cd /your_project(例如：cypress_demo)
> npm init
> npm install cypress --save-dev

npm init的时候，可以根据自己的需要填写相关的信息。
初始化之后，就可以看到以下的package.json的内容了。后面也可以根据自己的需要再去不断更新package.json里面的内容。

package.json

安装的时候，如果是国内的网络会比较慢，等待下载完成就可以了。如果是国外的网络相对会快一点。

cypress_demo » npm install cypress --save-dev
npm WARN deprecated [email protected]: this library is no longer supported
[email protected] postinstall
/cypress_demo/node_modules/cypress
node index.js --exec install
​
Installing Cypress (version: 5.4.0)
​
✔ Downloaded Cypress
✔ Unzipped Cypress
✔ Finished Installation
/Library/Caches/Cypress/5.4.0
​
You can now open Cypress by running: node_modules/.bin/cypress open
​
https://on.cypress.io/installing-cypress
​
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.
​+ [email protected]
added 215 packages from 147 contributors and audited 215 packages in 67.967s
​

12 packages are looking for funding
run npm fund for details
​
found 0 vulnerabilities

直接下载安装cypress

这是另一种安装cypress的方法

通过CDN方式下载cypress

打开cypress

安装完成之后，直接通过cypress open就可以打开cypress了

启动页

这个界面还不足以支持cypress执行demo的脚本内容，需要在package.json里面添加启动项目的命令。

修改package.json里面的script脚本内容
"scripts": {
    "cypress:open":"cypress open"
  },

然后通过npm run cypress:open启动cypress就可以看到启动的内容了

cypress_demo » npm run cypress:open
[email protected] cypress:open /cypress_demo
cypress open
​It looks like this is your first time using Cypress: 5.4.0
✔ Verified Cypress!
Library/Caches/Cypress/5.4.0/Cypress.app
​
Opening Cypress...

接下来就可以看到启动之后cypress包含脚本的界面了。这也是cypress 的客户端界面。
这里就已经完成了cypress的安装内容了。

cypress开始页

重新查看项目，就会看到目录已经发生改变了。同时cypress自带的脚本案例也可以去运行。
接下来就可以看到启动之后cypress包含脚本的界面了。这也是cypress 的客户端界面。